css代码规范

css规范

• 编码设置：UTF-8编码
• 缩进：使用2个空格为一个缩进层级
• 数值与单位：当属性值或颜色参数为 0 - 1之间的数时，省略小数点前的 0 ，当长度值为 0 时省略单位，十六进制的颜色属性值使用小写和尽量简写。
• 没有边框时，不要写成border:0，应该写成border:none
• 除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置;
• 层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加。
• 选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。

/* 侧边栏样式 */
.sidebar {
    width: 1rem;
    float: left;
    border: none;
    height: .5rem;
}

.sidebar li, 
.menu-title {
    padding: 0 .2rem;
    font-size: .32rem;
    color: #1cc7b9;
    background: #fff;
}
复制代码

css命名规范：

• 一律采用小写加中划线的方式，不允许使用大写字母或 _;
• 规则命名避免使用中文拼音,不允许通过1、2、3等序号进行命名,不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。
• 尽量不缩写，除非一看就明白的单词。
• id应该按需使用，而不能滥用,id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
• 避免class与id重名
• 尽可能提高代码模块的复用，样式尽量用组合的方式

常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、block、window(win)、tips等，如果遇到不常用的，可以借助翻译工具进行翻译取其英文命名。

css书写顺序

• 1.content 属性（如果有的话，应放在最前面）

• 2.位置布局：(position / top / right / bottom / left / z-index / display / float / ...)

• 3.盒模型：(width / height / padding / margin / border / overflow / ...)

• 4.文本排版：(font / line-height / text-align / word-wrap / ...)

• 5.视觉外观属性：(color / background / list-style / transform / animation / transition / ...)

• 如果使用CSS3的属性，并有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。

• 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active

空格空行使用规范：

• 在规则声明块的左大括号 { 前加一个空格。
• +、>、~ 等选择器的两边各保留一个空格
• 在样式属性的冒号 : 后面加上一个空格，前面不加空格。
• 规则声明块的右大括号 } 独占一行。
• 每个规则声明间用空行分隔。
• 所有最外层引号使用双引号 " 。
• 多个selector共用一个样式集，则多个selector必须写成多行形式 ；

代码注释

代码注释，写在需要注释部分的前面

单行注释

星号与内容之间必须保留一个空格。

/* 单行注释：星号与内容之间必须保留一个空格 */
复制代码

多行注释

星号要一列对齐，星号与内容之间必须保留一个空格。

/**
 * 多行注释：星号要一列对齐，星号与内容之间必须保留一个空格。
 */
复制代码

规则声明块内注释

使用 // 注释，// 后面加上一个空格，注释独立一行,写在需要注释部分的前面

.foo{
	border: 0;
	// 注释独立一行: 背景色设置
	background-color: #fff;
}
复制代码