Как управлять библиотеками CSS/трусиками

CSS

Исправлено 21 октября 2018 г. Чтобы сделать статью яркой, я использовал слишком много преувеличенных методов модификации, так что многие друзья игнорировали само содержание. На основании комментариев пользователей сети и выявленных недостатков. Немного переработал стиль написания, удалил лишнюю чепуху, разобрал структуру статьи.

названиеНа мой взгляд, это одна из самых сложных проблем в CSS.

CSS не имеет особого значения.логика, в то время как более ориентированный на производительностьто, что вы видите, это то, что вы получаетеязык. Вы пишете атрибут и у него есть стиль, так же, как грызть семечки дыни, вы можете получить вознаграждение во времени за каждое грызение. Такого рода радость недоступна в других языках разработки.

В отличие от других языков, ориентированных на логику, в CSS больше методов управления кодом. Есть только два инструмента, которыми вы можете управлять CSS, один из нихссылка на файл, другойназвание. Обычно, чтобы уменьшить HTTP-запрос страницы, мы максимально объединяем файлы CSS. так что полагайся нассылка на файлЭтот способ управления CSS очень узок.

Мы все знаем, что область действия CSS глобальна, и если вы ссылаетесь на файл CSS, это повлияет на всю вашу страницу. Итак, СССуправление кодомБремя полностью ложится наназваниеСюда.

Короче говоря, вы можете управлять CSS, если можете назвать CSS.

Управление CSS похоже на управление «трусами».

Для управления CSS я приведу здесь неуместную, но очень уместную аналогию, похожую на аналогию в повседневной жизни.трусикиМенеджмент, да, нижнее белье, которое вы носите каждый день, а «библиотека классов» в CSS — это омоним (я слишком талантлив).

Как упоминалось ранее, управлением CSS можно управлять только путем именования. Звучит как повод для радости, потому что есть только один путь, так что ни у кого нет выбора. Однако, к нашему удивлению, даже если есть только один путь, все идут разными путями.

Например, если у нас есть 7 разных пар нижнего белья, и если мы управляем бельем только с помощью названий, сколько будет возможностей?

по дате по цвету По материалу По образцу ...
.星期一{} .红色{} .纯棉{} .格子{} ...
.星期二{} .黄色{} .涤纶{} .横条纹{} ...
.星期三{} .蓝色{} .氨纶{} .波点{} ...
... ... ... ... ...

Точно так же, как на тысячу читателей приходится тысяча Гамлетов, разные люди называют одно и то же по-разному. Потому что то, что вам нравится и знакомо, в основном незнакомо другим людям. Если вы мне не верите, то можете спросить у коллег, то, как вы резюмируете и называете нижнее белье, скорее всего, будет другим. Так что возможности для этого безграничны.

Конечно, если трусиков всего 7 пар, у нас с вами разные методы именования, пока я могу понять основы, все будет хорошо. Однако, когда мытрусикируководство поднялось добиблиотекаконцепции, все не так просто.

Предположим, ваш отец занимается добычей полезных ископаемых, а ваша семья богата. И особенно вы любите покупать нижнее белье, красное, оранжевое, желтое, зеленое, голубое, синее, фиолетовое, цветное, кружевное, модальное, хлопковое, обтягивающее... Всего 100 видов нижнего белья, позвольте спросить, как бы вы назвали эти 100 пар трусиков?

На этом этапе вы обнаружите, что описанных выше методов управления 7 парами нижнего белья недостаточно. Так что делать?

Общий подход к управлению CSS «штанами»

Как упоминалось ранее, проблема управления CSS — это проблема именования CSS. Итак, давайте взглянем на BEM, самое популярное общее решение для именования CSS, доступное в настоящее время.

Поскольку я не являюсь сторонником БЭМ, предыдущий пример был ошарашен комментариями пользователей сети, поэтому давайте поговорим о результатах непосредственно здесь.

.block__element--modifier{ /* */ }

Интуитивно видно, что после ссылки на БЭМ наш CSS имеет трехуровневую область видимости. Как это объяснить?

Проще говоря, то, как мы назвали 7 трусиков ранее, было одномерным. Но после использования БЭМ его можно увидеть как трехмерный куб с длиной, шириной и высотой 10. Если вы хотите что-то найти, вам нужно только знать координаты, соответствующие соответствующей длине, ширине и высоте, чтобы найти это. похожий:

