CSS哲学伪命题_html/css_WEB-ITnose

标题党。这篇文章断断续续的修改过好几次，也没有满意，本来是想总结一下我这些零散的 CSS 知识结构，可能由于知识体系不全面，总是没能把知识点串联成一个通顺的内容。贴出来权当大家一起讨论下“前世今生”。文章后续可能会不定时更新。

CSS 作为 Web 的基础部分，极其容易上手。但是 CSS 并不算的上是一门编程语言，在语言能力上略显薄弱，往往导致整体的维护性变差。但是这并没有使得大家停止对 CSS 的探索，从命名规范，目录架构，预处理器(如 SASS)，后处理器（ PostCSS），模块化等等的方向上，努力把 CSS 变得更好。

关于自我历程

其实我自己并没有系统的学习过 CSS（虽然我现在也不知道如何系统的学习），看了几个视频，扫了下中文版的 API，然后就开始了切图生涯，很多的知识点也都是后来一些零散的博客中了解到的。这过程中，的的确确踩过不少的坑，有的填了，有的继续*着项目里其它的同学。也导致我在很长的时段时间里都是走在一个混乱无序的 CSS 书写当中。

最早遇到的大概的是命名的问题了吧，因为本身积累的词汇量就少，动不动就没单词可用了。那个时候好像也就是网上列出一大堆像 menu， siderbar之类的“命名大全”来模仿。再到后来接触到了 Bootstrap这种比较系统的框架（里面有好多可以值得借鉴的地方），而后又看到一些按类别划分文件，再配有特有的前缀的管理方式(那个时候还并不知道 SMACSS的名词)，还有一些原子化，把功能和样式分离等等的。在 SASS兴起的时候其实挺兴奋的，因为终于感觉有了点编程的能力，当然了，对变量，嵌套， mixins等等的使用，很大程度上提高了编程效率。在后来同事的分享中，又了解了 BEM 的命名方式（初看很乱，了解后有一种豁然开然的感觉，细细回想起来，也就是大家约定一套共用的命名规范）。以及通过 PostCSS去实现 CSS 中一些自动处理的任务。在 React/ES6/Webpack 出现后，使得很大一部分程度上，CSS 写在 JS 中的方式也开始在特定的场合中频频出现。

以上，通通出现过我的项目中，在项目切换维护的时候，那感觉，心如刀割。并不是说上面涉及到的知识点有对错的问题，只是在一个团队中，如果没有一些统一的架构和约定，往往到项目的后期会变得越来越不稳定。这不禁又让我想起了 CSS 的学习曲线（像PHP？又来黑了），样式大家都能写，能愉快的维护，又是另一个层次了。

个人觉得 CSS 中有两个比较重要的点， 语义化和 可维护性，而最终都是为了提高开发的效率。

语义化很大一部分程度上是为了阅读需要，简易明了。建议团队内还是要尽量的保持风格一致。其它的，可以看一下 CSS语义思维的内容，这里不展开讲了。

可维护性真的是一个很虚的概念，但是涉及到了多方面的各个点。比如，该怎么保持项目的简单性，灵活性，而同时又有足够的扩展能力？又比如如何抽取模块，是以功能划分还是以样式结构？如何重用样式？如何防止样式被覆盖，避免冗余代码等等。

除了一次性的单页面这种外，一般项目类型的，都建议在开始的时候就搭好底层，统一一下整体风格与使用习惯，保持良好组织结构，命名规范，不然越往后面，可能会遇到更大的问题。

比如，对文件做一个层次划分

• 基础框架（reset，iconfont，栅格）

• 通用模块（原子，统一规范的模块）

• 页面样式（继承通用模块）

采用类似 BEM/SUIT等等的命名方式等等。

现有的技术选择

其实我们在平时应该或多或少的接触过一些 SASS, Compass, BEM, SMACSS, OOCSS的概念与设计模式。当然并没有一种解决方案是绝对的，合适当前的项目就可以了。

BEM

用于解决项目命名规则问题。BEM 通过已 block(块)， element(元素)， modifier(修饰符)的概念，使用连接符串联父级块作为前缀，来实现功能模块命名的唯一性。有兴趣的同学可以看一下 BEM的进化史。发现一句话并不太好表述清楚，想要具体了解的同学可以移步 官网。

BEM这种唯一性以及元素间的平级展开，往往在稍微复杂一点的项目里，就会把名字命名的很长很长。目前也有很多是在 BEM的基础上衍生出来的一些方式(如 SUIT)。

OOCSS （Object Oriented CSS）

面向对象 CSS。是一种已面向对象的维护方式去管理组织 CSS 代码。其哲学理念是模块化，功能单一性，关注点分离。

OOCSS 中有两个重要的原则

• 结构和外观分离。样式尽量独立，和 DOM 无关

• 容器和内容分离。CSS 只关注内容

OOCSS与 SASS结合是一个不错的选择，充分强大。

SMACSS(Scalable and Modular Architecture for CSS)

可扩展和模块化 CSS。把 CSS 样式划分为若干个不同类别的文件，如基础，布局，模块，主题等等。在加上一些特有前缀的组合。

ACSS (Atomic CSS)

原子化 CSS。遵循关注点分离原则。

CSS 模块化

随着 React的迅速引爆，其它关于 CSS 的另一种使用方式也在兴起。将样式在 JS 中定义。借助 require/import而解决了 CSS 中的命名空间的问题，使得单文件变得简单清晰。而通过组合，也可以实现快速的重复利用。甚至有些 CSS 可以单独与组件去绑定。

以及其它的一些方式。上述的方式，是比较让我眼前一亮的感觉。

未来走向

待补充...

扩展阅读