使用像.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; }