.长1__宽2--高3{ /* */}

Не проще ли вдруг. Система БЭМ решает проблему именования CSS, а ее ремонтопригодность и расширяемость также очень хороши. Так что это очень рекомендуемое решение для управления кодом CSS. Заинтересованные студенты могут прийти и узнать для себя.

Здесь я хочу сказать, что я не люблю БЭМ (чувствую, что снова ударю себя по лицу). Вместо того, чтобы не любить BEM, я мог бы также не любить само название CSS. Почему ты это сказал? потому что для меняназваниеЭто очень болезненная вещь.

Когда я пишу код, я часто сталкиваюсь с такой проблемой. Есть два очень похожих модуля, но они немного отличаются. Для того, чтобы использовать один и тот же стиль, вы должны абстрагировать эту часть, но абстрагируемая Эта часть, и не может быть склонен к одному из двух, как вы это называете? Нравится:

/* 这个例子不是 BEM 的正确使用姿势，这里只是作为参考 */

.柜1__屉2--内裤，.柜2__屉2--内裤{
    名称：贴身的下身内衣；
    大小：中号；
    颜色：粉色；
}
.柜1__屉2--内裤{ 
    适合性别：男； 
}
.柜2__屉2--内裤{ 
    适合性别：女； 
    款式：蕾丝；
}

<div style="柜1__屉2--内裤">一条内裤</div>
<div style="柜2__屉2--内裤">另一条内裤</div>

Вы хотите абстрагировать общий класс для общих частей двух приведенных выше предметов нижнего белья, как его назвать? Тогда еще страшнее то, что в это время есть третья пара нижнего белья:

.柜2__屉3--内裤{ 
    名称：贴身的下身内衣；
    大小：中号；
    颜色：红色；
    适合性别：女； 
    款式：蕾丝；
}
<div style="柜2__屉3--内裤">又一条内裤</div>

Затем вы узнали, что общее имя класса, которое наконец-то было названо ранее, не может быть использовано на этой третьей паре нижнего белья. Однако вторая пара нижнего белья и третья пара нижнего белья имеют общую часть, можно ли абстрагировать эту часть дальше? Раз абстрагироваться, значит взять имя, но как выбрать имя в это время? На этот раз я расширился на две ступени, а моя рухнула.

Конечно, в реальной разработке я считаю, что у каждого есть лучший метод именования для решения этой практической проблемы. Я просто использую этот преувеличенный способ доказать, что именование - очень сложная вещь (не относитесь серьезно к моей позе).

Вам нужны трусики, а не то, куда они деваются

Каждый раз, когда мы не можем найти нижнее белье, мы инстинктивно спрашиваем: «Мама! Где нижнее белье, которое я носила вчера?»

Мама обычно нетерпеливо отвечает: «Я же тебе вчера сказала, что он во втором ящике первого шкафа. Сколько раз ты должен задавать этот вопрос?»

.柜1__屉2--内裤{ 
    名称：贴身的下身内衣；
    大小：中号；
    适合性别：男； 
    颜色：黑色；
}

«Первый шкаф, второй ящик», что очень похоже на то, как его назвал БЭМ, конечно, он может сказать вам, где находится ваше нижнее белье, очень простым и понятным способом.

Но я не знаю, задумывались ли вы над таким вопросом, если мы спросим: "Мама! Где нижнее белье, которое я носила вчера?" Твоя мать только что бросила трусики тебе в лицо, разве это не тот результат, который мы хотим видеть дальше? да что ты хочешьтрусикиКоординаты, просто поставьтрусикиПросто дай мне это. Я хочу трусики, а не куда трусики девать.

Что такое CSS? CSS этоКаскадные таблицы стилей,иclass(имя класса) явно нет, это просто между CSS и HTMLкрюк.

名称：贴身的下身内衣；
大小：中号；
适合性别：男； 
颜色：黑色；

Эти вещи - стиль «трусов», которые мы хотим в реальном смысле. и.柜1__屉2--内裤Просто координата, которая говорит тебе, где твои "трусы".

В самом процессе разработки, как мы можем рассмотреть нижнее белье в наших руках, когда мы этого захотим?

<div style="名称：贴身的下身内衣；大小：中号；颜色：粉色；适合性别：男；">一条内裤</div>

<div style="名称：贴身的下身内衣；大小：中号；颜色：粉色；适合性别：女；款式：蕾丝；">另一条内裤</div>
    
