OOCSS - 只使用 class 做样式
OOCSS - only use class to do styling
我正在练习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 个 class,这对我来说看起来很愚蠢。
我应该使用哪种样式?我可以基于 OOCSS 使用 classes 以外的元素来设置元素样式吗?
嗯,从技术上讲,我认为他们指的是您应该使用 类 而不是 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 一样。 类 应该识别多个元素。
我正在练习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 个 class,这对我来说看起来很愚蠢。
我应该使用哪种样式?我可以基于 OOCSS 使用 classes 以外的元素来设置元素样式吗?
嗯,从技术上讲,我认为他们指的是您应该使用 类 而不是 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 一样。 类 应该识别多个元素。