重构
原因
需求变化
架构调整
最佳实践变化
原则
适用
实施
当需要改动的时候再进行优化
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数,回归测试模式库
减少开发和测试时间