<div style="名称：贴身的下身内衣；大小：中号；颜色：红色；适合性别：女；款式：蕾丝；">又一条内裤</div>

да, черезstyleНапрямую написав свойства CSS, можно просто и грубо отдать «трусы в чужие руки». И это то, что я думаю, является наиболее подходом к CSS по принципу «что видишь, то и получаешь».

Я могу написать любой стиль, который захочу, и мне не нужно тратить время на создание имени класса для моего стиля, который, как мне кажется, выглядит хорошо, но другие не понимают. Мне также не нужно беспокоиться о том, чтобы назвать загрязнение, потому что у него вообще нет названия. Именно потому, что нет именования, поэтому не нужно беспокоиться ни о каких головных болях, упомянутых выше, связанных с именованием.

Просто потому, что мы слишком привыкли создаватьclassИтак, когда мы пишем стили, первым шагом является не создание самого стиля, а созданиеclass. Мне кажется, что это немногоПоставь телегу впереди лошадииз.

Подводя итог: когда я хочу «трусы», я хочу, чтобы «трусы» появлялись прямо в моей руке, а не получали координату, которая точно говорила бы мне, где находятся «трусы». Как бы хорошо ни звучало это соглашение об именовании координат.

Однажды названный, я управляю 100 «трусами» и в то же время я должен управлять теми 100 именами классов, которые на порядки сложнее, чем сами «трусы».

Управляйте сырьем трусиков вместо трусиков

почему нам нужно идтикод управления, в значительной степени потому, что мы хотим пойтимультиплексэто вызвало. Проще говоря, нижнее белье, которое вы покупаете и используете, а после того, как наденете, выбрасываете, не требует от вас затрат времени и энергии на уход за ним.

В предыдущем разделе мы отказались от идеи повторного использования стилей, используяinline css, при решенииуправление кодомПроблемы, но и опыт программирования, который фокусируется на самом стиле CSS.

Она была решена именно потому, что мы отказались от именованияуправление кодомпроблема, но хочетсямультиплексЭто должно означать именование. Это звучит как парадокс.

Есть ли выход из этого порочного круга? Ответ, конечно, да, то есть отказаться от управления «трусами» и перейти к управлению «трусами».сырье. Мы перечисляем сырье для 100 пар нижнего белья, которым необходимо управлять, следующим образом:

  • Тип ткани: хлопок, лен, полиэстер, спандекс, модал...
  • Цвет: красный, оранжевый, желтый, зеленый, синий, синий, фиолетовый...
  • ...

Основываясь на предыдущем примере, как будет выглядеть наш текущий код?

<style>
  .贴身的下身内衣{ }
  .中号{ }
  .男{ }
  .女{ }
  .黑色{ }
  .红色{ }
  .粉色{ }
  .蕾丝{ }
</style>

<div class="贴身的下身内衣 中号 粉 男">一条内裤</div>
<div class="贴身的下身内衣 中号 粉色 女 蕾丝">另一条内裤</div>
<div class="贴身的下身内衣 中号 红色 女 蕾丝">又一条内裤</div>
<div class="红色">一匹红色的马</div>

Прежде всего, поскольку эти исходные материалы уже являются мельчайшими единицами, которые нельзя разделить, их имена можно легко объединить в общую «библиотеку классов». Каждый раз, когда вы создаете новый проект, вы можете использовать его повторно с небольшими изменениями.

Хотя для того, чтобы решить стильмультиплексНам все еще нужно создать имена классов, но, поскольку эти имена не могут быть разделены и их легко закрепить, управление будет намного проще. И с течением времени скорость расширения сырья очень мала. Если компонентизация выполнена хорошо, сырье может быть даже уменьшено без увеличения.

Что еще более удивительно, это сырье используется не только для нижнего белья, но и для одежды, брюк, обуви... и ряда других вещей. Вы даже можете использовать это сырье, чтобы покрасить лошадь в красный цвет. Вот как после того, как наша перспектива изменилась, всеспособ мышленияогромные изменения. вместомультиплексИграйте до предела.

Такой взгляд на атомизацию стилей исходит от команды Yahoo.Atomic CSS(сокращенно ACSS). Без хвастовства, основываясь на этой теории, я самый быстрый программист прототипирования CSS, которого я когда-либо встречал (вероятно, не так много людей, которых я знаю).

