CSS по БЭМ - опыт, плюсы и минусы:

+ Легкость именования: фантазия больше не нужна! Имитация пространства имен сводит подбор названий классов к узкому списку.
+ Переиспользуемость: блочная архитектура располагает к переносу блоков в любые части сайта, не парясь о каскаде.
+ Препроцессор-френдли: на LESS/SCSS код блока с элементами и модификаторами выглядит изящно и логично.
+ Дробление: архитектура БЭМ прям подталкивает делить блоки на отдельные файлы. Это выгодно даже для лендингов - быстрее собрать проект из готовых унифицированных блоков, чем писать монолит HTML и стилей с нуля.

- Громоздкость: именование по БЭМ вручную - то еще удовольствие. Особенно при миксовании блоков с элементами или добавлении модификаторов к элменетам:
header__link—white
И это еще не худший случай!
Проблему решают инструменты автогенерации БЭМ-блоков. Например: https://gist.github.com/nicothin/1ba505f7cdfbe969600afcad6d9f1d33

#CSS #BEM

Проект Houdini: типизация кастомных переменных

CSS-препроцессоры упрощают жизнь разработчика, в числе прочего, удобными переменными. Не так давно эта фича вошла в стандарт:

root: {
--my-color: #fff;
}
(нативная CSS-переменная в глобальной области видимости)

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

Проект Houdini - новое API, предоставляющее доступ ко всем стадиям обработки браузером кода - предлагает решение. Из JS мы сможем регистрировать типы переменных:

CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
initialValue: "black"
});

Теперь переменная --my-color принимает только значения цветов. Считывая тип, движок может выполнять больше действий с переменной - включая анимации.

В миру эта часть проекта Houdini называется CSS Properties and Values API. К сожалению, проект страдает от избыточной сложности и слабой поддержки браузерами. В будущем он поможет строить архитектуру веб-приложений гибче и оптимизированнее, ну а пока - просто достоин внимания.

#CSS #Houdini