css属性顺序

猫性男孩

css属性顺序是css良好编码风格的一部分，有助于提高代码可读性，便于发现代码问题，有利于团队合作。下面总结一些比较受欢迎的css属性顺序。
  1. 传说中Mozilla建议的css属性书写顺序（实为fantasai建议的顺序）：
  

01	/*mozilla.org Base Styles

02	* maintained by fantasai

03

*/

04	/* Suggested order:

05

//显示属性

06

* display

07	* list-style

08	* position

09

* float

10

* clear

11

//自身属性

12

* width

13

* height

14

* margin

15

* padding

16

* border

17	* background

18

//文本属性

19

* color

20

* font

21	* text-decoration

22	* text-align

23	* vertical-align

24	* white-space

25	* other text

26

* content

27

*/

  2. 字母排序：
  Trevor Davis在《5 Ways to Instantly Write Better CSS》中推荐用字母排序。
  3. 传说中淘宝的css属性顺序：

01

/*显示属性*/

02

display

03

position

04

float

05

clear

06

cursor

07

…

08

/*盒模型*/

09

margin

10

padding

11

width

12

height

13

/*排版*/

14	vertical-align

15	white-space

16	text-decoration

17	text-align

18

…

19

/*文字*/

20

color

21

font

22

content

23	/*边框背景 为什么要把boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来方便，哈哈。*/

24

border

25	background

4. Andy Ford在《 Order of the Day: CSS Properties》中推荐的CSS书写顺序：

1	Display & Flow

2	Positioning

3	Dimensions

4	Margins, Padding, Borders, Outline

5	Typographic Styles

6	Backgrounds

7	Opacity, Cursors, Generated Content

  5. 我自己总结的顺序：

01	/* 属性的顺序（结合属性的类型、字母序及属性关系）：

02

//显示属性

03

1. clear

04

2. cursor

05	3. display

06

4. float

07	5. list-style

08	6. position

09

//盒模型

10

1. width

11

2. height

12

3. margin

13	4. padding

14

//排版

15	1. text-align

16	2. text-decoration

17	3. vertical-align

18	4. white-space

19

//文本属性

20

1. color

21	2. content

22

3. font

23	//边框背景（因为修改最频繁，所以放在最后）

24	1. background

25

2. border

26

*/

  除了css属性之外，其实css选择器本身也有顺序。我一般采用两种排序方法。
  1. 按css选择器在html页面中出现的先后顺序。
  2. 按选择器的优先级及字母顺序。

1	/* 选择器的排列顺序（结合css选择器权重及字母序）：

2	1. html选择器（标签选择器）

3	2. class选择器（类选择器）

4

3. id选择器

5	*  同一类选择器中按照字母顺序排列先后

6	*  基本选择器在前，组合选择器在后，伪类选择器在最后

7

*/

  注意：css的选择器有自己的权重，当权重一样时，会采用“层叠原则” ，即后定义的会被应用。 如：

1	p{color:yellow}

2	p{color:red}

   作用到这里<p>我的什么颜色呢？</p>，结果是red。  
  参考资料：

  
• CSS中属性的书写顺序
    
• 推荐的CSS书写顺序
    
• 淘宝的css属性顺序书写规范
    
• css选择器的优先级