使用像.left {float：left}和.right {float：right}这样的类是否合适

Question

• 哪种方法更易于管理 特别是团队发展？
• 哪个会更优化 更长？
• 两者的利弊是什么？

样式表

#firstblock { background: #000; float: left; }
.genblock { background: #006699; float: left; }

HTML

<div id="firstblock"></div>
<div class="genblock"></div>
How you should do it

或者

样式表

.left { float: left; }

#firstblock { background: #000; }
.genblock { background: #006699; }

HTML

<div id="firstblock" class="left"></div>
<div class="genblock left"></div>

Answer 1

您不应该泄露表示信息（CSS）到您的数据层（HTML）。

您应该为元素指定一个描述其用途的类名。是否浮动与HTML无关。 你决定在CSS中。

如果你有blue这样的课程名称然后你的客户说我们现在想要所有这些东西红色怎么办？

实施例

HTML

<ul id="primary-menu">
....
</ul>

CSS

#primary-menu {
   float: left;
   color: #f00;
}

Answer 2

我认为第一种方法是最好的。使用像left这样的类的问题是，如果有一天left突然需要向右浮动。现在你必须改变所有类。

我会稍微修改第一组样式来阅读：

#firstblock,
.genblock { float: left; }

#firstblock { background: #000; }
.genblock { background: #006699; }

Answer 3

理想的做法是保留HTML格式的任何建议（首先是更好）。例如，firstblock可以重命名sidebar，genblock重命名为content。

Answer 4

这完全取决于您的团队如何构建和维护HTML和CSS。

使用文字类名来定义样式（.left = float：left）意味着没有触及CSS的开发人员更容易构建HTML。它更具人性化。缺点是你可能会得到很多额外的类，否则你根据内容的类型使用更多的语义类名称就不需要了。

我认为较小的团队应该坚持使用语义类名称来进行更精简的标记，并更好地分离内容和风格。较大的团队可以从更加文字和冗长的类使用中受益，从而使长期维护和HTML生成更容易管理。