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

2020-06-03 21:08:42 阅读：217 来源： 互联网

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

标签：styles,读书笔记,样式,元素,伪类,调优,样式表,选择器,css
来源： https://www.cnblogs.com/baimeishaoxia/p/13040021.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。