One true BEM css selectors form

simpliest-bem-css-syntax.ru.md

Упрощённый css-синтаксис для BEM

bem-site/bem-forum-content-ru#1061 (comment) https://github.com/postcss/sugarss

---

OBSOLETE

Здесь представлен черновик идеи сокращённой записи bem-сущностей в css/stylus.

tl;dr: К сокращённой записи добавляется имя непосредственно родительской БЭМ-сущности без модификаторов.

Может быть реализовано путём добавления PostCss в сборку.

Далее для удобства описывается, так будто конвертация сокращённой записи производится в Stylus, а на самом деле преобрзования должны происходить так:

Stylus -> Short Css -> Css
                    |
                < PostCss >

Переменные; на что хочется ссылаться

• block — b — На главный блок, который описывается в файле
• block__el — be — На элемент главного блока
• local — l — На некоторый вложенный блок
• local__el — le — На элемент вложенного блока

Эти переменные должны вычисляться автоматически и расставляться в промежуточном виртуальном представлении css.

Общий принцип преобразования

К сокращённой записи при преобразовании добавляется имя непосредственно родительской БЭМ-сущности без модификаторов ( 1) главный блок 2) его элемент 3) вложенный блок 4) элемент вложенного блока ).

При этом, если описывается модификатор, то в начале добавляется ещё и &, чтобы развернуть запись в такой css: .block_mod_val.block_mod2_val2.

Вот, иллюстрирующий вышесказанное, пример:

.block
    ._mod_val
        ._mod2_val2
            foo: bar

Как записываются сокращения

Записываются как обычно, с опущенной частью до _, упоминающей непосредственно родительскую сущность:

• Описание модификатора выглядит так: ._mod-name_mod-val.
• Описание элемента, соответственно, так: .__elem.
• Элемента с модификаторами, очевидно, так: .__elem_mod-name_mod-val.

Далее конкретно показано что и во что должно разворачиваться. Рассмотрены основные кейсы, которые, как оказалось, достаточно сильно похожи.

Замена сокращённого модификатора ._mod_val

Непосредственно внутри главного блока

._color_black → &{$block}_color_black

Аналогично block_* — внутри главного блока с модификаторами

Внутри элемента главного блока

._color_black → &{$block__el}_color_black

Аналогично: block__el_* — внутри элемента главного блока с модификаторами

Внутри вложенного блока

._color_black → &{$local}_color_black

Аналогично: local_* — внутри вложенного блока с модификаторами

Замена сокращённого элемента .__elem, .__elem_mod_val

Внутри главного блока

.__control_color_black → {$block}__control_color_black

Аналогично: block_* — внутри главного блока с модификаторами

Аналогично: block__el — внутри элемента главного блока

Аналогично: block__el_* — внутри элемента главного блока с модификаторами

Внутри вложенного блока

.__control_color_black → {$local}__control_color_black

Аналогично: local_* — внутри вложенного блока с модификаторами

Аналогично: local__el — внутри элемента вложенного блока

Аналогично: local__el_* — внутри элемента вложенного блока с модификаторами

Особые случаи

• TODO подумать, какие могут быть более сложные нетривиальные случаи.