浅谈CSS重构样式表性能

本文是读《CSS重构:样式表性能调优》一书的笔记及个人见解

什么情况下重构

结合代码的上下文重构代码会更加的容易。所以,如果是修复bug,或者开发新的功能时用到了已有的代码,觉得有可变动的空间,能更好的为项目所用,重构是最好的选择。顺带的重构不至于会把项目搞乱,他人也可以从你重构的代码中受益,且不断的重构代码,也能提升你的代码质量。

然而如果碰到一段有很多依赖的代码,也许你就得慎重考虑下是否要对其进行重构。重构有很多依赖的代码,就像抽衣服上的线:抽得越多,散开得越多。对于这类代码,如果时间很紧,先把工作完成也许更合适。然后再匀出些时间,回头审视并重构代码。

高性能样式表

级联和权重

重构样式表,前提得先是你的改动符合优秀框架的特点。要对浏览器的表现形式级联有深刻的理解。

style

id选择器

class类选择器

类型选择器

!important

要扎实的理解上面样式的层叠样式覆盖关系,懂得计算层级特指度(权重)。

本文所说的 特指度(specificity): 特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。

优质的CSS

1、保持选择器的简单;浏览器是从右向左匹配选择器的,所以避免层级过深。

2、分离CSS和JS;由于JS和CSS两者都依赖于HTML元素的类和ID。所以应避免两者的混乱,区别两者的职能。JS中使用的类和ID,不应该在用来为元素添加样式。

3、合理的利用盒子模型;盒子模型有两属性:content-box、border-box,区别于宽度高度的计算方式,合理的选择,适用于当下场景,能让你的开发节奏加快。

测试

测试CSS有难度,因为不同的平台、屏幕尺寸和设备都需要测试。全面测试的对CSS代码的改动进行测试会花费较长的时间,并且需要用到多种不同的工具。

推荐几款测试工具:

BrowserStack(http://www.browserstack.com)

Sauce Labs(http://saucelabs.com)

Browserling(http://www.browserling.com)

litmus(http://litmus.com)

Gemini视觉回归测试(http://github.com/gemini-testing/gemini)。该项目已停止更新了

代码组织和重构策略

顺序组织CSS代码

通用样式,消除不同浏览器之间的不一致性

基础样式,设定网站所有元素的基本样式,margin、padding、line-height等

组件和容器样式,以基础样式为基础进行,可复用的。样式的调整都交由父容器处理。

结构化样式,用来创建网站的布局,内再包含组件和容器样式

功能性样式,最精确的样式,针对特定的效果,比如js使用所添加的 !important 类

浏览器特定样式;可选,针对特定浏览器生效的样式,比如IE7: *diaplay: inline

多个文件还是大文件

用户访问包含CSS文件的网站时,浏览器首先要请求CSS文件,然后将其下载下来,在解析他们并用用恰当的样式。因此,我们需要尽可能的是其需要下载的CSS文件缩小。

在小型项目中用一个CSS文件完全可以接受,操作起来也简单。

在大型项目中拆分为多个文件,这样后期代码维护比较便捷

多个文件下的大型项目,可以使用工具在上线前,或者自动化工具把其页面需要的样式CSS文件,拼接合并为一个CSS文件

策略

1、删除僵尸代码。既然重构就尽可能的把一些存在但没有使用的代码剔除

2、分离CSS和JS。跟上面讲的一样,为元素添加样式的类和ID不应该在JS中用做选择器

3、删除冗余的ID。页面中的ID具有唯一性,且特指度最高,故重构时应降低更精确选择器的特指度。

4、定义可复用的组件。把网站中一些常用的样式接口组件化,精简重复的CSS

5、隔离面相特定的浏览器样式。浏览器之间存在差异,因此我们会在CSS中使用一些 “hack” 针对特定浏览器做调整。

经常策略性针对的衡量重构,以便能够更小更可控的模块发布你的代码改动。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180715G096DG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券