Css methodologies

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

Если все сделано правильно — модули можно с легкостью перемещать в любую часть документа не поломав его.

Используйте только семантические элементы.

#OOCSS#

Отделение структуры от стилей

//Without OOCSS

#button {
  width: 100px;
  height: 25px;
  background: #ccc;
  border: 1px solid #333;
  border-radius: 5px;
}

#box {
  width: 200px;
  height: 400px;
  background: #ccc;
  border: 1px solid #333;
  border-radius: 5px;
}

//OOCSS

.button {
  width: 100px;
  height: 25px;
}

.box {
  width: 200px;
  height: 400px;
}

.skin {
  background: #ccc;
  border: 1px solid #333;
  border-radius: 5px;
}

<a class="button skin" href="">button text</a>
<div class="box skin">box content</div>

Отделение контейнера от контента

header h1 {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 2em;

  color: #F44;
}

/* a bunch of CSS */

footer h1 {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 1.5em;

  color: #F44;
  opacity: 0.5;
  filter: alpha(opacity = 50);
}

<!-- The corresponding HTML -->
<header>
    <h1>Header Title</h1>
</header>
<footer>
    <h1>Small title in the footer</h1>
</footer>

//With OOCSS

h1 {
  font-family: 'Roboto', Helvetica, sans-serif;

  color: #F44;
}

/* ... */

h1, .h1-size { font-size: 2em;   }
h2, .h2-size { font-size: 1.8em; }
h3, .h3-size { font-size: 1.5em; }

/* ... */

.muted {
  opacity: 0.5;
  filter: alpha(opacity = 50);
}

<!-- The corresponding HTML -->
<header>
    <h1>Header Title</h1>
</header>
<footer>
    <h1 class="h3-size muted">Small title in the footer</h1>
</footer>

#SMACSS#

Base

html теги без классов и #id
reset.css

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

a {
  color: #eee;
}

h1 {
  font-size: 1.2em;
}
...

Layout

префикс .l- или #id
классы для position, float и display
grid.css

.l-header, .l-footer. .l-main-nav {
  width: 960px;
  margin: auto;
}

.l-sidebar {
  float: left;
}

.l-inline > * {
  display: inline-block;
}
...

Module

без префиксов (.module {...})
подклассы и классы-модификаторы (.module-subclass {...})
максимальная независимость как от структуры самого модуля так и от контекста

.product {
  margin: 10px;
}
  .product > h3 {
    color: #000;
    margin-bottom: 10px;
  }
  .product-price {
    color: #eee;
    font-size: 2em;
  }

State

префикс .is-state
описание любого состояния отличающегося от дефолтного (.is-hidden, .is-logged, .is-active)
допускается использование !important если оно оправданно

.is-error {
  color: red;
}
.is-hidden {
  display: none;
}
.is-active {
  border: 1p solid orange;
}
...

Theme

определение основных цветов, шрифтов..

#BEM#

Блок — это независимая сущность со своим собственным смыслом, он представляет на странице отдельный кирпичик интерфейса.

Например, блоками могут быть:

заголовок
кнопка
навигационное меню

Элемент — это часть блока, связанная с ним и по смыслу, и функционально. Элемент не существует и не используется без блока, к которому относится. Но не у всех блоков должны быть элементы.

Примеры элементов:

навигационное меню (блок), содержащее пункты меню (элементы)
таблица (блок), внутри которой строки, ячейки и заголовки (элементы)

Модификаторы — флаги у блоков или элементов, они определяют свойства или состояния. Модификаторы бывают булевыми (например, visible: true или false) или или представляют собой пару «ключ — значение» (code>size: large, medium, small).

Контейнеры блоков получают CSS-класс, состоящий из префикса и имени блока:

.b-heading
.b-text-input

Контейнеры элементов внутри блока получают CSS-класс из имени блока, двух подчёркиваний и имени элемента:

.b-text-input__label
.b-text-input__text-field

Модификаторы относятся или к блоку, или к элементу конкретного блока. Их CSS-класс формируется из класса их «владельца», далее следует подчёркивание, и имя модификатора:

.b-text-input_disabled
.b-select__option_selected

Для булевых модификаторов этого достаточно. Если модификатор — пара «ключ-значение», добавляем ещё одно подчёркивание для отделения значения модификатора:

.b-heading_level_alpha

Папка с блоками — «базовое понятие» любой файловой структуры, ориентированной на БЭМ-подход. Имена блоков коротки, описательны и уникальны в пределах проекта — и прекрасно подходят для именования вложенных папок. Сами по себе блоки внутри проекта равноправны, поэтому их проще хранить в виде плоской структуры как набор папок на одном уровне:

/b-menu
  /__item
    b-menu__item.css
    b-menu__item.tpl
  /_horizontal
    b-menu_horizontal.css
  /_theme
    /_dark
      b-menu_theme_dark.css
    /_light
      b-menu_theme_light.css

  b-menu.css
  b-menu.js
  b-menu.tpl

Oversan/Css_methodologies.md