SASS и BEM

В этой статье объясняются SASS и BEM.

Мы объясним концепции и методы реализации для предотвращения путаницы и хрупкости, которые часто возникают при масштабировании CSS, с использованием SASS и BEM на конкретных примерах.

YouTube Video

SASS и BEM

С увеличением количества файлов и экранов с CSS часто возникают такие проблемы, как «Я не знаю, где определён этот стиль» и «Небольшое изменение нарушило внешний вид на другом экране».

Это происходит потому, что CSS по своей сути — язык, который не навязывает правила проектирования. Если продолжать писать в том же духе, количество непреднамеренных зависимостей будет расти.

SASS и BEM — это практические подходы, которые превращают CSS из кода, написанного наспех, в управляемую и планируемую систему, предотвращая подобные проблемы. Комбинируя эти два подхода, вы можете прояснить смысл стилей и одновременно повысить читаемость, переиспользуемость и поддерживаемость кода.

Причины, по которым CSS легко становится неуправляемым

CSS, написанный подобным образом, со временем становится трудно понять, как он себя ведет.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• В этом примере один и тот же класс .title выглядит по-разному в зависимости от места размещения, поэтому невозможно сразу понять, какой стиль будет применён к этому .title.
• Таким образом, по мере того как селекторы становятся более глубокими и зависящими от родительских элементов, становится всё сложнее предсказать область их действия, и CSS становится более уязвимым к ошибкам при изменениях.

BEM — это соглашение о наименовании, которое 'выражает роли через имена'

BEM расшифровывается как Block / Element / Modifier (Блок / Элемент / Модификатор) и отражает в названии, какой компонент представляет класс и в каком он состоянии.

• Block — это независимый компонент.
• Element — это внутренний элемент блока.
• Modifier обозначает состояние или вариант элемента.

1.card {}
2.card__title {}
3.card--highlighted {}

Такое соглашение об именовании позволяет понять структуру и роль компонентов, просто взглянув на HTML.

Базовая структура HTML с использованием BEM

Вот пример реализации карточки (UI) в HTML с использованием BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Только по именам классов можно понять, что это ‘компонент card’, ‘title внутри него’ и ‘выделенное состояние’. Это главное преимущество BEM.

Однако один только BEM может привести к избыточности CSS.

Если писать CSS по BEM как есть, количество кода, как правило, увеличивается.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Здесь использование SASS позволяет создать структурированный код, поддерживающий заданную архитектуру.

Естественное выражение BEM через вложенность в SASS

Благодаря вложенности в SASS можно отразить структуру BEM прямо в коде.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

Символ & ссылается на родительский селектор и отлично подходит для именования по BEM.

CSS, сгенерированный из этого SASS

Приведённый выше SASS компилируется вот в такой CSS.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Хотя внешний вид остаётся прежним, когнитивная нагрузка на разработчика значительно уменьшается.

Проектирование для безопасного использования модификаторов

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

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

Дизайн становится более устойчивым, если модификаторы рассматриваются не как 'дополнения', а как 'изменения'.

Ограничьте вложенность элементов одним уровнем

В BEM важно не делать слишком глубокую вложенность элементов.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

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

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

Наконец, вот пример структуры SASS, практичной для реальных проектов.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

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

Пример файла card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

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

Резюме

SASS и BEM — это не просто модные техники, а практические подходы, превращающие CSS в управляемый код.

• BEM определяет смысл и роль.
• SASS позволяет легко писать код, сохраняя структуру.
• Совмещение обоих подходов делает CSS менее подверженным ошибкам.

Давайте писать CSS так, чтобы будущий вы легко мог его понять.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video