Что дальше...

Мы у себя сошлись на rebem-css + postcss-nested, что в итоге позволяет писать полностью валидный sass, так что с подсветкой все хорошо во всех редакторах (и даже на github):

:block(afisha) {
    padding-bottom: 40px;

    color: #f2f2f2;
    background: #800;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);

    &:before {
        background: linear-gradient(to right, rgb(136, 0, 0), rgba(136, 0, 0, 0));
    }

    &:after {
        background: linear-gradient(to left, rgb(136, 0, 0), rgba(136, 0, 0, 0));
    }

    &:elem(title) {
        position: relative;
        z-index: 3;
    }

    &:elem(movie) {
        position: relative;

        width: 130px;
        margin-right: 9px;
        padding: 5px 0 0 5px; /* In order to move 'premiere' out-of-box */

        text-align: left;
        vertical-align: top;

        color: #fff;

        &:first-child {
            margin-left: 15px;
        }

        &:last-child {
            margin-right: 20px;
        }
    }

    &:elem(premiere) {
        position: absolute;
        top: 1px;
        left: 0;

        padding: 5px 8px;

        color: rgba(0, 0, 0, 0.6);
        background: #fc0;
        text-shadow: none;
    }

    &:elem(premiere):first-letter {
        text-transform: capitalize;
    }

    &:elem(premiere):after {
        position: absolute;
        left: 0;
        bottom: -5px;

        width: 5px;
        height: 5px;

        content: '';

        background: 0 0 no-repeat url(afisha__premiere.svg);
    }

    &:elem(poster) {
        width: 130px;
        height: 195px;
        margin-top: 1px;
    }

    &:elem(name) {
        font-size: 17px;
        line-height: 21px;

        display: -webkit-box;

        margin-top: 3px;

        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    &:elem(genre) {
        margin-top: 4px;

        color: #fff;
        opacity: .5;
    }

    &:elem(shadow) {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        pointer-events: none;

        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5);
    }
}

Меня rebem-css большего всего раздрожал постоянным дублированием объявления блока у элементов, когда элементы зависят от модификатора блока (или 2-х модификаторов). А в целом быстро на него перешёл. Код стал более понятным сходу.

Обновил плагин, добавил поддержку разделителя '->' модификатор -> значение специально для stylus, т.к. он запятую не так как надо обрабатывает.

:block('checkbox'):mod('theme' -> 'dark')

  :elem('box')
    background: #353535
    border: 3px solid #ffe93b

  :elem('control')
    position: absolute
    z-index: -1

@belozyorcev а зачем тебе stylus? В postcss есть все необходимые плагины ;)

А может быть так? (замутить плагин поверх postCss sugarSs)

.block
    ._mod_val
        ._mod2_val2
            foo: bar
    .block2_mod
        baz: qux

Давно так хочу сделать.

@awinogradov Куча кода уже была на stylus написана. Лень переписывать. В будущем буду от него уходить.

@a-x- мало знаком с sugarSS.

Плагин работает с такими строками, которые генерируются после: postCSS nested / Stylus / Less и т.д.:

:block('bl1'):mod('mod', 'v'):mod('mod2', 'v2') :elem('elem')
:block(bl1):mod(mod v):mod(mod2 v2) :elem('elem')

.bl_mod_v.bl_mod2 .bl__elem

Думаю ещё реализовать более "чистый" синтаксис:

block('header') {
  width: 100%
  background: var(--color-base1)
  position: relative
  lost-utility: clearfix

  elem('logo-box') {
    lost-column: 3/12
  }

  elem('main').mod('list', true) {
    mod('m', 'v') {

    }
    lost-column: 9/12
    height: 110px
    background: var(--color-base2)

    elem('next-child') {
      color: #422;
    }
  }
}

block('header').elem('main').mod('list', true) {
  block('icon') {}
}

@belozyorcev последний вариант выглядит симпатично. если будет нормально поддерживать в том числе всякие псевдоселекторы и вложенные селекторы, то 👍. ну и кавычки для имен сущностей нужно делать опциональными, не вижу смысла их писать в CSS.

@tadatuta они опциональны. И разделитель между mod - val тоже. Может использоваться либо mod, val, либо mod -> val (для Stylus). Или же в стиле rebem-css - пробел mod val

upd. Мне кавычки добавляют более привычный синтаксис для моего восприятия и идентичности с BEMHTML.

