БЭМ правильное вложение, я не знаю, как написать CSS / менее - PullRequest
Новая
       18

БЭМ правильное вложение, я не знаю, как написать CSS / менее

0 голосов
/ 13 июня 2018

У меня большая проблема с классификацией БЭМ и css / less.

Вот мой старый HTML-код, который я хочу переписать в "стиль БЭМ": 

<div class=header-cart">
    <ul>
        <li class="mount">
            <a href="/ncart/">
                <span />
                <span class="small_cart_price_main"></span>
            </a>
            <ul class="small_cart_products">
                <li>
                    <a>
                        <img />
                        <span />
                        <strong>
                            <span />
                        <strong>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

и вотмоя старая структура кода css / less, которую я хочу переписать в "BEM style": 

.header-cart{}
.header-cart ul{}
.header-cart li{}
.header-cart li a{}

Это нормально, но теперь мне нужно преобразовать этот старый css в "BEM css / less": 

.header-cart li.mount a{}
.header-cart li.mount .small_cart_price_main{}
.header-cart li.mount:hover > ul{}
.header-cart ul li.mount ul{}
.header-cart ul li.mount ul li a{}
.header-cart ul li.mount ul li a strong{}

после классификации БЭМ (я не знаю, нормально это или нет: /): 

<div class=header__cart">
    <ul class="header__cart-ul">
        <li class="header__cart-li header__cart-li--mount">
            <a class="header__cart-a header__cart-a--mount" href="/ncart/">
                <span />
                <span class="small_cart_price_main"></span>
            </a>
            <ul class="small_cart_products">
                <li>
                    <a>
                        <img />
                        <span />
                        <strong>
                            <span />
                        </strong>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Это будет выглядеть примерно так: 

.header{
&__cart{...}
&__cart-ul{...}
&__cart-li{...}
&__cart-a{...}
}

Проблема в том,что я не хочу, чтобы мой код выглядел так:

Например (стиль CSS): 

.header-cart li.mount a{}

(стиль Меньше): 

.header{
    &__cart-ul .header__cart-li--mount a{
        ...
    }
}

или что-то вроде этого: 

.header{
    &__cart-ul{
        &__cart-li--mount{
            &__cart-a--mount{
                ....
            }
        }
    }
}

Или даже так: 

.header-cart ul li.mount ul li a strong{}

Кто-нибудь может мне помочь?

Есть ли другой вариант, как избежать этого стиля?Это правильно?Я сделал ошибку в названии класса?

Я действительно извиняюсь за плохой английский.

...