更甚一筹的编写技巧

1

2

3

4

5

6

7

// 糟糕

ul#someid {..}

.menu#otherid{..}

// 好的

#someid {..}

#otherid {..}

1

2

// 烂透了

html div tr td {..}

1

2

3

4

5

// 糟糕

.menu.left.icon{..}

// 好的

.menu-left-icon{..}

1

2

3

4

5

<ulid="navigator">

<li><ahref="#"class="twitter">Twitter</a></li>

<li><ahref="#"class="facebook">Facebook</a></li>

<li><ahref="#"class="dribble">Dribbble</a></li>

</ul>

1

2

3

4

5

// 糟糕

#navigator li a {..}

// 好的

#navigator {..}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// 糟糕

.someclass {

padding-top: 20px;

padding-bottom: 20px;

padding-left: 10px;

padding-right: 10px;

background: #000;

background-image: url(../imgs/carrot.png);

background-position: bottom;

background-repeat: repeat-x;

}

// 好的

.someclass {

padding: 20px10px20px10px;

background: #000url(../imgs/carrot.png) repeat-xbottom;

}

1

2

3

4

5

// 糟糕

.someclass table tr.otherclass td.somerule {..}

//好的

.someclass .otherclass td.somerule {..}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 糟糕

.someclass {

color: red;

background: blue;

font-size: 15px;

}

.otherclass {

color: red;

background: blue;

font-size: 15px;

}

// 好的

.someclass, .otherclass {

color: red;

background: blue;

font-size: 15px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

// 糟糕

.someclass {

color: red;

background: blue;

height: 150px;

width: 150px;

font-size: 16px;

}

.otherclass {

color: red;

background: blue;

height: 150px;

width: 150px;

font-size: 8px;

}

// 好的

.someclass, .otherclass {

color: red;

background: blue;

height: 150px;

width: 150px;

}

.someclass {

font-size: 16px;

}

.otherclass {

font-size: 8px;

}

1

2

3

4

5

6

7

.someclass {

/* Positioning */

/* Display & Box Model */

/* Background and typography styles */

/* Transitions */

/* Other */

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

// 糟糕

.someclass-a, .someclass-b, .someclass-c, .someclass-d {

...

}

// 好的

.someclass-a,

.someclass-b,

.someclass-c,

.someclass-d {

...

}

// 好的做法

.someclass {

background-image:

linear-gradient(#000, #ccc),

linear-gradient(#ccc, #ddd);

box-shadow:

2px2px2px#000,

1px4px1px1px#dddinset;

}