Как верстать компонентами

Как при вёрстке, так и при дизайне, большую роль играют компоненты. Компонент — это элемент дизайна, который можно использовать отдельно от других. Например, каждая кнопка плеера — это отдельный компонент. Её можно поместить в любое место плеера и она от этого не перестанет быть кнопкой:

Несколько компонентов можно объединить в один большой. В этом плеере можно выделить несколько вот таких составных компонентов:

Кнопки слева | Панель просмотра | Кнопки справа

Объединяются компоненты именно так, потому что:

Кнопки слева выровнены относительно друг друга. Нельзя просто взять и подвинуть одну из них по вертикали или горизонтали, не нарушив визуальную целостность композиции.

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

Чтобы двигать составной компонент было проще, его помещают в отдельный <div>.

Каждому составному компоненту — свой <div>.

Компонент Панель просмотра состоит из трёх компонентов по-меньше. Каждый из них тоже достоин своего отдельного <div>:

Время просмотра | Полоска просмотра | Длительность фильма

Компоненты и вёрстка

Компоненты и вёрстка тесно связаны друг с другом. Прежде чем верстать определитесь со структурой компонентов. Так она выглядит для плеера:

Плеер
├── Экран
└── Нижняя панель управления
    ├── Кнопки слева
    |   ├── Кнопка Play
    |   └── Кнопка Volume
    ├── Панель просмотра
    |   ├── Время просмотра
    |   ├── Полоска просмотра
    |   └── Длительность фильма
    └── Кнопки справа
        └── Кнопка fullscreen

Теперь переводим на английский название каждого компонента и объединяем слова в kebab-case. Получим названия будущих CSS-классов:

player
├── screen
└── bottom-controls
    ├── left-buttons
    |   ├── play-button
    |   └── volume-button
    ├── viewing-panel
    |   ├── viewing-time
    |   ├── viewing-progressbar
    |   └── video-duration
    └── right-buttons
        └── fullscreen-button

Следующий шаг — каждому компоненту даём свой <div> и получаем скелет вёрстки:

<div class="player">
  <div class="screen"></div>
  <div class="bottom-controls">
    <div class="left-buttons">
      <div class="play-button"></div>
      <div class="volume-button"></div>
    </div>
    <div class="viewing-panel">
      <div class="viewing-time"></div>
      <div class="viewing-progressbar"></div>
      <div class="video-duration"></div>
    </div>
    <div class="right-buttons">
      <div class="fullscreen-button"></div>
    </div>
  </div>
</div>

Взглянув на макет можно заметить, что три кнопки play, volume и fullscreen выглядят похоже. Все они белого цвета и одного размера. Чтобы не стилизовать каждую кнопку отдельно объединим их общим классом, а старое названием сделаем модификатором:

    <div class="left-buttons">
      <div class="player-button play"></div>
      <div class="player-button volume"></div>
    </div>
    ...
    <div class="right-buttons">
      <div class="player-button fullscreen"></div>
    </div>

Теперь осталось добавить немного стилей. Каждый тег уже получил свой класс, а значит не составит труда добраться до любого из них через CSS-селектор:

.player {
  …
}
.player .bottom-controls {
  …
}
.player .player-button{
  …
}
.player .player-button.play{
  …
}

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

Получается, что верстать можно пользуясь одним и тем же простым алгоритмом:

Макет → Иерархия компонентов → HTML-теги с классами → CSS правила

Алгоритм действий прост и стабильно даёт хороший результат. В такой вёрстке легко ориентироваться, её легко стилизовать, в неё просто добавлять компоненты. Секрет здесь кроется в особой структуре, основанной на визуальных компонентах и связях между ними.

Начинай вёрстку с иерархии компонентов

PS. В статье намеренно не используется методология БЭМ.

Для крупных порталов БЭМ действительно нужен, полезен и оправдан. Но на обычных сайтах БЭМ часто приводит к переусложнённой вёрстке с километровыми названиями классов. В вёрстке становится трудно ориентироваться, её довольно сложно править. Не всегда оно того стоит.