Здесь необходимо пояснить, что все мои рассуждения в этой статье основаны на понятии «библиотека». Если вы просто создаете простую страницу операционной деятельности ACSS, вы можете использовать только ACSSбыстрыйЭта одна особенность и ее большое преимуществоуправление кодомЭто произведение не может быть представлено.

Потому что компонентное мышление сейчас самое популярное время. И ACSS — это способ соответствовать компонентному мышлению. Поэтому я особенно надеюсь, что ACSS увидят все. Конечно, мои личные возможности ограничены, если это неуместно, вы можете оставить мне сообщение, и мы обсудим это вместе.

Нижнее белье — это промышленный продукт, а не произведение искусства.

Некоторые студенты здесь могут сказать, что ваш исходный материал явно неправильный Тип ткани не бамбуковое угольное волокно и даже не космический материал, а цвет красный и синий градиент или красочный черный.

Для большинства наших мужчин-программистов нижнее белье — не что иное, как хлопок и не хлопок, а цвет — не что иное, как черный, белый и серый. Даже если вы не программист, вам сложно обнаружить, что обычные люди будут покупать нижнее белье такого множества цветов, как красный, оранжевый, желтый, зеленый, синий, синий и фиолетовый.

Я привожу этот пример, чтобы проиллюстрировать, что такое нижнее белье.Промышленные товарывместопроизведение искусства. Промышленные продукты предназначены для контроля разнообразия сырья для снижения затрат. А те, кто действительно относится к нижнему белью как к произведению искусства, не станут рассматривать проблему повторного использования нижнего белья, потому что у них нет денег.

То же самое относится и к разработке наших веб-страниц.Если ваш веб-сайт не является художественным веб-сайтом, вы обнаружите, что ваш поставщик сырья (дизайнер) предоставляет вам более десятка или двадцати цветов только из цвета.Если это цвет , то с ним должно быть что-то не так.

Если у ваших дизайнеров есть предельные ограничения в отношении собственного языка дизайна, то это действительно очень приятно для нас, разработчиков.

Связанное Чтение

  1. quickLayout.css — Быстрое создание структурно совместимых веб-страниц.@zhangxinxu
    Работы богов-мужчин настоятельно рекомендуются;
  2. «Английский» переосмысливает CSS на волне компонентизации @johnpolacek
    Несмотря на то, что она на английском языке, веб-страница сделана как PPT, что легко понять и настоятельно рекомендуется;
  3. Компонентизация «CSS-мышления» против атомизации @ziven27
    Одна из моих статей посвящена объяснению разницы между «компонентным мышлением» и «атомарным мышлением»;
  4. официальный сайт АКСС@yahoo
    Эта идея должна была быть впервые представлена ​​Yahoo, и недавно они продвигали React ACSS.
  5. О семантике HTML и интерфейсной архитектуре@ пустыня;
  6. Общие классы CSS «перевод» и «разделение проблем»@адамватан;
  7. «Английский» стиль React@SURVIVEJS;
  8. Лучшие практики CSS для английского языка — Atomic CSS@smashingmagazine;

решение

Обновлено 22.10.2019

название NPM github CDN
@_nu/css-acss npm package github jsdelivr

Сказав так много, кажется, что это просто пустая теория. Вот у меня многолетний опыт, подытожил ACSS npmбиблиотека классов @_nu/css-acssДля всех, чтобы использовать.

Для ACSS, bootstrap, material-ui, github... все, что связанобиблиотека классов, и тогда самая полная из всей **библиотеки классов** принадлежитtailwindcss. Конечно, они основаны наstyle-systemсозданная теорией. Стоимость начала работы относительно высока и часто требует вмешательства дизайнеров.

По сравнению с этими проектами преимущества моего плана в том, чтоПростойи экстремальный CSSопыт разработки. Настолько просто, что вся логика упирается только всоглашение об именовании, использовать его можно уже через 5 минут после прочтения документа, да еще и полностью понять всю логику. Окончательный опыт разработки CSS отражается в знакомстве с этим набором правил, и вы начнете подозревать, что ваши пальцы медленнее, чем вы думаете о CSS.

Конечно, чтобы гнаться за простотой и опытом разработки, это тоже недостаток, но он не совершенен и не имеет отношения к подобнымhover,focus... и другие промежуточные состояния без добавления каких-либо пользовательских точек ответа. Эта часть требует от каждого, основанного на их собственных проектах исоглашение об именованииБесплатное расширение.

Категории