CSS по БЭМ - опыт, плюсы и минусы:
+ Легкость именования: фантазия больше не нужна! Имитация пространства имен сводит подбор названий классов к узкому списку.
+ Переиспользуемость: блочная архитектура располагает к переносу блоков в любые части сайта, не парясь о каскаде.
+ Препроцессор-френдли: на LESS/SCSS код блока с элементами и модификаторами выглядит изящно и логично.
+ Дробление: архитектура БЭМ прям подталкивает делить блоки на отдельные файлы. Это выгодно даже для лендингов - быстрее собрать проект из готовых унифицированных блоков, чем писать монолит HTML и стилей с нуля.
- Громоздкость: именование по БЭМ вручную - то еще удовольствие. Особенно при миксовании блоков с элементами или добавлении модификаторов к элменетам:
header__link—white
И это еще не худший случай!
Проблему решают инструменты автогенерации БЭМ-блоков. Например: https://gist.github.com/nicothin/1ba505f7cdfbe969600afcad6d9f1d33
#CSS #BEM
+ Легкость именования: фантазия больше не нужна! Имитация пространства имен сводит подбор названий классов к узкому списку.
+ Переиспользуемость: блочная архитектура располагает к переносу блоков в любые части сайта, не парясь о каскаде.
+ Препроцессор-френдли: на LESS/SCSS код блока с элементами и модификаторами выглядит изящно и логично.
+ Дробление: архитектура БЭМ прям подталкивает делить блоки на отдельные файлы. Это выгодно даже для лендингов - быстрее собрать проект из готовых унифицированных блоков, чем писать монолит HTML и стилей с нуля.
- Громоздкость: именование по БЭМ вручную - то еще удовольствие. Особенно при миксовании блоков с элементами или добавлении модификаторов к элменетам:
header__link—white
И это еще не худший случай!
Проблему решают инструменты автогенерации БЭМ-блоков. Например: https://gist.github.com/nicothin/1ba505f7cdfbe969600afcad6d9f1d33
#CSS #BEM
Gist
createBlock.js
GitHub Gist: instantly share code, notes, and snippets.