前端代码规范 —— CSS

type

status

date

slug

summary

代码规范

编码规范

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”

字符 @charset “”; 都用小写字母，不能出现转义符，编码名允许大小混写

考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM

代码风格

代码格式化

统一使用展开格式书写样式

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写

选择器

尽量少用通用选择器

不使用 ID 选择器

属性选择器的值始终用双引号包裹

不使用无具体语义定义的标签选择器

>、+、~、||等组合器前后各保留一个空格

使用 CSS 选择器时，应注意以下性能问题

使用 class 而不是原生元素标签

减少在经常出现的组件中使用个别属性选择器（如 [class^="..."]）

控制选择器的长度，每个组合选择器内的条目尽量不超过 3 个

只从效率的角度来看，CSS 选择器从高（高效率）到低（低效率）的顺序是：
ID 选择器，比如 #header
类选择器，比如 .header
标签（元素）选择器，比如 div
相邻兄弟选择器，比如 h2 + p
子选择器，比如 ul > li
后代选择器，比如 ul a
通配符选择器，比如
属性选择器，比如 [class^="grid-"]
伪类（伪元素）选择器，比如 a:hover、a::before

代码缩进

使用 2 个空格缩进，不要使用 4 个空格或 tab 缩进

分号

每个属性声明末尾都要加分号；

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

逗号分隔的取值，逗号之后一个空格

为单个css选择器或新申明开启新行

颜色值 rgb() rgba() hsl() hsla() rect()中不需有空格，且取值不要带有不必要的 0

属性值十六进制数值能用简写的尽量用简写

不要为 0指明单位

CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

属性

不要使用 !important 重写样式

十六进制值统一使用小写字母（小写字母更容易分辨）

适时使用简写属性

常见的简写属性包括：

font
background
padding
margin
border
border-radius

如果只是想设置某一个属性，则不应该使用简写属性

css属性值需要用到引号时，统一使用单引号

属性书写顺序

「定位」和「盒模型」放在最前面，是因为它们决定了元素的布局、位置和尺寸。「定位」排在「盒模型」之前，是由于「定位」属性可以让元素脱离正常文本流，从而使「盒模型」属性失效。
除了「定位」和「盒模型」，其他属性都只在元素内部起作用，不会对前两类属性的结果产生影响，因此放在后面

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow

自身属性：width / height / margin / padding / border / background

文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

相关联的属性声明最好写成一组，并按如下顺序排序：

定位：如 position、 left、 right、 top、 bottom、 z-index

盒模型：如 display、 float、 width、 height、 margin、 padding、 border

文字排版：如 font、 color、 line-height、 text-align

外观：如 background

其他属性

更多 CSS 属性顺序参考如下列表：

第一组	第二组	第三组	第四组	第五组	第六组	第七组
content	box-sizing	background*	font*	opacity	unicode-bidi	transition*
position	*width	color	src	visibility	direction	transform*
top	*height	box-decoration-break	line-height	filter	columns	animation*
right	margin*	box-shadow	letter-spacing	resize	column-*	ㅤ
bottom	padding*	outline*	quotes	cursor	break-*	ㅤ
left	border*	table-layout	counter-*	pointer-events	page-break-*	ㅤ
z-index	ㅤ	caption-side	-ms-writing-mode	user-select	orphans	ㅤ
display	ㅤ	empty-cells	text-*	ㅤ	widows	ㅤ
vertical-align	ㅤ	list-style*	white-space	ㅤ	*zoom	ㅤ
flex*	ㅤ	ㅤ	word-*	ㅤ	orientation	ㅤ
grid*	ㅤ	ㅤ	overflow-wrap	ㅤ	fill	ㅤ
*gap	ㅤ	ㅤ	tab-size	ㅤ	stroke	ㅤ
align-*	ㅤ	ㅤ	hyphens	ㅤ	ㅤ	ㅤ
justify-*	ㅤ	ㅤ	interpolation-mode	ㅤ	ㅤ	ㅤ
order	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ
float	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ
clear	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ
object-fit	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ
overflow*	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ
clip	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ

注释规范

注释内容和注释符之间留有一个空格

注释行上方需留有一行空行，除非上一行是注释或块的顶部

注释以字符 /* 开始，以字符 */ 结束

注释不能嵌套

单行注释

注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行

模块注释

注释内容第一个字符和最后一个字符都是一个空格字符，/*与模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行

文件信息注释

在样式文件编码声明 @charset语句下面注明页面名称、作者、创建日期等信息

重置样式

PC端

移动端

媒体查询

常用查询语句

判断设备横竖屏

判断设备宽高

判断设备像素比

移动端常用私有属性

-webkit-scrollbar

webkit-scrollbar 是-webkit-私有的伪元素，用于对拥有overflow属性的区域 自定义滚动条的样式

譬如，为了隐藏滚动条，你可以这么做：

滚动条各块组成表现渲染的伪元素

滚动条的主要组成部分包括：

滚动按钮 — 滚动按钮的夹角则被称为滚动角(corner)。

轨道 — 轨道(track)可以进一步分为轨枕(track pieces) 和滑块(thumb)。

需要注意的是：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。