онцепция быстрой записи БЭМ (bemto)

Такая идея!

Сначала я хотел сделать работающий прототип, но потом подумал, что имеет смысл, хотя бы для себя, записать концепцию «на бумаге».

Итак. Что такое БЭМ вы, надеюсь, уже знаете.

Сам по себе БЭМ таков, что имена классов для него раздуваются, порой, донельзя. При этом, идея вполне поддаётся автоматизации, так что в клубе по ссылке выше можно и об этом почитать. Однако, я всегда любил писать код руками, любил статичный html, и ничего не могу с собой поделать. Конечно, совсем плейнтекстовые файлы в наше время писать довольно странно, и я уже упоминал о том, что в последнее время использую для генерации статики фреймворк nanoc. HAML, SASS, автообновление страниц при рефреше в браузере, всё такое.

И вот, — внезапно! — писать длинные каскады классов руками выходит довольно муторно. Какое-то время я пытался копать в сторону использования подшаблонов для блоков, думал на тему генерации SASS, но в итоге ни до чего толком не дошёл.

И, недавно, в одну из итераций моего мысленного процесса на эту тему, я таки набрёл на ниточку, которая, кажется, приведёт меня к выходу из лабиринта хитросплетений классов для блоков-элементов-модификаторов и бесконечной их копипасты и автокомплита.

Решение довольно простое, в самом основании её лежит принцип упрощения. Вот сразу, без лишних слов, идея в виде HTML-дерева, записанного CSS-селекторами, в формате было-стало:

  1. .b-block_type_foo{:.nowrap} → .b-block.b-block_type_foo{:.nowrap}
  2. .b-block > .__element{:.nowrap} → .b-block > .b-block__element{:.nowrap}
  3. .b-block > .__el > .__el{:.nowrap} → .b-block > .b-block__el > .b-block__el__el{:.nowrap}
  4. .b-block > .__el1 > .____el2{:.nowrap} → .b-block > .b-block__el1 > .b-block__el2{:.nowrap}
  5. .b-bl1 > .b-bl2_foo > .__el + .____el_bar{:.nowrap} → .b-bl1 > .b-bl2.b-bl2_foo > .b-bl2__el + .b-bl1__el.b-bl1__el_bar

Это для затравки. Если объяснять словами что происходит:

  1. Чтобы прописать блок с модификатором не обязательно писать название класса по два раза по два раза, достаточно написать сразу модификатор. Модификатор без самого блока используется примерно никогда.
  2. Элементу блока не нужно прописывать имя блока.
  3. Можно создавать элемент для элемента.
  4. Если надо, можно посмотреть «наверх» и прописать элемент для блока выше по дереву (тут, кстати, надо заметить, что я этот пост я пишу в общепринятой БЭМ-нотации, тогда как сам использую для себя чуть иную — вместо «__» я пишу «-». Для меня это получается читаемее и с bemto писать в моей нотации проще)
  5. Ну и сочетание всего этого дела выше.

Картина начинает складываться?

Прописанные выше «селекторы» я уже частично применяю, сделав простенький и грязный макрос для текстмейта, — сначала трансформирую селектор, потом вызываю зен-кодинг. По-хорошему, надо бы это встроить в зен-кодинг как препроцессор, и я, возможно, когда-нибудь попробую что-то такое соорудить.

Однако, селекторами дело не ограничивается. Всё то же самое можно сделать и для HAML (и, по идее, для любого шаблонизатора, сам я попробую что-то сделать именно для HAML т.к. его легко парсить, а я не программист :)), в таком случае запись

.b-bl1
    .b-bl2_foo
    .__el
    .____el_bar

Будет интерпретироваться как

.b-bl1
    .b-bl2.b-bl2_foo
    .b-bl2__el
    .b-bl1__el.b-bl1__el_bar

Ну а для SASS/SCSS можно написать уже постпроцессор, тогда

.b-block {
    …
    ._foo {…}
    .__element {
        …
        ._bar {…}
        }
    }

будет раскрываться сассом сначала в

.b-block {…}
.b-block ._foo {…}
.b-block .__element {…}
.b-block .__element ._bar {…}

что потом простейшей регуляркой преобразуется уже в то, что нам нужно:

.b-block {…}
.b-block_foo {…}
.b-block__element {…}
.b-block__element_bar {…}

Вуаля.

Концепция простая, реализация не должна быть очень уж сложной, однако, сам я, если что-то и реализую, то это будет, скорее всего, реализовано крайне плохо. Потому, если вдруг кто-то загорится идеей и сделает что-то из того, что я описал (дополнение к зен-кодингу, препроцессор для HAML и постпроцессор для SASS), или же реализует эту концепцию для чего-то ещё (LESS, любой другой шаблонизатор, что угодно), — я буду только за.

И ещё: это пока только начало. В вёрстке и, в частности, в БЭМ я вижу много чего, что можно развивать и улучшать, много моих идей хорошо ложатся рядом с концепцией bemto. Так что, напоследок, можете подумать во что, по моим мыслям, может превратиться следующее:

.b-block_foo._bar>.__b-link_lol>.__element._

обавлено:

  1. В последней версии Zen Coding были реализованы некоторые аспекты bemto.
  2. Я начал разработку bemto — набора миксинов для Jade, позволяющую делать многие вещи, доступные в bemto (пускай и чуть-чуть обходными путями).

Вы можете прокомментировать эту статью в Мастодоне.

Опубликовано с метками: #Blog #BEM