Skip to content

Latest commit

 

History

History
203 lines (158 loc) · 8.41 KB

styles.md

File metadata and controls

203 lines (158 loc) · 8.41 KB

Методология

При написании стилей должна использоваться методолгия БЭМ (Блок Элемент Модификатор).

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

БЭМ документация - обязательно к прочтению.

При именовании классов используется альтернативная схема Two Dashes:

block-name__elem-name--mod-name

Важно ❗️:

  • Блок может содержать внутри себя другие блоки
  • Элемент не может быть частью другого элемента
  • Элементы одного блока не могут быть использованы внутри другого блока. Запрещено взаимествование элементов
  • Модификатор не может существовать без блока/элемента
  • HTML эелемент не может существовать без css класса

Организация, нейминг папок/файлов

Файлы стилей всегда должны хранитсья в отдельной папке. В корне папки со стилями должны находиться файлы для компиляции, папки с другими файлами стилей. Основной файл компиляции должен называться main. Если будет создан отдельный файл со стилями для админ панели, он должен называться admin. При необходимости могут быть созданые другие файлы для компиляции, их названия должны соотвествовать их предназначению.

Независимо от использования препроцессора, файлы которые не являются основными файлами компиляции, должны начинаться с символа подчёркивания. Файлы настроек (подключение шрифтов, переменные) должны находитсья в папке settings. Файлы блоков должны должны находитсья в папке blocks. В папку blocks можно добавить папку admin в который выделить файли стилей относящихся к админ панели.

Пример структуры папок и файлов ✅:


|--styles\
|   |--blocks\
|   |   |--admin\
|   |   |--_body.scss
|   |   |--_header.scss
|   |--settings\
|   |   |--_fonts.scss
|   |   |--overrides\
|   |--admin.scss
|   |--main.scss

В папке blocks/ должны хранится файлы стилей которые соотвествуют блокам в html разметке, согласно БЭМ методологии. Название файла должно быть таким же, как имя блока, который в этом файле описытвается. Важно❗️ В одном файле может быть описан только один блок, его модификаторы, элементы и модификаторы элементов. Даже если блок содержит всего одно свойство, он должен быть описан в отдельном файле.

Пример ❌:

// _header.scss
.header {
  // свойства
}

.header__logo {
  // свойства
}

.header-search {
  // свойства
}

Пример ✅:

// _header.scss
.header {
  // свойства
}

.header__logo {
  // свойства
}
// _header-search.scss
.header-search {
  // свойства
}

При необходимости в корне папки styles может быть создана папка overrides в кородую можно добавлять файлы стилей для переопределения свойств, которые идут вместе с библиотеками или втроенными в Wordpress.

Общие требования к написанию классов и свойств

  1. При использовании препроцессора SASS, синтаксис должен соответствовать варианту SCSS.
  2. Для формировани класов элементов в БЭМ системе запрещено использование ссылки на родителя селектора (вложенные составные селекторы).

Пример ❌:

.header {
  background-image: url(image.png);
  
  &__logo {
    display: block;
    width: 100px;
  }
}

Пример ✅:

.header {
  background-image: url("image.png");
}

.header__logo {
  display: block;
  width: 100px;
}
  1. Для описания значений медиа функций min-width, max-width, min-height, ... должны использоваться явные величины в пикселях. Запрещено использование переменных.
  2. Порядок свойств:
  • Позиционирование
  • Блочная модель
  • Типографика
  • Оформление
  • Анимация
  • Разное

Пример ✅:

.declaration-order {
  /* Позиционирование */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Блочная модель */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;

  /* Типографика */
  font-family: "Arial", sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
  color: #333333;

  /* Оформление */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  opacity: 1;

  /* Анимация */
  transition: color 1s;

  /* Разное */
  will-change: auto;
}
  1. Структура объявления, требования к синтаксису:
  • Селекторы, разделённые запятой, записаны на новых строках.
  • Cелекторы и свойства должны быть записаны строчными буквами
  • Перед открывающейся фигурной скобкой стоит пробел. После скобки запись идёт с новой строки.
  • Свойства стоят на отдельных строках.
  • Свойства внутри блока имеют один внутренний отступ.
  • После двоеточия стоит пробел. Перед двоеточием пробел не нужен.
  • В конце объявления стоит точка с запятой.
  • Закрывающая скобка стоит на новой строке и без отступа.
  • Между блоками правил есть одна пустая строка.
  • Между блоками правил есть одна пустая строка.
  • Во всех случаях в стилях использованы двойные кавычки.
  • В необязательных случаях кавычки не опущены.
  • Cокращенное свойство background не используется.
  • Начальный ноль для значений не сокращён.
  • После запятых в перечислениях стоит пробел.

Пример ✅:

.block {
  margin-bottom: 0;
  margin-top: 0;
  font-size: 14px;
  line-height: 20;
  color: #ff0000;
  background-image: url("image.png");
  background-position: center;
  background-size: cover;
}

.block__element {
  background-color: #000000;
}