css writing specifications_html/css_WEB-ITnose

1. Comment specifications

1. Comments at the top of the file (recommended)

Css code

1. /*
2. * @description: Chinese description
3. * @ author: name
4. * @update: name (2013-04-13 18:32)
5. */

2. Module comments

Module comments must be written on a separate line

Css code

1. /* module: module1 by Zhang San */
2. …
3. /* module: module2 by Zhang San */

3. Single-line comments and multi-line comments

Single-line comments can be written on a single line or at the end of the line. The length of each line in the comment No more than 40 Chinese characters, or 80 English characters.

Css code

1. /* this is a short comment */

Multi-line comments must be written in separate lines

Css code

1. /*
2. * this is comment line 1.
3. * this is comment line 2.
4. */

4. Special comments

Used to mark modifications, to-do and other information

Css code

1. /* TODO: xxxx by name 2013-04-13 18:32 */
2. /* BUGFIX: xxxx by name 2012 -04-13 18:32 */

5. Block comments

Comment on a code block Optionally, block the style statement and comment it on a new line.

Css code

1. /* Header */
2. / * Footer */
3. /* Gallery */

2. Coding specifications

1. Replace the tab key with (required) four spaces

2. Add ";" (required) 🎜>

3. Capital letters are (not allowed) to appear in the Class name, and "-" is (must) be used to separate the letters in the class, such as:

 /* 正确的写法 */ .hotel-title {     font-weight: bold; } /* 不推荐的写法 */ .hotelTitle {     font-weight: bold; }

4. Use of spaces, The following rules (must be) implemented:

 .hotel-content {     font-weight: bold; }

5. Line breaks (must) between multiple selector rules

 /* 推荐的写法 */ a.btn, input.btn, input[type="button"] {     ...... }

6. (Prohibited) Writing the style as a single line, such as

.hotel-content {margin: 10px; background-color: #efefef;}

7. (Prohibited) Adding units after 0, such as:

.obj {    left: 0px;}

8. (Prohibited) Using css native import

9. Don’t change site-wide CSS and general CSS libraries easily. After changes are made, they must be thoroughly tested. 8. Avoid using filters

10. 避免在CSS中使用expression

11. 避免过小的背景图片平铺，小图片（必须）sprite 合并

12. 层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。

13. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按照模块、业务、页面来划分均可。

14. （推荐）属性的书写顺序, 举个例子:

.hotel-content {     /* 定位 */     display: block;     position: absolute;     left: 0;     top: 0;     /* 盒模型 */     width: 50px;     height: 50px;     margin: 10px;     border: 1px solid black;     / *其他* /     color: #efefef; }

　 按照这样的顺序书写可见提升浏览器渲染dom的性能

15. （推荐）当编写针对特定html结构的样式时，使用元素名 + 类名

/* 所有的nav都是针对ul编写的 */ ul.nav {     ...... }

".a div"和".a div.b"，为什么后者好？如果需求有所变化，在".a"下有多加了一个div，试问，开始的样式是不是会影响后来的div啊~

16. （推荐）IE Hack List

 /* 针对ie的hack */ selector {     property: value;     /* 所有浏览器 */      property: value\9;   /* 所有IE浏览器 */      property: value\0;   /* IE8 */     +property: value;    /* IE7 */     _property: value;    /* IE6 */     *property: value;    /* IE6-7 */ }

当使用hack的时候想想能不能用更好的样式代替

17. （不推荐）ie使用filter,（ 禁止）使用expression

这里主要是效率问题，应该当格外注意，咱们要少用烧CPU的东西~

18. （禁止）使用行内（inline）样式

<p style="font-size: 12px; color: #FFFFFF">靖鸣君</p>

像这样的行内样式，最好用一个class代替。又如要隐藏某个元素，可以给他加一个class

.hide {    display: none;}

尽量做到样式和结构分离~

19. （推荐）reset.css样式

推荐网站：http://www.cssreset.com/

20.（禁止）使用"*"来选择元素

/*别这样写*/* {    margin: 0;    padding: 0;}

这样写是没有必要的，一些元素在浏览器中默认有margin或padding值，但是只是部分元素，没有必要将所有元素的margin、padding值都置为0。

21. 链接的样式，（务必）按照这个顺序来书写

a:link -> a:visited -> a:hover -> a:active