Question

哪个处理时间更好，还考虑到开发人员的易用性？

.font_small{ font-size:10px; }
.font_blue{ color:blue; }
.font_red{ color:red; }

<span class="font_small font_blue">Hello World!</span><br />
<span class="font_small font_red">Today's the day!</span>

或

.font_blue_small{ color:blue; }
.font_red_small{ color:red; }

.font_blue_small .font_red_small { font-size:10px; }

<span class="font_blue_small">Hello World!</span><br />
<span class="font_red_small">Today's the day!</span>

或

.font_blue_small{ color:blue; font-size:10px; }
.font_red_small{ color:red; font-size:10px; }

<span class="font_blue_small">Hello World!</span><br />
<span class="font_red_small">Today's the day!</span>

或

我还没有另一种选择......？

Answer 1

他们都没有：）

从你的css类名中取出实现。如果将蓝色变为绿色怎么办？如果你想改变不是字体的东西的颜色怎么办？

Answer 2

对于你的例子，我会选择第一个。

我假设这只是一个例子 - 在实际使用中，你应该使用描述性的类名：

<span class="greeting">Hello world!</span>
<span class="motd">Today's the day!</span>

使用这样的类，你不太可能需要组合类名，因此，这个问题很少出现。现在，鉴于HTML，我会选择第二个或第三个选项，具体取决于两个类共享的规则数量。

Answer 3

除非您的页面有成百上千个嵌套数百个级别的DOM节点，否则上述CSS规则的差异不一定会对渲染时间产生影响。如果您担心下载时间的字节大小，那么使用类似CSSMin的压缩器可能比尝试将类组合在一起更好，就像在第二个和第三个示例中一样。

简而言之，请使用第一个，因为它的实现更清晰，并且不太可能存在性能差异。但是使用像Rimian和nickf这样的描述性类名称。

Answer 4

.small { font-size:10px; }
.blue  { color:blue; }
.red   { color:red; }

<span class="small blue">Hello World!</span><br />
<span class="small red">Today's the day!</span>

但是尝试为你的课程使用更好的名字，比如“maintitle”，“teaser”，“info”，“header”等。蓝色不好。如果客户下周想要绿色或红色怎么办？

最好使用“元命名”，所以在它应该显示之后命名。

Answer 5

第一个允许更多的灵活性和代码可重用性。

CSS - 哪种方法更好？

5 个答案: