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

imingyu 发布于2019-08-29 15:05 / 3278人阅读

摘要：特指度度量的是选择器识别元素的精确性。为中的各个变量赋予相应的数值，就能得到特指度。为类选择器属性选择器和伪类的数量。该文件包含选项卡组的样式。易于混淆的属性，应用注释予以说明。属性按照字母顺序排列。属性值为时，省略单位。

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）对特殊的样式，可采用条件注释的方法

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

GPU云服务器云服务器 css样式表读书笔记编程思想读书笔记大数据时代读书笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113087.html

Java学习路线总结，搬砖工逆袭Java架构师（全网最强）

摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡【打卡贴 day2...

Scorpion 2021-11-18 10:02 评论0 收藏0
《JavaScript Web富应用开发》读书笔记

摘要：创建类中并没有真正的类，但中有构造函数和运算符。任何函数都可以用作构造函数，构造函数必须使用运算符作为前缀来创建新的实例。调用构造函数时不要丢掉关键字。这里使用基于原型的继承，而没有用到构造函数和关键字。 1.创建类 JavaScript中并没有真正的类，但JavaScript中有构造函数和new运算符。构造函数用来给实例对象初始化属性和值。任何JavaScript函数都可以用作构造函...

琛ｈ。 2019-08-19 18:46 评论0 收藏0
《CSS设计指南》读书笔记

摘要：用户代理浏览器给视障用户朗读网页的屏幕阅读器，以及搜索引擎放出的爬虫都是用户代理，它们需要显示朗读和分析网页。小知识属性中的文本会在图片因故未能加载时显示，或者由屏幕阅读器朗读出来。前言代码网址：http://www.stylinwithcss.com/ 第一章 HTML标记与文档结构 1.html的含义 HTML 标记内容的目的是为了赋予网页语义（semantic）。就是要给你的...

sydMobile 2019-08-30 15:55 评论0 收藏0
读书笔记《重构改善既有代码的设计》

摘要：重构在不改变代码的外在的行为的前提下对代码进行修改最大限度的减少错误的几率本质上，就是代码写好之后修改它的设计。重构可以深入理解代码并且帮助找到。同时重构可以减少引入的机率，方便日后扩展。平行继承目的在于消除类之间的重复代码。重构 (refactoring) 在不改变代码的外在的行为的前提下对代码进行修改最大限度的减少错误的几率本质上，就是代码写好之后修改它的设计。 1，书中...

mdluo 2019-08-15 12:24 评论0 收藏0