Как написать поддерживаемую библиотеку CSS?

CSS

предисловие

Как написать поддерживаемую библиотеку CSS? Давайте поговорим о шаблонах/архитектурах дизайна CSS. Далее я расскажу вам о трех основных идеях дизайна CSS и недавней распространенной идее дизайна CSS: OOCSS, SMACSS, BEMCSS, METACSS.

OOCSS

OOCSS, буквально означает объектно-ориентированный CSS, представляет собой теорию CSS, предложенную Николь Салливан, Хотя это и теория, на самом деле она больше похожа на спецификацию, согласованную между программистами:

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

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

SMACSS

SMACS через гибкий продукт для проверки вашего проектирования и способа отвечает вашей архитектуре

Есть три основных требования к дизайну:

  • Классификация правил CSS
  • Правила именования
  • Минимизация глубины применимости
Categorizing CSS Rules

Это ядро ​​SMACSS. SMACSS считает, что css имеет 5 категорий, а именно: 1 база 2 Макет 3 модуля 4 штата 5 Тема или скин

Base Rules

Базовая спецификация, описывающая внешний вид элементов страницы по умолчанию в любой ситуации. Его определение не использует класс и идентификатор. css reset также попадает в эту категорию. Общие, такие как normalize.css, инструменты CSS

Layout Rules

Спецификация макета, существует иерархический уровень элементов точек, правила макета, принадлежащие более высоким слой, он может служить более низким уровнем элемента правил модуля контейнера. Левая и правая колонн, принадлежат к спецификации макета системы сетки. Макет - это базовый веб-сайт, будь то о середине или даже какие другие макеты, для достижения основного макета страницы просмотра имеет важное значение. SMACS также согласился с префиксом L-/ макетно-идентифицированной класса класса. Для наиболее распространенных примеров.

.layout-header {}
.layout-container {}
.layout-sidebar {}
.layout-content {}
.layout-footer {}
Module Rules

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

.todolist{}
.todolist-title{}
.todolist-image{}
.todolist-article{}

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

State Rules

Спецификация состояния, которая должна быть хорошо понятна многим фронтенд-разработчикам, описывает внешний вид любого элемента в определенном состоянии. Например, окно сообщения может иметь такие состояния, как успех и ошибка. В отличие от того, как OOCSS извлекает измененные классы, SMACSS извлекает классы стилей более высокого уровня, чтобы обеспечить более высокую возможность повторного использования, например, скрыть запись элемента:

.is-hidden{
    display: none;
}
Theme Rules

Спецификация темы описывает внешний вид темы страницы, обычно ссылаясь на цвет и фоновое изображение. Правила темы могут модифицировать стили первых 4-х категорий, и должны быть отделены от первых 4-х категорий (для удобства переключения, т.е. "скининга"). Правила темы SMACSS не требуют использования отдельного имени класса, то есть вы можете определить .header{ } в правилах модуля, а затем использовать .header { } в правилах темы, чтобы определить часть, которую необходимо изменить (опубликовать -загрузка переопределяет предварительную загрузку) стилевое содержимое)

Naming Rules

Соглашения об именах

Согласно предыдущим 5 подразделениям:

Base Rules(Pass)

Правила макета имеют префикс l- или layout-, например: .l-header, .l-sidebar.

Правила модуля используют имя самого модуля, например .media и .media-image для графического расположения.

Правила состояний имеют префикс is-, например: .is-active, .is-hidden.

Правила темы Если используется как отдельный класс, добавьте префикс theme-, например .theme-a-background, .theme-a-shadow.

Minimizing the Depth of Applicability

Принцип минимальной глубины посадки, простой пример:

/* depth 1 */
.sidebar ul h3 { }

/* depth 2 */
.sub-title { }

Разница между двумя частями CSS заключается в связи между HTML и CSS (это совпадает с принципом разделения контейнера и содержимого OOCSS). Вполне возможно, что, поскольку приведенные выше правила стиля используют селекторы наследования, на самом деле существует определенная зависимость от структуры html. Если html подвергнется рефакторингу, возможно, эти стили больше не будут присутствовать. Соответственно, следующее правило стиля имеет только один селектор, поэтому оно не зависит от конкретной структуры html, пока вы добавляете класс к элементу, вы можете получить соответствующий стиль.

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

BEMCSS

