重构

原因

需求变化

架构调整

最佳实践变化

原则

适用

实施

当需要改动的时候再进行优化

CSS样式的优先级：

CSS样式的特指度：（a,b,c,d）

如果用 style 属性应用样式，则 a=1，否则 a=0。

b 为 ID 选择器的数量。

c 为类选择器、属性选择器和伪类的数量。

d 为类型选择器和伪元素的数量。

根据特指度确定样式的优先级

！important为最高优先级

CSS子元素继承父元素的完整列表：  https://www.w3.org/TR/CSS21/propidx.html

CSS伪类

:link 样式应用于具有合法 href 属性的元素。

:visited 样式应用于具有合法 href 属性的超链接元素，并且浏览器的历史记录之中含 有该链接。

:focus 样式应用于获得焦点的超链接元素。当点击、轻触元素，或使用 Tab 键跳转到 当前元素时，元素获得焦点。outline属性有助于键盘访问视角展示

:hover 样式应用于鼠标光标悬浮于超链接之上时。触摸设备，没有光标悬浮状态。因此， 通常当轻触元素时，应用 :hover 样式；轻触其他元素时，移除 :hover 样式。

:active 样式应用于超链接被“激活”时。若使用鼠标，这一时刻发生在点击超链接， 鼠标按键弹起前。在触摸设备上，这一时刻发生在轻触元素，手指移开之前。

用浏览器引擎前缀适配

已有相应前端工具自动优化样式:postcss-autoprefixer/gulp/webpack等

区分CSS和JavaScript

在只用于 JavaScript 的类和 ID 前添加 js-

用类修改元素样式，而不是直接修改具体css值，hide/show等方法除外

类名要有业务意义

避免过于模块化导致元素应用类名过多

可以采用Less等继承模块定义预编译样式

盒子尺寸

content-box：只是内容区域的尺寸

border_box：包括边框在 内的元素的高度和宽度

任何元素都可以设置 box-sizing 属性，因此可以混用这两种盒子，但是为了保持一致性，通常选用其中一种并坚持使用。

为样式分类

按用途定义

通用样式：消除不同浏览器的默认样式差异，很可能没必要使用它们，有许多开源的通用样式支持。

基础样式：为最笼统的使用场景设置属性和属性值，如颜色/字体/行高/段落缩进/内外边距等

编写原则:元素应用基础样式之外的其他样式时，不需要重写大量基础样式就能实现设计目标。

HTML元数据标签不可见，所以不需要应用css样式

区块元素：color/font-family/ font-size/font-weight/letter-spacing/ line-height/padding等

标题和文本元素：font-family/font-size/font-weight/letter-spacing/line-height/margin-bottom/margin-top等

锚点标签元素：background-color/border/color/font-weight/text-decoration/outline等

文本语义元素：color/font-family/font-size/font-weight

列表：font-family/font-size/list-style-type/list-style-image/list-style-position/line-height/margin

组合元素：包括 <div>、<main> 和 <span>，素用于组合 其他标签，因此通常没必要为其定义基础样式，它们的样式根据具体情况用类来定义。

表格：根据具体需求设置。

表单：复杂的设计， 也许需要更多样式。<form> 的子元素 <legend>、<label> 和 <input> 的 font-weight、fontsize 和 font-family 属性通常不同于父元素 <form>，因此应该在子元素上定义这三个属性。

图像：border/max-width/vertical-align，因为 <img> 元素可以用在行内元素之中，vertical-align 属性的默认值为 baseline，这也 许适合或不适合你的设计任务。当 <img> 元素置于设置了大小的块状元素之中时， 将 max-width 属性设置为父容器的 100%，能够防止图像溢出容器。

组件样式：按钮、下拉菜单、模态窗口、对话框、进度条和选项卡，创建可复用组件的过程可以简化如下。

(1) 创建组件之前，定义需要实现的行为。

(2) 保持组件样式的粒度，设置合理的默认值。

(3) 若需要重写组件组的可见样式，用容器元素将它们包起来，为该容器定义一个具有区别 度的类。

(4) 将定义元素尺寸的任务交给结构化容器。

功能样式：

隐藏/展示

浏览器特定样式：

解决兼容性问题

测试

测试要素：

需要测试的重点浏览器

需要测试的操作系统平台

窗口大小/屏幕分辨率

快速测试

验证正确性

第三方测试服务：BrowserStack/Sauce Labs/Browserling/Litmus

视觉回归测试：

gemini/wraith/phantomCSS

代码的维护

编码规范

建设模式库：库将网站所有组件汇集到一起，包括搭建网站的各个模块。

代码的组织

按照样式从最不精确到最精确组织CSS

多个文件还是一个大文件，小型项目用一个 CSS 文件完全可以接受，对于多文件结构CSS，编写自动化任务，将其拼接为一个 CSS 文件，提高开发和页面效率

审查CSS: CSS Dig（ http://cssdig.com ）

所用到的属性列表

使用某一特定属性的声明块列表

使用的颜色数量

使用的最高和最低特指度

拥有最高和最低特指度的选择器

选择器的长度

重构策略

保持规则集结构的一致性

删除僵尸代码：uncss插件

没有使用的代码

重复的声明块和声明语句

分离CSS和JavaScript

分离基础样式

删除冗余的ID：对拥有多个 ID 的选择器进行重构时，首先可以 将最右侧 ID 左边的一切统统删除。

将ID转化为类

区分功能性样式

定义可复用组件

删除行内CSS和过于模块化的类

隔离面向特定浏览器的CSS样式

评估重构是否成功

网站正常运作

降低耦合度/特指底，代码量更少

UI bug数，回归测试模式库

减少开发和测试时间