Question

我对BEM分类和css / less有很大的问题。

这是我的旧HTML代码，我想重写为＆＃34; BEM风格＆＃34;：

<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代码结构，我想重写为＆＃34; BEM风格＆＃34; ：

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

这没关系，但现在我需要将这个旧的CSS转换为＆＃34; BEM css / less＆＃34;：

.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{}

在BEM分类之后

（我不知道它是否正确：/）：

<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 style）：

.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{}

有人能帮助我吗？

还有其他选择如何避免这种风格？这是对的吗？让我在课程命名中犯了错误？

我真的为糟糕的英语道歉。

BEM正确嵌套，我不知道怎么写css / less

0 个答案: