OOCSS - 只使用类来做样式答案

【问题标题】：OOCSS - only use class to do stylingOOCSS - 只使用类来做样式
【发布时间】：2020-06-22 22:38:50
【问题描述】：

我现在正在练习 OOCSS，但遇到了一个问题。

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

如果我想单独设置这 3 个 <li> 项目的样式，我会这样做：

li:nth-of-type(1) {}
li:nth-of-type(2) {}
li:nth-of-type(3) {}

但是根据 OOCSS，我们应该使用 class 来设置元素的样式，例如：

<ul>
    <li class="li-1">a</li>
    <li class="li-2">b</li>
    <li class="li-3">c</li>
</ul>

.li-1 {}
.li-2 {}
.li-3 {}

现在看起来没问题，但是如果我有 10 个 <li> 我必须添加 10 个在我看来很愚蠢的类。

我应该使用哪种样式？我可以根据 OOCSS 使用除类以外的元素来设置元素样式吗？

【问题讨论】：

标签： css oocss

【解决方案1】：

嗯，从技术上讲，我认为他们指的是您应该使用类而不是 html 元素标识符。

所以也许做类似的事情：

<ul>
   <li class="li">a</li>
   <li class="li">b</li>
   <li class="li">b</li>
</ul>

然后只需使用您的原始样式，例如：

.li:nth-of-type(1) {}
.li:nth-of-type(2) {}
.li:nth-of-type(3) {}

在您的情况下，您基本上是在使用类，因为您会使用一个 id。类应该识别多个元素。

【讨论】：