По поводу псевдо-селекторов и вложенных селекторов уже на данной стадии всё работает. Эти моменты покрыты тестами. pobems v0.3.1 полностью совместим с rebem-css v0.2.0. https://github.com/belozyorcev/pobems/blob/master/test/lib/index.js#L46 https://github.com/belozyorcev/pobems/blob/master/test/lib/index.js#L53

@a-x- SugarSS на сколько мне известно эмитирует Stylus (со слов Андрея Ситника). Значит можно попробовать так:

:block(block)
    &:mod(mod val)
        &:mod(mod2 val2)
            foo: bar
    :block(block2):mod(mod)
        baz: qux

на выходе будут селекторы

.block_mod_val.block_mod2_val2
.block .block2_mod

А точно нельзя избавиться от всего этого шума :block :elem и сделать плагин чтобы записывать так, как я выше показал?

@a-x- можно, но это другая история. Целью данного плагина является изоляция от стиля именования блоков и добавление большей идентичности с BEMHTML, BEMTREE.

Начиная с версии 1.0.0 можно будет писать так

block(block)
    mod(mod val)
        mod(mod2 val2)
            foo: bar
    block(block2).mod(mod)
        baz: qux

ну или так

block(block) {
    mod(mod val) {
        mod(mod2 val2) {
            foo: bar
        }
    }
    block(block2).mod(mod) {
        baz: qux
    }
}

или так

block('block') {
    mod('mod', 'val') {
        mod('mod2', 'val2') {
            foo: bar
        }
    }
    block('block2').mod('mod') {
        baz: qux
    }
}

и это не предел )

Также думаю над нужностью/ненужностью короткого синтаксиса.

b(block) {
    m(mod, val) {
        m(mod2, val2) {
            foo: bar
        }
    }
    b(block2).m(mod) {
        baz: qux
    }
}

Может:

.block.mod_val {
    .elem.mod_val {
    }
}

Или

block-name:mod-name(mod-val) {
    elem-name:mod(val) {
    }
}

Внесу таки 5 копеечек)

Мне кажется такой вариант оптимальным:

block('block').mod('mod', 'val') {
}

Пускай тут есть лишние ковычки, которые необязательны, но зато это легко переносить между шаблонами и стилями. Копипаст жив!)

А ещё можно моду css в bemhtml, чтобы само в файл эмитилось :)

@vithar при таком стиле могут возникнуть проблемы при парсинге, если в проекте используется что-то помимо БЭМ.

Ну для варианта, когда используется кто-то кроме БЭМ, ты уже сделал.

Я ищу наиболее лаконичный вариант писать именно BEM CSS код, чтобы он был максимально близок к валидному CSS, при этом легко читался.

Например так:

informers { /* block */
    padding: 30px 0 20px;

    :(size large) { /* modifier */

    }

    informer { /* element */
        position: relative;

        @tablet, @phone { /* predefined media query */
            display: none;
        }

        :first-child { /* pseudo-class */
            margin-left: 19px;
        }
    }

    icon {
        position: absolute;
    }

    text {
        margin-top: 8px;

        :(important) { /* element modifier */
            font-size: 17px;
        }
    }
}

@awinogradov ни разу не сталкивался с необходимостью переносить селекторы из bemhtml в css и обратно.

@vithar сейчас я тебя больше понимаю.

@vithar думаю такое можно аккуратно реализовать , если скармливать плагину список блоков в проекте.

@vithar понятное дело) у тебя такой возможности не было) а теперь вот есть

Я так подумал... Синтаксис, который предложил @vithar будет прививать правильное написание стилей.

Если надо сдвинуть блок - сделай его элементом родителя и двигай в нём.

т.е. так правильней

.block2 {
  width: 100px;
  height: 100px;
}

.block1__item {
  margin-left: -100px
}

чем

.block1 .block2 {
  margin-left: -100px
}

в итоге

block1 {
  item {
    margin-left: -100px
  }
}

объявление блока происходит только на 1-ом уровней, дальше - всё элементы.

Список блоков не надо скармливать, первый уровень — блоки.

@vithar да, я тебя просто не сразу понял.

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

Можно, кстати, так

block-name another-block {
}

В смысле не пытаться вкладывать это в блок, а иметь на том же уровне. Но тут надо думать, как сделать аккуратно и нужно ли давать возможность достучаться до элементов другого блока (наверное нужно).

при склеивании селекторов получается

block1 item {}

и тут не понятно... Элемент это или блок.

Единственный вариант я вижу - это указание класса

block1 .block2

В общем про это можно думать отдельно и может даже сделать отдельный синтаксис, это же редкий кейс.