css编码规范(一)

最新推荐文章于 2021-08-04 06:57:20 发布

somnus_ly

最新推荐文章于 2021-08-04 06:57:20 发布

阅读量541

点赞数

分类专栏： css小结

本文链接：https://blog.csdn.net/somous_ly/article/details/38496401

版权

css小结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

注释规范

1. 文件顶部注释（推荐使用）

*@descripition:

*@author:

*@update:

2. 模块注释（推荐使用）

/*module: module1 by ...*/

/*module: module2 by... */

模块注释必须单独写在一行

3. 简单注释

单行注释：/* this is a short comment*/

单行注释可以单独写在一行，也可以写在行尾

多行注释：

*this is a comment line 1.

*this is a comment line2 .

多行注释必须写在单独行内

4. 特殊注释（推荐使用）

用于标注修改、待办等信息

/* TODO: xxxx by ... 2012-10-18*/

/* BUGFIX: xxxx by ... 2012-10-18*/

排版规范

1. 一个tab设置为四个空格宽度。

2. 规则可以单行，或者多行，但是整个文件内的规则排版必须统一。如果是在html中写内联的css，则必须写成单行。

3. 单行形式书写风格的排版约束

3.1 每一条规则的大括号{前后加空格

3.2 多个selector共用一个样式集，则多个selector必须写成多行形式

3.3 每一条规则结束的大括号}前加空格

3.4 属性冒号之前不加空格，冒号之后加空格

3.5 每一个属性名后必须添加分号，并且分号后空格

例如：

div.test{ width:100px; height:200px; }

a:focus,

a:hover{ position:relative; right:1px; }

4. 多行形式书写风格的排版约束

4.1 每一条规则的大括号{前添加空格

4.2 多个selector共用一个样式集，则多个selector必须写成多行形式

4.3 每一条规则结束的大括号}必须与规则选择器的第一个字符对齐

4.4 属性名冒号之前不加空格，冒号之后加空格

4.5 属性值之后添加分号

5. 其他规范

5.1 使用单引号，不允许使用双引号

5.2 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照-WebKit- / -moz- / -ms- / -o- 的顺序添加，标准属性写在最后，并且名称要对齐，例如：

div.animation-demo{

-webkit-animation:mymove 5s infinite;

-moz-animation:mymove 5s infinite;

-o-animation:mymove 5s infinite;

animation:mymove 5s infinite;

}

规则书写规范

除16进制颜色和字体设置外， CSS文件中的所有的代码都应该小写。

命名

1. 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_

2. 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

3. 命名注意缩写，但是不能盲目缩写，具体请参见常见的css命名规则

4. 不允许通过1、2、3等序号进行命名

5. 避免class与id重名

6. id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id

7. class用于标识某一个类型的对象，命名必须言简意赅

8. 尽可能提高代码模块的复用，样式尽量用组合的方式

9. 规则名称中不应该包含颜色（red / blue）定位（left / right）等于具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名

.red{ color: red; } (错误)

.important-news{ color:red; } (正确)

10. 禁止直接为HTML tag添加css样式设置

11. 每一条规则应该确保选择器唯一，禁止直接为全局.nav、.header、.body等类设置属性