前端使用原子类的优劣？
作者：于江水
链接：https://www.zhihu.com/question/22110291/answer/20328000
来源：知乎
著作权归作者所有，转载请联系作者获得授权。
链接：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 中的内容，但是解决了程序员最大的难题：命名。而且语义还算比较清晰，用起来感觉还不错，可以试用一下。
用的多了，你就会明白原子类的优劣以及如何使用了。下面是我的几点感悟：
原子类的缺点：
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 中的内容，但是解决了程序员最大的难题：命名。而且语义还算比较清晰，用起来感觉还不错，可以试用一下。
