代码规范

编码规范

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

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

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

代码风格

代码格式化

代码大小写

选择器

• 尽量少用通用选择器 

• 不使用 ID 选择器

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

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

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

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

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

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

只从效率的角度来看，CSS 选择器从高（高效率）到低（低效率）的顺序是：

• ID 选择器， 比如 #header

• 类选择器，比如 .header

• 标签（元素）选择器，比如 div

• 相邻兄弟选择器，比如 h2 + p

• 子选择器，比如 ul > li

• 后代选择器，比如 ul a

• 通配符选择器，比如 

• 属性选择器，比如 [class^="grid-"]

• 伪类（伪元素）选择器，比如 a:hover、a::before

代码缩进

分号

代码易读性

CSS3浏览器私有前缀写法

属性

• 不要使用 !important 重写样式

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

• 适时使用简写属性
常见的简写属性包括：
• font
• background
• padding
• margin
• border
• border-radius
如果只是想设置某一个属性，则不应该使用简写属性

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

属性书写顺序

「定位」和「盒模型」放在最前面，是因为它们决定了元素的布局、位置和尺寸。「定位」排在「盒模型」之前，是由于「定位」属性可以让元素脱离正常文本流，从而使「盒模型」属性失效。

除了「定位」和「盒模型」，其他属性都只在元素内部起作用，不会对前两类属性的结果产生影响，因此放在后面

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

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

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

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

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

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

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

4. 外观：如 background

5. 其他属性

• 更多 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	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ	ㅤ

注释规范

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

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

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

• 注释不能嵌套

单行注释

模块注释

文件信息注释

重置样式

PC端

移动端

媒体查询

常用查询语句

移动端常用私有属性

-webkit-scrollbar

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

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

更多 WebKit CSS 属性

移动端常用私有属性

目前两大主流移动平台为 iOS 和 Android，有不少带 -webkit- 前辍的 CSS 私有属性以及一些 iOS only 属性，当中好些属性在日常需求中经常应用到。 WebKit CSS 属性中的一部分已经被包含在 CSS 规范草案中，并且可能成为最后的推荐标准，但目前仍然是试验性的属性，还有一些属性是不规范的属性，它们没有出现在跟踪规范中。 -webkit-scrollbar-webk

https://guide.aotu.io/docs/css/webkit.html

1. 概述 | Aotu.io - 前端代码规范

2. f2e-spec/2.css-style-guide.md at main · alibaba/f2e-spec (github.com)