SMACSS Часть 3 Категоризируем CSS

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

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

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

Есть 5 категорий:

  1. Base (Основа)
  2. Layout (Макет)
  3. Module (Модуль)
  4. State (Состояние)
  5. Theme (Тема)

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

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

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

Базовые правила - правила по умолчанию. Здесь почти все селекторы по одному элементу, но также могут включать в себя селекторы по атрибутам, псевдо-классам, дочерним элементам, или элементам-соседям. В общем, базовые стили говорят нам - “Если где-то на странице есть такой элемент, то он должен выглядеть так”.

Примеры Базовых стилей

html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }

Правила Макета разделяют страницу на секции. Макеты держат один или несколько модулей вместе.

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

Правила Состояния - это описания того, как наши модули или макеты будут выглядить в определенном состоянии. Это скрыто, или растянуто? Активно или нет? Эти правила описывают то, как будут выглядеть модули или макеты на меньших и больших экранах. Так же они описывают вид модуля на разных страницах, например на главной, или внутренней.

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

Правила именования

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

Мне нравится использовать префиксы, чтобы различать правила Макетов, Состояний и Модулей. Для Макетов я использую l-, но layout- тоже подойдет. Использование префиксов типа grid- тоже хорошо отделит правила Макетов от остальных стилей. Для Состояний мне нравится использовать is-, как в is-hidden или is-collapsed. Это помогает описывать вещи в очень читабельном виде.

Модулей будет целая куча в любом проекте. Поэтому использвание для каждого модуля префикса типа .module- будет избыточным. Для Модулей подойдёт просто название самого модуля.

Примеры классов

/* Пример Модуля */
.example { }

/* Модуль сноски */
.callout { }

/* Модуль сноски с Состоянием */
.callout.is-collapsed { }

/* Модуль поля для ввода */
.field { }

/* Строчный макет  */
.l-inline { }` 

Связанные элементы внутри модуля используют основное имя в качестве префикса. На этом сайте примеры кода используют префикс .exm, а описания к ним - .exm-caption. Я могу посмотреть на класс этих описаний и моментально понять, что они относятся к примерам кода и определить, где их можно найти.

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

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