为什么要单独为一个float属性写一个类名？

Question

很对教程和网站中都会单独为一个float属性写一个类名，我一直不明白这样写有什么好处？

.left{
    float:left;
}

然后把它添加到一个标签中，一个标签有两个类名这样，为什么不直接写的一个类中

Answer 1

当对float使用较多时，易于复用

Answer 2

假如说你写了一些组件，比如说一个卡片嗯……

然后有时候你想让他正常显示你就放置play就好了，有时候你想让他并排显示，那么只要给他加一个.left就搞定了，比inline-style方便，还不用再去写一个新的类来实现这种样式

其实一个倒是无所谓，假设你有很多这种需求的话…嗯……

Answer 3

假如有一个元素

html<div class="some">blablabla</div>

你希望用脚本来控制其 float，可能会这样写（用 jQuery）

javascriptif (someConditions) {
    $(".some").css("float", "left");
} eles {
    $(".some").css("float", "none");
}

但是如果用 class 的方式，就会这样

javascriptif (someConditions) {
    $(".some").addClass("left");
} else {
    $(".some").removeClass("left");
}

一般情况下来看，代码量差不多的，但是假如

html<style type="text/css">
.special {
    float: right;
}
</style>
<div class="special some">blabla</div>

如果用直接改CSS的方式，你不知道在 else 里应该 float: none 还是 float: right，因为这里虽然是 float: right 但也许有别的 .some 是 float: none 呢，或者更极端的，有些 .some 本来就是 float: left 呢——这下完了，你取消不了这个 float: left 的样式了，因为你不知道如何恢复。如果用一个临时变量去保存原始样式，代码就长了。

但是，如果用 class 方式，完全 OK，代码一点不用改，几乎兼容各种情况。

Answer 4

方便调用，就好比买菜，会事先把菜分类，你要什么菜就直接在那区域拿就行;.left{float:left}一样，当你需要左浮动的时候就直接调用这个类就行了

Answer 5

样式组件化而已 。方便维护和管理甚至是阅读

Answer 6

重复调用.
例如两个结构一样的模块，一个需要左浮动，一个需要有浮动，或者不浮动，那就可以把浮动的类独立出来，在对应的模块上添加，而不用写在.news 类中。

<div class="news left">
    左浮动模块
</div>
<div class="news right">
    右浮动模块
</div>
<div class="news">
    不浮动模块
</div>

除了浮动，其他模块化的一样，两个结构差不多的模块，也可以提取公共部分。

/*公用*/
.mod{}
.mod h2{}
/*私有*/
.mod-other{}
.mod-other h2{}
<div class="mod">
    <h2></h2>
</div>
<div class="mod mod-other">
    <h2></h2>
</div>

Answer 7

等 LZ 尝试去维护一个整站的样式代码的时候

就明白了。

粒子化样式，还是有必要的。