CSS视觉格式化模型（英文称之Visual Formatting Model），是CSS 2.2规范中的第九部分。该模型主要是用来处理和在视觉媒体上显示文档时使用的计算规则。仅从这一句来来描述，估计很多同学都会感到困惑，视觉格式化模型到底是什么鬼？大家先不用急着知道视觉格式化模型是什么，只需要知道它是CSS中很重要的一部分，如果理解了该部分所涉及到的知识点，将有助于你更好的理解和学习CSS，特别是布局。

前两天在Codepen看到了@Kyle Wetton写的一个示例，使用CSS混合模式和SVG来改变沙发的颜色。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用，比如说一些美妆的应用中，就有类似的场景。不知道大家是否想深入的了解如何实现这样的效果？如果是，那么请继续往下阅读。

在这一章节中我和大家将一起来探讨CSS中的另一个知识重点，即CSS的定位（position）和层叠控制（z-index）。这两个属性都隶属于CSS Positioned Layout Module Level 3模块。当人们在接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来易于掌握。使用定位来布局，表面上你确切的指定了一个元素所处的位置，它坐落在那里。可事实上，定位要比你看到要稍微复杂一点。对于很多CSS的新手，CSS定位和层叠控制还是有些东西会被绊倒，所以在它们成为你惯用技巧前你需要先掌握它们。

这几天一直在折腾CSS自定义属性，在《图解CSS：CSS自定义属性》和《CSS 自定义属性在Web组件中的应用》都在聊CSS自定义属性。但这个CSS自定义属性和今天要聊和CSS的自定义属性还是有所不同的。他们隶属于两个不同的规范，前者是CSS Custom Properties for Cascading Variables Module Level 1，后者是CSS Properties and Values API Level 1。虽然都是W3C规范中的内容，但还是有较大差异的。而今天要和大家聊的是后者，即CSS Houdini中的CSS自定义属性。

众所周之，CSS的维护一直是件不易的事情，特别是在构建大型Web站点或Web应用程序时，如果是多人协作的话难度更大。另外，由于CSS语言是一种声明式语言，而且不像其他语言有变量、条件和逻辑等特性，一直生存在程序语言鄙视链的最底层。也因为这个原因，社区中有了各种CSS处理器语言，比如Sass、LESS和Stylus等。这些处理器语言引入了一些类似其他程序语言的特性，比如变量、运算符和逻辑运算等。虽然CSS处理器给编写和维护CSS带来了一些便利，但还是需要额外的编译。不过处理器中的变量着实为我们带来很大的优势，也正因为如此，社区开始将CSS处理器中的变量引入到原生CSS中，经过多年的推进和演变才有了今天的CSS自定义属性。

今天我们不聊什么是CSS自定义属性，而把重点放在CSS自定义属性在组件中怎么使用，她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中，我们主要会探讨CSS自定义属性为Web组件服务，以及怎么利用CSS自定义属性来维护组件。

在任何环境之下其实没有最佳，最有最适合，那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式，在社区中讨论最多的应该是CSS In JS 和 CSS Modules。前段时间在《React中CSS Modules的使用》一文中探讨了在React中怎么使用CSS Modules来管理组件和项目的CSS。事实上，使用CSS Modules还是存有一定的缺陷。这篇文章将会和大家一起聊聊React中编写CSS的姿势，然后再会花一些篇幅来讨论CSS Modules编写CSS的最佳姿势。

CSS的::marker是一个伪元素，最早接触时间应该是在四年前。四年前在《试探列表中的::marker》一文中就提到过CSS的::marker伪元素，只不过在当时，该伪元素只是大家探索性的在聊该属性，而时至今日却不同，Firefox 68已经追随Safari11.1对该伪元素支持了。也就是说，该伪元素离我们越来越近了，以后我们可以使用::marker帮我们做更多的处理。简而言之，使用::marker伪元素，可以对列表做一些有趣的事情，在本文中，我们将深入的聊聊该伪元素。

最近项目开始换React的工程，感觉好多东西都得重新开始，特别在撸CSS的时候。说实话和Vue的工程相比，体感差完了。在Vue的工程中除了Modules之外还可以使用CSS的作用域scoped的概念。用久了Vue的同学，在这方面的感觉爽死了，但是突然切到React的工程体系之下，这方面的感觉突然不要不要。拿个实例来说吧（可能我做得不到位），组件的CSS是全局的，有时覆盖起来，除了蛋疼之外，而费时，费成本。

在9102年终于有了一份属于CSS状态的报告。对，这是CSS发展20多年以来第一份属于自己的状态报告。大家的印象中可能只有JavaScript相关的状态报告，对于CSS的状态报告并无了解（那是以前没有）。正如报告开篇所说，在Web开发家族中，JavaScript更似一位愤怒、叛逆的少年，每年都会经历一个新阶段。而CSS却一直以来更似一位勤奋好学，举止得体的少年，他总是保持礼貌，从不草率的做出任何决定。不过有迹象表明，CSS可能正经历着与JavaScript刚刚经历的同样动荡的青少年时期。Flexbox，Grid，CSS-in-JS在9102年都来了。可以说，CSS终于把头发染成粉红色，并像它一直想要的纹身了。在这份有史以来第一份关于CSS状态调查中，调查了一万多名开发人员。在这份详尽的报告中我们可以看到哪些CSS特性使用得最多，哪些工具正在被采用等等。