Почему даже создатели БЭМа используют в своих проектах Atomic CSS, если большинство его ругает?

Question

[Максим]

Причём не просто используют Atomic, но даже миксуют его с БЭМом.
Заходим на лендинг Школы разработки интерфейсов от Яндекса (там вроде как должны учить правильным вещам), открываем Devtools и видим такую картину:



Надеюсь инлайновые стили они хотябы не вручную писали, а их какой-нибудь скрипт генерировал.

Comments

[alex]

Facepalm

Где там атомик? Лично я вижу бэм модификаторы. Вы вообще пробовали заходить на офф сайт атомика?

[sim3x]

Alex, жесть

[Максим]

Alex, у них классы характеризуют css свойства, что напрочь противоречит БЭМу. Если это не атомик, то что тогда?

Answer 1

[Сергей delphinpro]

Формально там БЭМ в классической нотации block__elem_mod-name_mod-value

class="text text_size_s24 text_align_left"

Мы видим здесь блок text с модификаторами.
Модификатор size со значением s24
и модификатор align со значением left

Тот факт, что модификаторы вырождены до одного css-свойства, не превращает БЭМ в AtomicCSS.

Comments

[Максим]

Тот факт, что модификаторы вырождены до одного css-свойства, не превращает БЭМ в AtomicCSS.

Можно конечно подогнать под БЭМ всё что угодно, но как минимум сам нейминг нарушает основной принцип лучших CSS практик, а именно привязка к CSS свойствам (за что ругают Атомик, Бутстрап и им подобные). Емнип БЭМ - это фактически топовая методология CSS с лучшими практиками и не может априори их нарушать.

Вот статья с css-tricks в качестве подтверждения того, что всё же они юзают atomic:
https://css-tricks.com/lets-define-exactly-atomic-css/

Выдержка из этой статьи:

[Realetive]

1) В вашем примере из вопроса — БЭМ.
2) В вашем примере из вопроса — не Atomic, Alex продемонстрировал пример ACSS.
3) БЭМ не запрещает, БЭМ рекомендует не использовать в модификаторах явные значения, потому что если, в модификаторе text_color_black изменится цвет (например, на серый), но изменить придётся не только свойство, но и разметку (переписать класс в разметке).
4) CSS-tricks знает про БЭМ не больше вашего («благодаря» Гарри Робертсу, который популяризировал БЭМ, прочитав документацию до половины, поэтому был вынужден придумать бесполезную адаптацию, потому что то, что он прочитал, не хватило для понимания основной идеи).
5) Это БЭМ, повторюсь, хоть в Яндексе БЭМ используется не повсеместно, некоторые подразделения категорически против этой методологии.
6) Судя по первому коммиту, Atomic появился на 8 лет позже БЭМ, поэтому БЭМ просто не может что-то заимствовать, скорее наоборот. Atomic пытается решить ту же проблему cascading hell, просто менее декларативно.

[Максим]

Realetive,

с пунктом 3 я полностью согласен, что так делать по-идее нельзя, но реальная практика диктует свои правила и уже в css фреймворках появляются utils классы, которые проще вставить, чем для каждого блока/элемента добавлять необходимые паддинги, марджины и тд

[Максим]

Realetive, по поводу css tricks. Я оттуда лишь привёл пример атомика, и он полностью совпадает с тем, что в примере в посте: один класс - одно свойство.

[Realetive]

Максим, это просто совпадение. Смысл БЭМ не в том, чтобы у класса было много свойств, а в том, чтобы класс содержал как можно больше характеризующих его название свойств, не противоречащих другим состояниям (потому что они выносятся в модификаторы). Atomic никак не характеризует отношение вложенности и зависимости, в БЭМ для этого есть такое понятие как Элементы.Сверстав два блока с одинаковой разметкой, но разным внешним видом, Atomic-верстальщик никогда не поймёт, почему у них разный набор классов. А БЭМ-верстальщику потребуется пол-секунды, чтобы увидеть, что у обного блока block_theme_light и block_size_large, а у другого — block_theme_dark и block_size_small. Третий блок он скомбинирует, просто поменяв значение модификатора, а не будет колдовать с россыпью Atomic-классов.

[Максим]

Realetive, возможно совпадение. Просто очень странно, что их "блоки/элементы" начинаются со слов "background" или "text"

[Realetive]

Максим, видимо, ничего лучше в тот момент не придумали, а сроки поджимали. Как правило при рефакторинге это решается, попутно группируя повторяющиеся свойства в новые классы.

[Сергей delphinpro]

Realetive,

Atomic никак не характеризует отношение вложенности и зависимости

Да, абсолютно верно.
А в примере мы видим четкую зависимость, что в сочетании с нотацией нейминга, несомненно, является БЭМом.

Максим,

Я оттуда лишь привёл пример атомика, и он полностью совпадает с тем, что в примере в посте: один класс - одно свойство.

Это было понятно с самого начала. понятно что именно вас смущает. Но я уже отметил этот нюанс: Тот факт, что модификаторы вырождены до одного css-свойства, не превращает БЭМ в AtomicCSS.