一篇关于工作中对CSS的浅显思考

        CSS是前端开发工程师必不可少的一项专业技能，它一开始给我的感觉是简单的，没有上手难度的，但往往在日常的工作中又总会给我带来巨大困扰。

        CSS在我看来，要写它简单，要写好却难如登天，尤其是当项目中对UI的还原度非常之高时，你可能会发现你任何一处细微的修改都不是那么容易完成，而且时常会出现你的目标位置更改影响了其他位置的样式混乱等问题。

        有仔细想过以上问题出现的原因，大概可以分为以下几点：

        1、页面的排版布局本身就是不够合理的；

        2、对于CSS样式属性的继承不够了解；

        3、组件引用时对于CSS样式没有过多的关注（如：vue中使用/deep/进行样式穿透），导致某些子组件间样式相互影响，或父组件影响子组件等；

        CSS兼容性问题需要我们格外注意，任何技术在迭代的过程中都会不可避免的对一些老旧“玩意儿”不太友好，尤其大家都头疼的IE系列。各公司对于浏览器兼容性的要求都会有所差别，如果你的公司、你的项目要求兼容IE8、IE9，那么恭喜你，你在CSS兼容性方面又近了一步，因为你需要使用更多的时间去了解兼容性的处理，并通晓各CSS样式是否存在兼容性。同时也恭喜你，你在页面布局能力上也会得到不错的提升，比如你可能需要使用定位来替代display:flex布局方案。

        值得注意的一点（至少我是这么认为）：当你在修改样式时，一旦发现页面布局的不合理性，那一定不要吝啬对页面布局的重构，因为某些不合理的布局会导致你对细节进行调整时难度的指数递增。它不同于js代码的重构，你并不需要思考页面处理逻辑是否会受到影响，所以我想你应该更容易接受对它的重构。

        关于页面渲染速度、性能：在浏览器的渲染过程中，会先解析html构建dom树，并将css解析为css树，之后将dom树与css树合并为render树，从而依据各个节点的css定义及从属关系计算出每个节点在屏幕中的具体位置，随后通过显卡将内容“画”在页面上，而在这个过程中，css是按照书写顺序进行解析的，并且一旦发现某个元素的定位发生了变化又需要重新进行计算、渲染。因此浏览器对页面的渲染过程会频繁的触发重排、重绘。需要明确的一点是回流一定会发生重绘，而重绘不一定会发生回流。所有我们应该尽可能的减少回流的次数，而是否产生回流则是受元素位置及大小影响的。因此我们在书写css样式时，需要按照合理的顺序进行：定位属性——自身属性——文字样式——文本属性——css3中的新增属性，从而提升浏览器的渲染性能。

---------------------------------------------------------------------------------------------------------------------------------

慢慢完善吧~