《CSS重构：样式表性能调优》读书笔记

2024-02-22 12:32:10

1、什么是优秀的架构

（1）优秀的架构是可预测的
（2）优秀的架构是可扩展的
（3）优秀的架构可提升代码复用性
（4）优秀的架构可扩展
（5）优秀的架构可维护
什么时候可以重构：仅当重构能够改善架构或使代码符合编码规范时，才应进行重构。

2、级联

级联是浏览器决定为元素应用哪种样式的一种方法。
特指度度量的是 CSS 选择器识别元素的精确性。计算特指度时需要分析这些选择器（除了通用选择器 *）。为 (a, b, c, d) 中的各个变量赋予相应的数值，就能得到特指度。
(1) 如果用 style 属性应用样式，则 a=1，否则 a=0。
(2) b 为 ID 选择器的数量。
(3) c 为类选择器、属性选择器和伪类的数量。
(4) d 为类型选择器和伪元素的数量。

3、编写优质的css

（1）添加注释

A. 应该在每个文件的开头添加注释，说明文件的内容。

/**
 * 该文件包含选项卡组的样式。
 * 选项卡组应仅包含拥有tab类的元素。
 */
B. 易于混淆的属性，应用注释予以说明。

.tab-group-flush {
    display: block;
    margin-left: -12px; /* 清除父容器的padding值 */
    margin-right: -12px; /* 清除父容器的padding值 */
}

（2）换行结构一致
多个属性时，每个属性占一行。每条声明缩进4个空格。
（3）保持选择器的简单：如有多层的嵌套选择，还不如直接加一个类
（4）高性能的选择器：

web浏览器是从右向左匹配元素。
关键选择器(选择器最右边的部分叫关键选择器)。
选择器只适用小写字母。
用连接符连接单词。
属性按照字母顺序排列。
属性值为0时，省略单位。

（5）分离css和javascript：在只适用于js的类或者ID前加js-；在js中用类修改元素属性；
（6）类名要有意义
（7）对特殊的样式，可采用条件注释的方法

<!–-[if IE 7]>
  <link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

4、测试

测试多个浏览器。
Gemini（https://github.com/gemini-tes...）项目是 Yandex 团队（https://www.yandex.com）开发的视觉回归测试工具。使用该工具，你可以编写脚本，自动截取网站在主流浏览器中的截图，然后将其与基准图像比较，不同之处将以高亮形式标记出来。

5、代码的组织和重构策略

按照样式从最不精确到最精确组织CSS
(1) 通用样式
(2) 基础样式
(3) 组件及其容器的样式
(4) 结构化样式
(5) 功能性样式
(6) 浏览器特定样式（如果一定需要）
如单一css文件进行开发

/**
 * 通用样式
 * ---------------------------------------------
 */

/**
 * 基础样式
 * ---------------------------------------------
 */

 /* 基础样式：表单 */
 /* 基础样式：标题 */
 /* 基础样式：图像 */
 /* 基础样式：列表 */
 /* 基础样式：表格 */
 /* 等等 */

 /**
 * 组件样式
 * ---------------------------------------------
 */

/* 组件样式：消息框 */
/* 组件样式：按钮 */
/* 组件样式：轮播框 */
/* 组件样式：下拉框 */
/* 组件样式：模态框 */
/* 等等 */

/**
 * 结构化样式
 * ---------------------------------------------
 */

/* 结构化样式：结算区域的布局 */1
/* 结构化样式：侧边栏的布局 */
/* 结构化样式：主区域的布局 */
/* 结构化样式：个人设置区域的布局 */
/* 等等 */

/**
 * 功能样式
 * ---------------------------------------------
 */

如多个css文件进行开发

|-css/
| |-normalizing-styles
| |    |- normalize.css
| |
| |-base-styles
| |    |- forms.css
| |    |- headings.css
| |    |- images.css
| |    |- lists.css
| |    |- tables.css
| |    |- etc.
| |
| |-component-styles
| |    |- alerts.css
| |    |- buttons.css
| |    |- carousel.css
| |    |- dropdowns.css
| |    |- modals.css
| |    |- etc.
| |
| |- structural-styles
| |    |- layout-checkout.css
| |    |- layout-sidebar.css
| |    |- layout-primary.css
| |    |- layout-settings.css
| |    |- etc.
| |
| |- utility-styles
| |    |- utility.css
| |
| |- browser-specific-styles
| |    |-ie8.css

适用CSS Dig，它是 Google Chrome 浏览器的一款免费插件。可以分析css的源文件和无法分析的文件。

补充说明：

伪类和伪元素的区别：
（1）伪类的效果可以通过添加实际的类来实现

em:first-child {
    color: red;
}

伪元素的效果可以通过添加实际的元素来实现

p::first-letter {
    color: red;
}

（2）css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
（3）伪类就像真正的类一样，可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
（4）伪类有：:first-child ，:linkvistited，:hover，:active，:focus，:lang 等
伪元素有：:first-line，:first-letter，:before，:after

码农公寓