Musings... New syntax

[belozer]

Current favorite

№1 #8 (comment)

[belozer]

@b button { /* 1 */
    @m [mod=val] {  /* 2 */
        color: #444223;
    }

    @e elem {  /* 3 */
        width: 100px;

        @m [mod=val] {  /* 4 */
            width: 40px;
        }
    }

    > h2 { /* 5 */
        opacity: .3;
    }
}

@b button @e elem @m [mod=val] {}

[belozer]

b-button { /* 1 */
    m-mod[val] {  /* 2 */
        color: #444223;
    }

    e-elem {  /* 3 */
        width: 100px;

        m-mod[val] {  /* 4 */
            width: 40px;
        }
    }

    > h2 { /* 5 */
        opacity: .3;
    }
}

b-button e-elem m-mod[val] {}

[belozer]

b:button { /* 1 */
    m:[mod=val] {  /* 2 */
        color: #444223;
    }

    e:elem {  /* 3 */
        width: 100px;

        m:[mod=val] {  /* 4 */
            width: 40px;
        }
    }

    > h2 { /* 5 */
        opacity: .3;
    }
}

b:button e:elem m:[mod=val] {}

Multiple vals

b:button m:[mod=val|val2|val3] e:elem  {}

.button_mod_val .button__elem,
.button_mod_val2 .button__elem,
.button_mod_val3 .button__elem { }

[ilyar]

Не понятно какую проблему решет этот тикет.

[belozer]

@ilyar размышления на синтаксисом.

[belozer]

@ilyar можешь потестить эти варианты по этой проблеме #6?

[belozer]

BEM-SCOPE

based on idea @vithar bem-site/bem-forum-content-ru#1061 (comment)

block-name       - Block Name (as scope)
:(mod val|val2)  - Modificators
.elem-name       - Elem name
~~mixed          - block~~mixed -> .block.mixed
``               - As is, `b` -> b, `textarea.my-class` -> textarea.my-class

product:(view flat|grid)
    ~~mixed-block // 1
        width: 100px    
        
    ~~.with-mixed-elem // 2

    child-block // 3
        width: 100px    

    .title // 4
        color: #fff

    .image.mixed-elem // 5
        width: 100px
        heigth: 20px

    .info:(size m) // 6
        color: 100px

    &:first-child // 7

    >`h2` // 8
        font-size: 10px

product.image:(size l)~mixed-block.elem // 9
product ~~.image:(size l).mixed-block ~~.elem // 10

Example in React style

Product:(view flat) {
    ~~MixedBlock { // .Product_view_flat.MixedBlock
        width: 100px;  
    }

    ~~.MixedElem { // .Product_view_flat.Product-MixedElem
        padding: 10px
    }

    ChildBlock { // .Product_view_flat .ChildBlock
        width: 100px    
    }

    .Title { // .Product_view_flat .Product-Title
        color: #fff
    }

    .Image.MixedElem { // .Product_view_flat .Product-Image.Product-MixedElem
        width: 100px
        heigth: 20px
    }

    .Info:(size m) { // .Product_view_flat .Product-Info_size_m
        color: 100px
    }

    &:first-child { // .Product_view_flat:first-child
       color: #fff
    }

    > `h2` { // .Product_view_flat h2
        font-size: 10px
    }
}

[ilyar]

@belozer BEM-SCOPE не будет нормальной поддержки в продуктах jetbrains, в остальных не смотрел, думаю важно проверить поддержку в основных редакторах, прежде чем применять этот формат. Это важный фактор который будет влиять будут им пользоваться все кто захотят или только будут только адепты.

[ilyar]

Не успел хорошо это обдумать и не рассмотрел все вариации, но это будет работать в продуктах jetbrains и для этого есть postcss api, и есть согласованность с понятиями других технологий (т.е. я за использование тех же терминов block, elem, mix, там где это уместно).

// v1
@block Product view flat {

    @mix @block MixedBlock {
    // .Product_view_flat.MixedBlock
    }

    @mix @elem MixedElem {
    // .Product_view_flat.Product-MixedElem
    }


    @block ChildBlock {
    // .Product_view_flat .ChildBlock
    }

    @elem Title {
    // .Product_view_flat .Product-Title
    }

    @elem Image @mix @elem MixedElem {
    // .Product_view_flat .Product-Image.Product-MixedElem
    }

    @elem Info size m {
    // .Product_view_flat .Product-Info_size_m
    }

    &:first-child {
    // .Product_view_flat:first-child
    }

    > h2 {
    // .Product_view_flat h2
    }
}

// v2
@block Product (view, flat) {

    @mix @block MixedBlock {
    // .Product_view_flat.MixedBlock
    }

    @mix @elem MixedElem {
    // .Product_view_flat.Product-MixedElem
    }


    @block ChildBlock {
    // .Product_view_flat .ChildBlock
    }

    @elem Title {
    // .Product_view_flat .Product-Title
    }

    @elem Image @mix @elem MixedElem {
    // .Product_view_flat .Product-Image.Product-MixedElem
    }

    @elem Info (size, m) {
    // .Product_view_flat .Product-Info_size_m
    }

    &:first-child {
    // .Product_view_flat:first-child
    }

    > h2 {
    // .Product_view_flat h2
    }
}

[belozer]

Ещё один вариант c реализацией конвертера нейминга #9

и по мотивам bem-site/bem-forum-content-ru#1061 (comment)

.block_mod_val {
    _mod2 _disabled {
        color: #444223;
    }

    __elem {
        width: 100px;

        _mod_val {
            width: 40px
        }
    }
}

Результат
→ .block_mod_val
→ .block_mod_val.block_mod2.block_disabled
→ .block_mod_val .block__elem
→ .block_mod_val .block__elem_mod_val

.block__elem1.__elem2.__elem3

→ .block__elem1.block__elem2.block__elem3


.button _view_action _disabled
  __text
     color: gray
    
→ .button_view_action.button_disabled .button__text { color : gray }

Наглядное сравнение со старым стилем