前端使用原子类的优劣？

做者：于江水
连接：https://www.zhihu.com/question/22110291/answer/20328000
来源：知乎
著做权归做者全部，转载请联系做者得到受权。

《编写高质量代码 Web前段开发修炼之道》一书中，提倡并提供了一套原子类，因而我就开始在我的和外包的项目中开始使用原子类。

用的多了，你就会明白原子类的优劣以及如何使用了。下面是个人几点感悟：

原子类的缺点：

1，维护困难。相似 m20（表示 margin 20px ） 这样的超级经常使用的原子类，会遍及网页中的不少 div，若是你想让他们变成 margin 15px，要么替换 .m20{} 中的 margin 20px （失去 m20 自己的意义），要么把 html 中的 m20 批量替换成 m15 。再给你一个要求，把一部分替换成 m15。恐怕只能一个一个粘贴复制了吧？

2，代码冗余。包括题主给出的和《编写高质量代码》一书中给出的原子类实例同样，为了灵活，把经常使用的字体都定义成了 f*、经常使用的尺寸都定义了 m* 和 p* 等。但实际上只会用到其中的几个，剩下的都是冗余代码。这对于中度代码洁癖的我来讲，是很难受的，虽然只是几十行代码。

3，控制困难。当我第一次接触原子类而且用此重写了我一个很是简单的 WordPress 主题的时候，我几乎开始膜拜原子类。那个主题实在是简单，因此我几乎没有写 CSS ，只是在 模版文件 中的 div 中添加了众多的原子类就完成了布局。可是当我打算修改某个元素的样式时，有点崩溃，我究竟要用原子类的方式，仍是传统的选择器？

1）若是用原子类，那么我须要定义新的原子类（一般不能随便修改以前的原子类），而后将新的原子类写到 html 标签的后面，来覆盖以前的样式。这样，就会遇到相似 <div class="aa bb cc dd ab ad cd sd">...</div> 的标签，Great！
2）用原子类构造选择器。这样就不用定义新的原子类了，可是你的 CSS 选择器看起来会像下面这样：.aa .bb .cc .ad.ab .ce{} 你肯定不会眼花？
3）没办法，只能针对要修改的元素设置一个对应的类，例如 <h1 class="mb20 f14 fb post-title">...</h1> 而后对 .post-title 来定义要指定的特殊样式，而后将 post-title 类添加到全部须要的 h1 标签中。这时你会发现，我为何不把前面的 mb20 f14 fb 原子类里面的三条语句一块写进 post-title 类中？这样修改的话只须要修改这一个类就能够了，而不须要找到 html 中，增删原子类。

就像 CSS 禅意花园那样，最好的 CSS 代码，是与 HTML 无关的，而原子类，让你在修改编写 CSS 的时候，增长了不少 HTML 的操做，这是最大的缺陷。

原子类的优势：

原子类也有至关多的优势，可是并非全部的原子类。

1，便于抽出复用代码，提升代码复用程度。clearfix 类就是最好的一个例子，将一段用来清除浮动的 CSS 编写成 clearfix 类，在须要清除浮动的 元素 中，增长这个类就能够。相似的还有其余使用场景。

2，CSS 框架的应用。不少前端框架的 CSS 部分，特别是网格系统，都是原子类的具体应用。


原子类的实际应用：

原子类其实不是一种工具，而是一种编写 CSS 的思想，即： 抽出高度复用的样式模块，独立成一个原子类，为对应的模块添加。 CSS 前端框架作的就很是好。对于一个前端项目，按钮部分来讲，能够定义一个 btn 类做为按钮初始化（将 a 或者 button 、input 初始化，加圆角、去边框、加 cursor 等），而后定义诸如 btn-blue 、 btn-red 这样的类来细化按钮的样式。那么对于整个项目的全部按钮，就只须要加两个类就能够实现样式。 =============下面是我本身的一个不正式的用法================ 另外一个应用场景，就是代替命名。在近期的一些项目中，主体部分每每分两栏而且有多种主体样式（假设 .main-blog .main-page ）。因此我定义了 .left .right 类，默认属性分别为 float:left float:right 。针对不一样的主体样式，就能够构造以下的 CSS 代码： .main-blog .left{ .... } .main-blog .right { .... } .main-page .left{ .... } .main-page .right { .... } 这虽然涉及了前面所说的 缺点3 中的内容，可是解决了程序员最大的难题：命名。并且语义还算比较清晰，用起来感受还不错，能够试用一下。