CSS的未来已来

了解更多添加：308139472

前言

最近听说TypeScript3.7添加了对Optional Chaining的支持，然后就想着给鱼头的脚手架ying-template的TS版本升级，然后在命令行发现这样的一句信息：

'postcss-cssnext' 已经被 'postcss-preset-env'代替了。详情请查看 moox.io/blog/deprec…

其实鱼头的脚手架里早就把postcss-cssnext换成了postcss-preset-env，不过一直没删，但是看到这句话之后，处于好奇，就去翻了翻PostCSS的官网，然后又思考了下这些年CSS的发展历程，遂有这篇文章的出炉。

浅谈现代化的CSS

从1997年CSS1.0发布到如今，从最开始只支持简单的文字排版到如今已经可以做出酷炫的3D动画，CSS已经走过了22个年头，其发展如图所示：

[图片来自MDN]

随着互联网的发展，人们对网页的要求已经是从只要展示图文就好变成了各种交互跟视觉效果都需要有着更多的体验要求。CSS为此也是不断的更新着。

随着web业务日益复杂化和多元化，前端开发也从单纯的web page转变成web app，在此也诞生了“前端工程化”的概念，一个完备的web app往往会很大很复杂，甚至会有很多人共同维护，以往的拼页面，写jQuery已经是不足以支撑现代的需求。同样的，CSS也是如此，不再是内联写几个margin，padding或者HTML一股脑引入几个CSS就足够的，而且由于人员配置的增多，不同的开发，命名习惯，样式是否会冲突也是必须要考虑的。

除了工程问题，还有就是CSS与浏览器之间的关系也是我们不得不考虑的，虽然CSS发展的很快，但是浏览器对CSS新特性支持的进度确实非常缓慢的。所以虽然某些属性已经推出了很多年，但是也往往因为浏览器的原因而无法进行大规模的使用。

虽然在实际开发过程中，CSS有着这样那样让人无法忽略的问题，但是“方法总比困难多”，在前端界也有许多热心的大牛们在尝试着解决这些问题。这次让鱼头与大家一起分享下这些与CSS相关的技巧与方法。

最初的CSS模块化 —— CSS命名规则

命名一直是开发者比较头疼的问题，在前端里，除了JS各种变量的命名，还有元素class的命名，虽然我们可以随意起名，愿意的话甚至可以使用.a .b .c等无意义的规则来命名，但是如果是一个长期的，大型的或多人协作的项目里这么命名，恐怕容易被人胖揍。这次我们来分享下业界常用的用来防挨揍的命名规则。

OOCSS(Object-Oriented CSS)

OOCSS有两个编写原则：

结构与样式分离

容器与内容分离

我们来看看官网的一个例子：

grab

Body