CSS重构:样式表性能调优读书笔记

重构

原因

需求变化

架构调整

最佳实践变化

原则

适用

实施

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

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数,回归测试模式库

减少开发和测试时间



打赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据