CSS哲学伪命题

标题党。这篇文章断断续续的修改过好几回，也没有满意，原本是想总结一下我这些零散的 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 能够单独与组件去绑定。

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

将来走向

待补充...

扩展阅读

• CSS模块(中文翻译版)

• CSS 规范和最佳实践

• BEM 进化史

• 如何理解 CSS 类名语义化

• CSS 分层