Осваиваем CSS: BEM и ITCSS

Благодаря компании Moove-it пару дней назад у нас была возможность встретиться с Гарри Робертсом (Harry Roberts) — опытным фронтенд-разработчиком. Гарри вёл курсы для компаний вроде Google, Etsy и BBC. Во время нашего двухдневного воркшопа фокус делался на том, чтобы улучшить навыки в области фронтенд-разработки, но на практике мы получили намного больше, чем просто технические знания и умения.

Писать CSS очень просто. Выучить язык — не проблема. Написание трёх строчек CSS для оформления DOM-элемента займет не больше двух минут, но давайте смотреть шире: что если приложение вырастет больше, чем ожидалось в начале работы над проектом? Легко ли поддерживать его код? Что нужно учитывать, чтобы писать более расширяемый и поддерживаемый CSS?

Давайте рассмотрим два технических момента, о которых мы узнали во время воркшопа.

БЭМ. Блок, Элемент, Модификатор

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

Такой подход предполагает следующий процесс:

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

Этот подход хорошо работает, если предположить, что все перечисленные шаги соответствуют истине. Однако так достаточно редко происходит на практике — обычно сайт начинает развиваться и жить своей жизнью. Дизайн постепенно изменяется, добавляются новые страницы и разделы.

Одна из наиболее важных особенностей использования БЭМ состоит в том, что он гарантирует, что все разработчики сайта работают с одной и той же базой кода и используют одну и ту же терминологию. Если потребуется, дизайн сайта может быть изменён в любой момент — без проблем и конфликтов.

Принципы БЭМ

Если говорить о методологиях в программировании, одна из наиболее широко распространенных — объектно-ориентированное программирование (ООП). Мы все отлично с ним знакомы, и БЭМ определенным образом схож с ООП. БЭМ — способ выражения реальности с помощью кода, некоторого набора шаблонов, а также способ думать о сущностях в рамках программы вне зависимости от используемого языка программирования.

Компоненты БЭМ

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

В данном случае получится что-то вроде:

<block:search>
    <element:input/>
    <element:button modifier:big>Search</e:button>
</block:search>

И CSS вроде такого:

.b-search {
}
    .b-search__e-input {
    }
    .b-search__e-button {
    }
        .b-search__e-button--big {
        }

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

ITCSS. Разумная, масштабируемая, управляемая CSS-архитектура от Гарри Робертса

Официальный сайт Гарри имеет весьма говорящий заголовок: CSS Wizardry (CSS-колдовство). Воркшоп заставил нас задуматься о наших приложениях и обратить внимание на то, как важно построить свою собственную CSS-архитектуру. Обычно мы создаем большие и сложные приложения, которые изменяются с течением времени. Формирование четко определенной архитектуры просто неизбежно, тем более что это позволяет писать код лучше и быстрее.

Управление CSS при масштабировании приложения — непростая задача, но иногда мы усложняем её больше необходимого. Обратный треугольник CSS (Inverted Triangle CSS) — простая, эффективная и пока слабо освещённая методология, которая помогает управлять, поддерживать и масштабировать CSS в проектах любого размера. ITCSS — это не библиотека, это образ мышления, метафреймворк, если хотите. Он помогает справляться с проблемами, которые возникают при масштабировании CSS, и сохранить здравый рассудок. ITCSS основывается на следующем утверждении: «каждый блок в CSS должен представлять что идет до него и что может быть после». CSS — это огромное дерево зависимостей, и нам нужно управлять ими на очень низком уровне.

ITCSS — одна из наиболее важных тем, которые были затронуты во время воркшопа, и что-то из этого мы уже начали использовать в разработке веб-приложений.

Прочее…

Последнее, но не менее важное: давайте поговорим о Гарри. Мы встретили не только CSS-эксперта, но и просто отличного парня. Можно многое сказать о воркшопе, ITCSS-архитектуре, БЭМ и отличных технических приемах, но это ещё не всё. Воркшоп дал нам возможность встретить человека, который работал со всемирно известными компаниями, и мы смогли многое почерпнуть из его опыта.

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