Frontender Magazine

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

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

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

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

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

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

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

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

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

Принципы БЭМ

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

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

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

<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-архитектуре, БЭМ и отличных технических приемах, но это ещё не всё. Воркшоп дал нам возможность встретить человека, который работал со всемирно известными компаниями, и мы смогли многое почерпнуть из его опыта.

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

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Gabriel Fagundez
Автор:
Gabriel Fagundez
GitHub:
gabrielfagundez
Twitter:
@gabrielfagundez
Антон Немцев
Переводчик:
Антон Немцев
Сaйт:
http://frontender.info/
Twitter:
@silentimp
GitHub:
SilentImp
Skype:
ravencry

Комментарии (7 комментариев, если быть точным)

Автар пользователя
technomaniak1

Подробней бы про ITCSS

Автар пользователя
snake-345

"БЭМ - это блок элемент модификатор, вот посмотрите пример. ITCSS это что то про обратные треугольники. Воркшоп, Гари, мы там были." Краткое содержание статьи.

Автар пользователя
rudnitskih

Cамая бессмысленная статья на фронтендере за последнее время(

Автар пользователя
meff34

Зачем я это прочитал?

Автар пользователя
gr8web

http://thomasbyttebier.be/blog/less-css-mess

https://github.com/xhtmlized/dev-tools/issues/1

Автар пользователя
optimix-designer

К сожалению, статья ни о чем(

Автар пользователя
ghost

И где изучение ITCSS?!