gpt4 book ai didi

css - BEM 中附加了 CSS 的所有东西都需要一个类名吗?

转载 作者:行者123 更新时间:2023-11-28 11:02:01 25 4
gpt4 key购买 nike

由于人们仍然建议将 BEM 用于更大的元素,我想我可以试一试。但是我已经通过设置页面的 header 元素遇到了问题。


这是页面标题现在的样子:

<header class="header">
<img class="header__logo" src="logo.png" alt="alt">

<button class="header__button-toggle" type="button">Open menu</button>

<nav class="header__nav" role="navigation">
<ul>
<li><a href="">Nav item A</a></li>
<li><a href="">Nav item B</a></li>
<li><a href="">Nav item C</a></li>
</ul>
</nav>
</header>

我了解如何定义简单的元素,例如 header__logoheader__button-toggle


但是,当涉及到 nav 元素时,我不确定该怎么做。 HTML 不会改变,因为这是一种常见且得到广泛认可的模式,我猜 5 年内将保持不变。

现在我不仅需要将样式应用于 nav 元素,还需要将样式应用于 ulli a - 元素也是如此。我该怎么做?

我会在 Less 中这样做:

.header {
&__nav {
property: value;

ul { property: value; }
li { property: value; }
a { property: value; }
}
}

但这在 BEM 中是否有效,或者这是 BEM 想要消除的?


我必须以这样的方式结束吗?

.header {
&__nav {
property: value;

&__list { property: value; }
&__item { property: value; }
&__anchor { property: value; }
}
}

这使 HTML 非常困惑:

<nav class="header__nav" role="navigation">
<ul class="header__nav__list">
<li class="header__nav__item">
<a class="header__nav__anchor" href="">Nav item A</a>
</li>
<li class="header__nav__item">
<a class="header__nav__anchor" href="">Nav item B</a>
</li>
<li class="header__nav__item">
<a class="header__nav__anchor" href="">Nav item C</a>
</li>
</ul>
</nav>

也许有人可以帮助我理解如何根据 BEM 正确解决这个问题。

最佳答案

是的,您应该为需要在 CSS 中处理的每个元素分配一个类(参见:https://en.bem.info/methodology/html/#binding-blocks-to-a-dom-node)。而且你不应该害怕你的标记中有额外的字节,因为 gzip 会很好地压缩它。

但是你应该避免元素的元素(推理请引用:https://en.bem.info/methodology/faq/#can-i-create-elements-of-elements-block__elem1__elem2)。

所以正确的标记应该是这样的:

<nav class="header__nav nav" role="navigation">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__anchor" href="">Nav item A</a>
</li>
<li class="nav__item">
<a class="nav__anchor" href="">Nav item B</a>
</li>
<li class="nav__item">
<a class="nav__anchor" href="">Nav item C</a>
</li>
</ul>
</nav>

您可能还注意到 nav 元素上有两个不同的类。这在 BEM 方法中称为 mix:https://en.bem.info/methodology/css/#mixes

关于css - BEM 中附加了 CSS 的所有东西都需要一个类名吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48384718/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com