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) 🎜>

Convenient compression tool for "sentence segmentation".

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; }

Separating with "-" is more clear than using camel case.

Product line-product-module-sub-module, you can also use this method when naming (@Artwl)

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

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

There must be a space before the selector and { (must)

After the : of the attribute name (must) There must be spaces

attribute names: (forbidden) add spaces before

One reason is aesthetics, and secondly there is a bug in IE 6, poke the bug

5. Line breaks (must) between multiple selector rules

When the style targets multiple selectors, each selector occupies one line

 /* 推荐的写法 */ 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;}

It is not easy to comment on a single line. Good note, this should be the job of the compression tool~

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

.obj {    left: 0px;}

Just for unity. Remember, the green word means emphasis, not force!

8. (Prohibited) Using css native import

Using css native import has many disadvantages, such as increasing Number of requests, etc....

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; }

定位相关, 常见的有：display position left top float 等

盒模型相关, 常见的有：width height margin padding border 等

其他属性

 　  按照这样的顺序书写可见提升浏览器渲染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