Styles
CSS, SASS, BEM
В качестве методологии написания стилей используется БЭМ.
0. Введение
БЭМ расшифровывается как: блок, элемент, модификатор. Это такой набор абстракций, на который можно разбить интерфейс и разрабатывать всё в одних и тех же терминах. БЭМ - это методология, предлагающая подход к написанию стилей и позволяющая достичь таких характеристик кода, как масштабируемость, лёгкая поддержка, развитие и переиспользование.
Блок – это компонент (группа элементов), формирующий законченную абстракцию и являющийся абсолютно независимым от других блоков, т.е. должен формировать целостный и понятный интерфейс для взаимодействия с этим блоком, а также не зависить от изменения других блоков и не оказывать влияния на другие блоки, составляющие вёрстку страницы.
.btn
Элемент – составная часть блока. Не может использоваться вне него, при этом состояние блока может отражаться на состоянии его элементов.
.btn__title
Модификатор – применяется как для элемента, так и для блока. Позволяет изменять внешний вид, состояние или поведение.
Бывает двух видов:
Логический (да/нет):
.btn--active
Ключ-значение:
Одновременно у одного элемента может быть только один ключ в одном из своих состояний. Кнопка не может быть круглой и квадратной одновременно.
Пример:
У слайдера есть кнопки-переключатели слайдов и содержимое, которые предлежат только ему. 2 кнопки представляют собой место под блоки (компоненты) кнопок. Для каждой иконки определён модификатор-тип.
Как задавать в SCSS:
1. Файлы с исходным кодом
2. Использование возможностей языка/технологии
2.1. Переменные
Необходимо выносить z-index
блока в переменные. Не нужно выносить в переменную значение z-index
, если оно имеет смысл уже внутри конкретного блока и не влияет на отображение других блоков.
Переменные блоков, содержащие значение z-index
должны размещать в одной группе переменных, которая должна быть осортирована в порядке убывания значения z-index
.
Необходимо выносить в переменные названия цветов, размеров и называть семантически.
2.2. Вложенность
Для вложенных селекторов используется плоская запись.
2.3. Правила именования
2.3.1. Модификаторы
2.3.1.1. Синтаксис
Задаётся как:
Логический тип:
btn--<value>
Пример:
btn--active
Ключ-значение:
btn--<key>_<value>
Пример:
btn--state_normal
2.3.1.2. Модификаторы логического типа
Стили, являющиеся логическими флагами, необходимо задавать без значения модификатора, т.е. само значение подразумевается как true
.
Last updated