前端 CSS 规范

[mason369]

前端 CSS 规范

分号

每个属性声明后面都要加分号。

命名

1. 不使用 id 选择器
2. 适用有意义的名词命名
3. 单词全部小写，名词超过 1 个时，使用-分隔符

属性声明顺序

原则：整体到局部，外部到内部，重要属性优先

.element {
	display: block;
	float: left;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	margin: 0 100px;
	padding: 50px; // padding习惯写到margin后面
	width: 100px;
	height: 100px;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	font: normal 13px "Helvetica Neue", sans-serif;
	color: #333;
	text-align: center;
	line-height: 1.5;
	background-color: #f5f5f5;
	opacity: 1;
}

其他规范

使用 prettier 格式化工具约束，推荐配置如下：

• 格式自动化
• 4 个缩进
• 全部单引号
• 属性:后有空格
• 颜色全部小写
• 小数点前面 0 自动添加

module.exports = {
    printWidth: 100, // 设置prettier单行输出（不折行）的（最大）长度

    tabWidth: 4, // 设置工具每一个水平缩进的空格数

    useTabs: false, // 使用tab（制表位）缩进而非空格

    semi: false, // 在语句末尾添加分号

    singleQuote: true, // 使用单引号而非双引号

    trailingComma: 'none', // 在任何可能的多行中输入尾逗号

    bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格

    arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号，参数个数为1时可以省略圆括号

    // parser: 'babylon', // 指定使用哪一种解析器

    jsxBracketSameLine: true, // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）

    rangeStart: 0, // 只格式化某个文件的一部分

    rangeEnd: Infinity, // 只格式化某个文件的一部分

    filepath: 'none', // 指定文件的输入路径，这将被用于解析器参照

    requirePragma: false, // (v1.7.0+) Prettier可以严格按照按照文件顶部的一些特殊的注释格式化代码，这些注释称为“require pragma”(必须杂注)

    insertPragma: false, //  (v1.8.0+) Prettier可以在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了。

    proseWrap: 'preserve' // (v1.8.2+)
}

参考连接

百度 CSS 规范指南(opens new window)

腾讯 CSS 规范指南(opens new window)

Google CSS 规范指南