На небольших сайтах обычно не имеет особого значения то, как вы организуете свои стили. Вы заходите туда, пишете какой-нибудь CSS или, может быть, даже немного SASS. Компилируете все это в таблицы стилей с базовыми рабочими настройками, а затем собираете все стили от разных модулей в единый крохотный пакет.
Однако, когда дело доходит до более крупных и сложных проектов, тогда то, как вы организуете свой код, является ключом к эффективности по крайней мере в трех аспектах: это влияет на то, сколько времени вам потребуется для написания кода, какой объем этого кода вам придется написать, и какая нагрузка ляжет на клиентский браузер. Это становится особенно важным, когда вы работаете с другими разработчиков, и когда важна производительность.
Методологии
Существует множество методологий, направленных на сокращение объема CSS, организацию взаимодействия между программистами и поддержку больших баз кода CSS. Это очевидно в крупных проектах, таких как Twitter, Facebook и GitHub, но и другие проекты часто довольно быстро переходят в состояние "огромный файл CSS".
- OOCSS - Разделение контейнера и содержимого при помощи "CSS-объектов",
- SMACSS - Руководство по написанию вашего CSS кода с пятью категориями правил CSS,
- SUITCSS - Структурированные имена классов и значимые дефисы,
- Atomic - Разбиение стилей на атомарные, или неделимые, части.
Почему BEM выделяется среди других?
Независимо от того, какую методологию вы решите использовать в своих проектах, вы отдадите предпочтение более структурированному пользовательскому интерфейсу и CSS. Некоторые стили менее строгие и более гибкие, в то время как другие легче понять и адаптировать в команде.
Причина, по которой я делаю выбор в пользу BEM, сводится к следующему: он менее запутанный, чем другие методы (например, SMACSS), но все же предоставляет хорошую архитектуру кода (например, OOCSS) и с узнаваемой терминологией. Марк Макдоннелл, автор статьи "Поддерживаем CSS с помощью BEM"
BEM - Блок, Элемент, Модификатор
Блок
Отдельная сущность, которая имеет значение сама по себе.
Примеры
`header`, `container`, `menu`, `checkbox`, `input`
Элемент
Часть блока, которая не имеет самостоятельного значения и семантически связана с блоком.
Примеры
`menu item`, `list item`, `checkbox caption`, `header title`
Модификатор
Флаг у блока или элемента. Используйте для изменения внешнего вида или поведения.
Примеры
`disabled`, `highlighted`, `checked`, `fixed`, `size big`, `color yellow`
Что там под капотом?
Давайте посмотрим, как один конкретный элемент на странице может быть реализован с использованием BEM. Мы возьмем элемент `button` с сайта GitHub:
У нас может быть стандартная кнопка для обычных случаев и еще два ее состояния для разных других случаев. Поскольку мы стилизуем блоки с помощью селекторов классов с помощью BEM, мы можем реализовать их, используя любые теги, которые мы хотим (`button`, `a` или даже `div`). Правила именования предписывают нам использовать синтаксис `блок--модификатор--значение`.
HTML
<button class="button">
Normal button
</button>
<button class="button button--state-success">
Success button
</button>
<button class="button button--state-danger">
Danger button
</button>
CSS
.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.button--state-danger {
color: #900;
}
Преимущества
Модульность
Стили блоков никогда не зависят от других элементов страницы, поэтому у вас никогда не возникнет проблем с каскадом.
Вы также получаете возможность переносить блоки из ваших готовых проектов в новые.
Возможность повторного использования
Создание независимых блоков различными способами и разумное их повторное использование сокращает объем CSS-кода, который вам придется поддерживать.
Имея набор рекомендаций по стилю, вы можете создать библиотеку блоков, что сделает ваш CSS сверхэффективным.
Структурность
Методология BEM придает вашему CSS-коду прочную структуру, которая остается простой и понятной.
