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

一、什么是优秀的架构

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

二、级联

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

三、编写优质的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]–->

四、测试

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

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

按照样式从最不精确到最精确组织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