【WEB前端开发最佳实践系列】CSS篇

时间:2023-11-18 13:03:32

一、有效组织CSS代码

规划组织CSS代码:组织CSS代码文件,所有的CSS都可以分为2类,通用类和业务类。代码的组织应该把通用类和业务类的代码放在不同的目录中。

模块内部的另一样式规则:样式声明的顺序是按照模块中元素的层级关系来处理,从父级元素开始,如果是同一级元素则按照元素在页面的位置从上到下。从坐到右地定义对应的样式。如果多个公用,则先声明公用的样式,然后声明个体样式。

CSS排序实践:

  • 对CSS样式排序
  • 推荐按样式属性功能分组排序
  • 推荐在CSS样式代码编写完成并准备嵌入的时候排序
  • 使用如CSScomb等工具排序

二、合理利用权重:提高代码的重用性

CSS的6中基础选择器:

  • ID选择器
  • 类选择器
  • 属性选择器
  • 伪类和伪对象选择器
  • 标签类型选择器
  • 通配符选择器

组合选择器:

  • 后代选择器(.reader .title{})
  • 子选择器(.reader>.title{})
  • 相邻选择器(.reader+.title{})

CSS权重规则:

  • 计算选择符中的ID选择器的数量(=a)
  • 计算选择符中的类选择器、属性选择器以及伪类选择启动额数量(=b)
  • 计算标签类型选择器和伪对象选择启动额数量(=c)
  • 忽略全局选择器

基础选择器的优先级:

ID>类|伪类|属性选择>标签选择|伪对象>通配符

操作原则:

  • CSS样式中尽量不使用ID选择器
  • 减少子选择器的层级
  • 使用组合的CSS类选择器

浏览器兼容:http://browserhacks.com/#ie

相对单位:

W3C官方文档注意把尺寸单位分为相对长度单位和绝对长度单位两种。相对长度单位在定义长度时是相对于其他长度的,它又分为字体相对单位和视窗相对单位,字体相对单位包括:em  ex   ch  rem视窗相对单位包括:vw  vh  vmin  vmax。绝对长度单位定义的长度是固定的,使用的是物理度量单位,包括:cm  mm in px pt  pc 。使用最广泛的就是em  px和百分比值。

  1. px:像素,相当于绝对尺寸
  2. em:相当于元素上计算的字体大小值
  3. 百分比:相对于父元素的设置

尺寸设置最佳实践:

尽量设置相对尺寸:如果希望尺寸随着字体的改变而改变则应该使用em,如果期望尺寸随着父元素尺寸的改变而改变则应该使用百分比。设置行高一般使用em,设置高度和宽度一般使用百分比。

只有在预知元素尺寸的情况下才使用绝对尺寸:

使用em设置字体大小

三、CSS优化

减少CSS的代码量

合并相关CSS的规则

定义简洁的属性值

删除无效的定义

兼容在线监测:caniuse.com   、 CSS3 Click ChartCSS  contents  and browser compatibility。CSS3 Clicj  Chart提供完整的浏览器兼容代码示例.

添加必要的前缀:Chrome和Safari浏览器使用-webket,Firefox浏览器使用-moz,IE使用-ms,Opera浏览器使用-o.

使用工具来生成CSS属性定义的浏览器前缀:Prefixr。如果希望开发过程中有更多的自主性可以使用Autoprefixer

除上述之外还可以使用:cssFx  、  CSS Agent-prefis-free。以及LESS预处理

有效使用HTML5的建议网站:html5please