Доброго времени суток. На днях читая очередную статью о том, как повысить свою эффективность в верстке и расширить кругозор возможностей, я задумался, а что сейчас в тренде? Как вы уже поняли, я начал добывать информацию о подходах. Как итог, моему изумлению не было предела, когда я понял, что за много лет почти ничего не поменялось.
Для начала предлагаю разобраться, о чем статья. В данной статье я попытался свести все свои знания касающиеся использования CSS и подходов (методологий) организации CSS-кода (селекторов) и нюансов использования того или иного подхода, а также провести сравнительный анализ. Как говорил Юрий Гагарин - Поехали!
Вначале было слово…
В начале было слово и слово это было BEM. Для душнил в начале предлагаю ознакомиться с краткой историей создания.
ВЕМ (BEM) CSS — это методология именования классов в HTML и CSS, разработанная в компании Яндекс для создания масштабируемых и поддерживаемых веб-интерфейсов. Но для наглядности предлагаю перенестись в эпоху когда по земле бродили мамонты, активно использовался IE6, jQuery набирал популярность, а у меня еще были волосы на голове и не было седых волос в других местах.
Начало отсчета:
2005–2007: Предпосылки
В середине 2000-х веб-разработка становилась сложнее: проекты росли, код нужно было поддерживать и масштабировать.
В Яндексе столкнулись с проблемой "хрупкости" CSS — изменения в одном месте ломали другие части интерфейса.
2008: Появление BEM
Команда Яндекса (включая Виталия Харисова и других инженеров) начала разработку методологии, которая:
Упрощала поддержку кода.
Делала стили независимыми и переиспользуемыми.
Позволяла работать в команде без конфликтов.
Первые принципы BEM были описаны в 2008–2009 годах.
2010: Формализация методологии
BEM был представлен публично на конференциях.
Появилась документация и первые инструменты (например, bem-tools).
2013–2015: Популяризация
BEM вышел за пределы Яндекса и стал популярен в мировом фронтенд-сообществе.
Появились альтернативные реализации (например, BEM в Sass/Less).
Современный BEM
Методология продолжает развиваться, но основные принципы остаются неизменными.
Используется в крупных проектах
Основные принципы BEM
Блок (Block) — независимый компонент (например, menu, button).
Элемент (Element) — часть блока (например, menu__item).
Модификатор (Modifier) — свойство блока или элемента (например, button--disabled).
BEM решает проблемы каскадности CSS и избыточности селекторов, делая код предсказуемым и легко поддерживаемым. Самым прекрасным было то, что стоило взглянуть на селектор и ты сразу понимал, куда тебе надо лезть чтобы исправить косяк. Благодаря подходу BEM, так же решалась проблема оптимизации рендеринга стилей, так как была рекомендация что уровень вложенности селектора не должен превышать 3х. Вопрос для знатоков: кто из вас знает, как читается CSS-селектор, точнее его алгоритм?
Время не щадит никого
Годы прошли и сложность проектов выросла в геометрической прогрессии, я облысел и заработал седину в некоторых местах. Так же масла в огонь начали подливать новые технологии в разработке (Angular, React, Backbone и другие). В общем все стало сложно.
Atomic CSS (или функциональный CSS) — это подход к написанию CSS, при котором используются небольшие, одноцелевые классы с максимально возможной декомпозицией стилей.
История создания Atomic CSS
Концепция Atomic CSS не имеет одного конкретного автора, но её развитие связано с несколькими ключевыми моментами в эволюции веб-разработки:
1. Ранние предпосылки (2000-е)
CSS-фреймворки вроде Bootstrap и Foundation использовали утилитарные классы (например, .text-center, .mt-10), но они были частью более крупных систем.
OOCSS (Object-Oriented CSS, 2009) от Николь Салливан (Nicole Sullivan) предложил разделение структуры и оформления, что стало шагом к атомарности.
2. Появление Atomic CSS (2010-е)
2013–2014: Yahoo! разработал ACSS (Atomic CSS) как часть своего фреймворка. Главный идеолог — Тьерри Кобленц (Thierry Koblentz).
Основная идея: вместо семантических имен классов (.button-primary) использовать атомарные (.bg-blue, .p-10).
Цель: уменьшение дублирования кода и размера CSS.
2014: Статья Кобленца "Challenging CSS Best Practices" вызвала споры, но популяризировала подход.
3. Развитие и инструменты
2017: Tailwind CSS (Адам Уотан) сделал Atomic CSS мейнстримом, предложив готовую систему утилитарных классов.
Другие решения:
Tachyons (2014) — ранний фреймворк Atomic CSS.
CSS-in-JS-библиотеки (например, Styled System) заимствовали идеи атомарности.
4. Современное состояние
Atomic CSS стал популярен в больших проектах (например, Facebook, GitHub) благодаря:
Минимальному CSS-бандлу (только используемые классы).
Быстрой разработке без переключения между файлами.
Критики указывают на сложность чтения HTML из-за множества классов.
Atomic CSS эволюционировал из идей OOCSS и утилитарных подходов, а его расцвет связан с фреймворками вроде Tailwind. Сегодня это один из ключевых подходов в веб-разработке. Простота в освоении подкупает, да и в целом писать атомарные классы в разы проще чем описание всего и вся.
Противостояние Кинг-Конга и Годзиллы…
Итак, сейчас начнется самое интересное. Кто дочитал до этого момента, начал задаваться вопросом, а зачем я это все вообще затеял? Типа Atomic современные и прогрессивнее и чего тут думать? Не совсем так, тут ситуация, как с автомобилями Toyota: кто-то считает, что раньше было лучше, кто-то, что современные вообще пушка-гонка-петарда. Предлагаю разобраться что и для чего подходит.
Плюсы BEM
Четкая структура - ясная иерархия компонентов, так как по классу можно определить что и куда вложено
Изоляция стилей - низкая вероятность конфликтов из-за высокой степени уникальности селекторов
Понятные имена классов - сразу видно, к чему относится стиль
Масштабируемость - хорошо подходит для больших проектов
Поддержка компонентного подхода - идеально сочетается с React/Vue/Angular
Удобство рефакторинга - легко находить и изменять стили компонентов без боязни разломать проект
Минусы BEM
Длинные имена классов - могут становиться громоздкими и есть вероятность опечатки
Повторение кода - возможно дублирование стилей (так как приходиться описывать все)
Большие CSS-файлы - особенно в больших проектах, спорный момент. Тут вопрос больше к организации верстки
Необходимость дисциплины - требует строгого следования методологии, что начинающим разработчикам зачастую не по силам
Меньшая плотность стилей - больше кода в HTML, если сказать простым языком - один класс может содержать в себе все. Начиная от позиционирования и заканчивания анимацией
Плюсы Atomic CSS
Минимальный CSS - один раз определив классы, можно их многократно использовать.Один класс - одна строчка.
Высокая повторяемость - уменьшение дублирования кода
Маленький размер CSS - особенно при использовании утилит
Быстрое прототипирование - легко комбинировать стили прямо в HTML
Нет конфликтов - каждый класс влияет только на одно свойство
Простота поддержки - не нужно придумывать имена классов
Минусы Atomic CSS
"Грязный" HTML - много классов в разметке
Сложность чтения - аббревиатуры не всегда интуитивны
Ограниченная семантика - классы описывают стили, а не смысл
Сложность с динамическими значениями - например, для уникальных отступов
Неудобство для сложных компонентов - может потребоваться много классов
Кривая обучения - нужно запоминать аббревиатуры
Сравнительная таблица
Критерий | BEM | Atomic CSS |
Размер CSS | Больше (может расти) | Меньше (фиксированный) |
Размер HTML | Умеренный | Больше (много классов) |
Производительность | Хорошая | Отличная (меньше CSS) |
Читаемость | Высокая (семантичные имена) | Низкая (аббревиатуры) |
Масштабируемость | Отличная | Хорошая (но может быть messy) |
Кривая обучения | Умеренная | Высокая |
Поддержка | Проще для больших проектов | Сложнее при росте проекта |
Гибкость | Меньше (компонентный подход) | Больше (легко комбинировать) |
Инструменты | SCSS/LESS поддержка | Часто требует генераторов |
Чек лист для выбора
Выбирайте BEM если:
Работаете над большим, долгосрочным проектом
Важна семантика и чистота HTML
Используете компонентный подход (React/Vue/Angular)
В команде важно поддерживать единый стиль
Выбирайте Atomic CSS если:
Нужна максимальная производительность
Проект небольшой или средний
Часто делаете прототипы и быстрые изменения
Готовы использовать готовые решения (Tailwind CSS)
Команда готова к специфическому подходу
Я автор я так вижу - гибридные подходы
Многие современные проекты используют комбинацию обоих подходов:
Atomic CSS для базовых/утилитных стилей
BEM для сложных компонентов
Оба подхода имеют свои преимущества и недостатки. BEM лучше подходит для структурированных, долгосрочных проектов с четкой архитектурой, тогда как Atomic CSS предлагает более гибкий и производительный подход для быстрой разработки. Современная тенденция - использовать инструменты типа Tailwind CSS, которые сочетают преимущества Atomic CSS с улучшенной разработкой. Но я не сторонник готовых css-наборов, так как они избыточные. Вы никогда не будете использовать их целиком, но при этом они затягивают все и сразу
P.S.
Как я люблю повторять: и микроскопом можно гвозди забивать, но зачем.
Каждый инструмент создан под определенные задачи. Я лично использую гибридный подход или BEM так как привычнее ( я, походу, старовер) или же просто у меня все проекты крупные.
