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


ПОДХОДИТЬ

Методология SUIT — это подход, основанный на BEM, но с некоторыми корректировками и дополнениями, внесенными Николасом Галлахером. SUIT делает все то же, что и BEM, но для многих пользователей он считается обновлением.

КОСТЮМ состоит из Утилиты а также Составные части. Внутри компоненты могут быть найдены Модификаторы, Потомкиа также состояния.

SUIT использует комбинацию стилей письма PascalCase, верблюдЧехол а также тире. Соглашения накладывают ограничения на количество сбивающих с толку дефисов и знаков подчеркивания, которые могут появляться в БЭМ.

Например, БЭМ-класс .search-form__text-field станет .SearchForm-textField в КОСТЮМЕ.

Класс CSS SUIT представлен в пяти форматах:

  • u-utilityName
  • ИмяКомпонента
  • ИмяКомпонента—имямодификатора
  • ComponentName-elementName
  • ИмяКомпонента.is-stateOfName

Это соглашение об именах классов подчеркивает разделение между:

  • Полезность
  • Составная часть
  • Потомок
  • Модификатор

Полезность
Утилиты обрабатывает позиционные структуры и стили и написана таким образом, что их можно применять в любом месте компонента. Они начинаются с u- и написано в верблюдЧехол.
Пример: .u-clearFix.

Составная часть
Компонент в SUIT вроде блокировать на БЭМ. Компоненты всегда записываются на PascalCase. Кроме компонентов, все они написаны с использованием pascalCase, что облегчает их идентификацию.
Пример: .SearchForm

Пространство имен компонентов
Необязательные компоненты могут иметь префикс namespace а также nmsp
Пример: .mine-SearchForm

Потомок
Потомок в SUIT заменяет элементы в БЭМ.
Пример: .SearchForm-heading, .SearchForm-textField , .SearchForm-submitButton

Модификатор
КОСТЮМ с использованием модификатор как БЭМ, но их роль более строго контролируется. Модификатор SUIT обычно применяется только непосредственно к компонентам, а не к потомкам. Его также не следует использовать для обозначения изменений. государствопотому что в SUIT есть специальное соглашение об именах для государство.
Модификаторы написаны на верблюжий чехол и перед ним два дефиса --.
Пример: .SearchForm--advanced

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

Состояние начинается с is- и написано в верблюдЧехол. Они также всегда записываются как смежные классы.
Пример: .SearchForm.is-invalid

Официальная документация SUIT:


ACSS (Атомный CSS)

ACSS — это методология, популяризированная Yahoo. Ключевой концепцией ACSS является создание классов для самого высокого уровня стиля. атомныйто есть пары свойство-значение, а затем использовать их в HTML по мере необходимости.
Идея в ACSS состоит в том, чтобы иметь класс практически для любой неповторно используемой связанной пары свойство-значение.

Пример:

.mr-8 {
   margin-right: 8px;
}

.fl-r {
   float: right;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Как мы видим, с этим методом количество классов значительно увеличится, в результате HTML будет заполнен всеми этими классами. Этот метод не на 100% эффективен, но при желании его можно сделать полезным.

Плюсы:

  • Стилизация HTML без выхода из HTML.

Против:

  • Слишком много классов
  • Css и html становятся неаккуратными.

Официальная документация ACSS:


SMACSS (масштабируемая и модульная архитектура CSS)

SMACSS — это способ изучить ваш процесс проектирования и способ приспособить жесткую структуру к гибкому мыслительному процессу.
— Джонатан Снук

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

Вот категории и примеры:


База

Встроенные стили, предназначенные для основных тегов HTML.

Пример:

h1 {
   font-size: 32px;
}

div {
   margin: 0 auto;
}

a {
   color: blue;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Макет

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

Имена классов начинаются с layout-или же l-.

Пример:

.layout-sidebar {
   width: 320px;
}

.l-comments {
   width: 640px;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Модули

Модульные и многоразовые компоненты.

Пример:

.call-to-action-button {
   text-transform: uppercase;
   color: #FFF200;
}`

.search-form {
   display: inline-block;
   background-color: E1E1E1;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Состояние

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

Пример:

.is-hidden {
   display: none;
}

.is-highlighted {
   color: #FF0000;
   background-color: #F4F0BB;
   border: 1px solid #CBBD15;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Темы

Темы используются для изменения визуальной схемы страницы.
Различные правила стиля могут быть идентифицированы с помощью префиксов в именах классов, например, l-header (для макета) или t-header (по темам). Мы также можем установить эти различные типы правил, поместив их в файл и отдельные папки.

Плюсы:

  • Более организованный код.
    Против:
  • По сравнению с BEM или SUIT возможно дублирование учебный класс и больший вес селектора

Официальная документация SMACSS:


Закрытие

Вышеупомянутые методологии можно комбинировать вместе, например, OOCSS-SMACSS, OOCSS-BEM или BEM-SMACSS. Все может быть адаптировано к нашим индивидуальным потребностям.

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

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

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

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

Увидимся в следующем блоге, ребята! 🖐️