我刚刚开始了解 OOCSS 方法。因为我认为这让一切都更容易理解,所以我也在尝试使用 BEM 命名约定。
使用这个原则,我正在尝试为主页创建一个导航——基本上只是一个内联列表。由于 OOCSS 是关于抽象的,所以到目前为止我创建了这个 CSS:
.horizontal-list {
padding: 0;
list-style: none;
}
.horizontal-list__item {
display: inline;
}
我尽量不使用像 nav
或 navigation
这样的类名,因为我首先尝试在应用皮肤之前对结构进行布局——这就是我真正的问题开始的地方.
要添加一些颜色,更改字体大小等,我可能只是将其添加为修饰符,如 .horizontal-list--nav
。另一个修饰符可以用于面包屑导航:.horizontal-list--breadcrumb
。这样可以吗?
对我来说这是合乎逻辑的,因为文本颜色与内联列表本身无关,但是列表是面包屑,但我不确定我是否从错误的方向处理了这个问题.
另外,该列表的 HTML 看起来像这样:
<ul class="horizontal-list">
<li class="horizontal-list__item"><a href="#">Link</a></li>
<li class="horizontal-list__item"><a href="#">Link</a></li>
<li class="horizontal-list__item"><a href="#">Link</a></li>
</ul>
li
是horizontal-list
的一个元素,很明显。但是如果 a
嵌套在 li
中,我该如何标记它呢?根据OOCSS原则,我不应该这样做
.horizontal-list__item a {
color: white;
}
对吧?但是添加像 horizontal-list__item__item
这样的类在某种程度上似乎也是错误的。我该如何正确地做到这一点?
最佳答案
在 BEM 中,元素依赖于 block 而不是相互依赖。因此,您应该使用 .horizontal-list__link
类标记您的链接,即使在 HTML 中它被放置在另一个元素中也是如此。
此外,如果您在文件系统上使用 BEM 结构,则不会将元素文件夹包含到其他元素文件夹中。结构扁平化,如下所示:
blocks/
horizontal-list/
__item/
horizontal-list__item.css
__link/
horizontal-list__link.css
horizontal-list.css
关于html - OOCSS & BEM - 内联列表 - 如何处理脚手架,如何添加皮肤?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19339121/