БЭМ расшифровывается как: Блок (блок), Элемент (элемент/подблок/компонент), Модификатор (модификатор), который представляет собой компонентный метод именования CSS и спецификацию, предложенный российской командой Яндекса. Его цель — разделить пользовательский интерфейс на независимые (модульные) модули, чтобы сделать разработку проще и быстрее, а также облегчить совместную разработку группами.

Функции

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

Шаблон именования БЭМ в сообществе встречается по-разному, вот правило именования, предложенное командой Яндекса (код в этой статье использует это правило):

.[Блок-блок]__[Элемент элемента]_[Модификатор-модификатор] Различные шаблоны именования, разница в том, что символы соединения между БЭМ различны, в зависимости от человека:

.[Блок-блок]__[Элемент-элемент]--[Модификатор-модификатор] Любая спецификация определяется исходя из реальных потребностей, что удобно команде для разработки, поддержки и расширения.Каждая спецификация является своего рода «идеей» и «предложением», полученным после разумной оценки.

Блокировать

Является независимым объектом, обычно известным как модуль или компонент.

Пример: заголовок, меню, поиск

правило Имя блока должно ясно выражать его назначение, функцию или значение и быть уникальным. Имена блоков связаны с -. Перед каждым именем блока должен быть добавлен префикс, у этого префикса есть пространство имен в CSS (например: m-, u-, соответственно: mod module, ui element). Каждый блок логически и функционально независим друг от друга. Поскольку блоки независимы, их можно повторно использовать при разработке приложений, что уменьшает дублирование кода и повышает эффективность разработки. Блоки можно размещать в любом месте страницы и вкладывать друг в друга. Блоки одного типа могут иметь определенные различия в отображении, поэтому не задавайте слишком много стилей отображения внешнего вида и в основном отвечают за представление структуры. Это гарантирует, что блоки будут более расширяемыми при повторном использовании и вложении в разных местах. Таким образом, мы можем, наконец, определить правило БЭМ как:

.[пространство имен]-[имя компонента/блок]__[имя элемента/элемент]--[модификатор] место действия Необходимо создать компонент поиска.

написание .m-поиск{} структура

Если вы планируете разработать фреймворк, вы можете использовать репрезентативные аббревиатуры для представления пространств имен: Element UI (el-), Ant Design (ant-), iView (ivu-).
Элемент

Компонент в блоке, соответствующий дочернему элементу/дочернему узлу в блоке.

Пример: заголовок заголовка, пункт меню, пункт списка

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

написание .m-поиск{} .m-search__input{} .m-search__button{} структура

<!-- search 组件 -->
<form class="m-search">
    <!-- input 是 search 组件的子元素 -->
    <input class="m-search__input">
    <!-- button 是 search 组件的子元素 -->
    <button class="m-search__button">Search</button>
</form>

В принципе при записи будет не более двух уровней вложенности, все стили уровневые, а вложенность происходит только в .m-block_active, когда состояние активно.

Модификатор

Определите внешний вид, состояние или тип блоков и элементов.

Пример: цвет, отключено, размер

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

написание .m-поиск{} .m-search_dark{} .m-search__input{} .m-search__button{} .m-search__button_disabled{} структура

<!-- dark 表明 search 组件的外观 -->
<form class="m-search m-search-form_dark">
    <input class="m-search__input">
    <!-- disabled 表明 search__button 的状态 -->
    <button class="m-search__button m-search__button_disabled">Search</button>
</form>
резюме

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

БЭМ-именование сделает имя класса длиннее, но после GZIP и другого сжатия размер файла не имеет большого значения.

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

METACSS

Некоторые общие методы, написанные в глобальном масштабе, являются ответвлениями идей общих методов в SMACSS. Они обычно называются в честь атрибутов css, аббревиатур Emmet css или функций, обычно с атрибутом css в качестве единицы.

Представление свойств:

.df { display: flex; }

Указывает на функцию:

.tcut {  
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  }

И так далее, инкапсулируйте его и используйте глобально, а также быстро добавляйте атрибуты для разработки страниц.

Персональное резюме

smacss охватывает все детали; bemcss фокусируется на именовании и семантике css; oocss фокусируется на возможности повторного использования, рассматривая каждый узел dom как объект, что является идеей возврата css к его основам; metacss фокусируется на быстрой разработке и быстром добавлении свойств, с более тонкой детализацией, добавив имя класса в html-код, чтобы добавить атрибут, вам не нужно переходить к коду css в соответствующем селекторе, чтобы изменить стиль.

Категории