Pobem@v1 (pobems)

[belozer]

Как и обещал, выпустил Pobem@v1.

Список изменений (от версии 0.3.2)

Убрано : в декларациях блоков

Было

:block(block)

Стало

block(block)

Более чистый синтаксис

Больше не нужно для "каскадных" деклараций блоков (block, elem, mod) использовать &. Плагин сам склеивает и разбивает где нужно.

Было

:block(block) {
  &:elem(elem) {}
  &:mod(mod val) {
    width: 100px;
    &:mod(active) {
      &:elem(elem5) {}
    }
  }
  &:elem(elem1) {}
  &:elem(elem3) {}
}

Стало

block(block) {
  elem(elem) {}
  mod(mod val) {
    width: 100px;
    mod(active) {
      elem(elem5) {}
    }
  }
  elem(elem1) {}
  elem(elem3) {}
}

Переименовал Pobems -> Pobem

Такое название прощё запоминается

Синтаксис в виде цепочек (по аналогии с BEMHTML/BEMTREE)

Было

:block(block):elem(elem):mod(mod val)

Стало

block(block).elem(elem).mod(mod val)

Также сохранено

В качестве разделителя между mod val могут служить:

• пробел -
• запятая - ,
• стрелка - ->

Названия блоков могут быть как в кавычках, так и без.

block(block).mod(mod val) === block('block').mod('mod', 'val')

репозиторий NPM репозиторий GitHub

[ilyar]

Как решается проблема с подсветкой и форматирование в редакторе (например WebStorm)?

[belozer]

//cc @ilyar
Я использую в Atom подстветку от stylus, т.к. она больше всего мне нравится (подсвечивает более явно декларации), другие пробовал, не то... Другими редакторами на данный момент не пользуюсь.

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

П.Н. У моих стилей названия файлов имеют расширение .styl (небольшой хак), несмотря на то, что от Stylus отказался в своих проектах.

[ilyar]

WebStorm поддерживает stylus, названия файлов имеют расширение .styl. Подсветка работает с синтаксисом "Было", синтаксис "Стало" ломается на mod(mod val), работает если запятую добавить mod(mod, val). Еще точечная нотация ломает. Вот так, хорошо:

block(block) {
  elem(elem) {}
  mod(mod, val) {
    width: 100px;
    mod(active) {
      elem(elem5) {}
    }
  }
  elem(elem):mod(mod, val) {}
}

block(block)
  elem(elem)
  mod(mod, val)
    width: 100px;
    mod(active)
      elem(elem5)
  elem(elem):mod(mod, val)

Есть смыл пойти на компромиссы, не зря от "сахарного" синтаксиса bmhtml отказалиcь в пользу js.

[belozer]

@ilyar можно точечную нотацию не использовать, она не обязательна

block(block) elem(elem) === block(block).elem(elem) === block(block)elem(elem)

Есть смыл пойти на компромиссы, не зря от "сахарного" синтаксиса bmhtml отказалиcь в пользу js.

На какие именно? Посмотри здесь #1061 обсуждался синтаксис в разных вариациях.

[ilyar]

@belozyorcev Если точечная нотация опциональна и поддерживается запятая mod(mod, val) (сейчас заметил, что на скрине так и есть), то все хорошо.

[belozer]

@ilyar мне нравится такой вариант написания, как показал на скрине. Но не сделал его обязательным.

[belozer]

Думаю ещё над развитием в такую сторону

или как предложил @vithar https://github.com/bem/bem-forum-content-ru/issues/1061#issuecomment-232615547

[belozer]

Обновил readme.md у пакета, сделал более наглядным и лаконичным

Репозиторий GitHub Репозиторий NPM

Интересует ваше мнение по понятности изложенного.

[vithar]

Не хочешь передвинуть в bem-contrib?

[belozer]

@vithar хочу

[belozer]

Для сравнения накидал, как могли бы выглядеть библиотеки с использованием pobem.

Стили из блока Attach https://gist.github.com/belozyorcev/4a6dd62f2750f4f7dac6127ea281dc7e

Описал с помощью Pobem https://gist.github.com/belozyorcev/888b67c87b4f1ed27231c33ab4c5dd2c

[belozer]

Думаю над улучшением плагина... Стоит ли разделять mod на mod и elemMod? (для большей аналогии с XJST)

сейчас mod идёт общий и для блоков и для элементов.

так сейчас:

так планируется:

[tadatuta]

Стоит ли разделять mod на mod и elemMod?

Как по мне — нет.

[belozer]

Подготовил песочницу для pobem. Приглашаю всех желающих потестировать синтаксис :+1:

[belozer]

Продолжение размышлений о синтаксисе теперь в issue https://github.com/bem-contrib/pobem/issues/8