Первый рукописный блог рунета™

21 января 2013 я написал про технику мнемонических CSS-правил, которую использую достаточно давно и нахожу исключительно удобной.

Оказывается, эту же технику использует Yahoo под названием Atomic CSS. Там прекрасный флейм в комментах кста.

Техника эта – когда мы пишем кучу правил типа .mt10 {margin-top:10px} или .fl {float:left} – особенно удобна, если сделать набор генерализованных правил большим, с частой сеточкой.

В CloudWall и системах, на нём построенных (общий объём выдачи с таких систем – 600К страниц в месяц есличо) объём таких правил в CSS-файлах – примерно 30Кбайт. Это 10Кб гзипом, меньше маленькой картиночки.

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

В самом деле наилучший вариант – обе техники сочетать.

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

То-есть, даже очень сложные приложения требуют относительно скромных кастомных CSS-стайлшитов в стиле БЭМ – если подставить под БЭМ более “низкоуровневую” технику типа Atomic CSS.

В реальности это даёт вкусные каврижки. Скажем, для довольно сложного мобильного приложения весь CSS-код укладывается в 80 строк:

Типичный объём CSS для таких приложений – полтысячи строк и больше, и конечно при БЭМ подходе чистоганом хрен их встроишь куда-то. А тут оно что на мобиле, что во всплывайке, что виджетом на странице одинаково работает и выглядит.