CSS的10条重要原则

今天在JE上看到一个帖子推荐的CSS学习网站，顺便就学习了一下。

发现国外的CSS玩家总结得还不错。这里翻译一下，作为以后自己的开发箴言：

 

1.尽量保持CSS简单

   这个简单主要指的是不要使用CSS hack，这是非常危险的，尽管hack可以暂时解决一下不兼容的问题，但是后期的维护可以用可怕来形容。

 

2.让CSS命令保持在一行。

   例如：

Good

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Bad

h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

 

3.尽量使用缩写。

例如：

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

But this is much more efficient:

margin:1em 0 2em 0.5em;

 

4.让box元素自然的填充空白

也就是说，让div这类框模型的元素，要么设置宽度，要么用margin和padding来让它自己把空白填满，而不必额外使用其它的命令。

 

5.使用clear的float来清除浮动

使用浮动布局是一种非常合理的布局方法，但是浮动是需要clear的，不然就可以造成布局混乱，clear浮动最好的办法就是在浮动的框最下端加一个clear的框。

 

6.使用负margin

布局错位，是任何人都无法避免的。如果出现这种问题，请使用负margin.

 

7.使用css来达到居中的目的

经典的margin:0 auto;和text-align:center是居中布局的良药，请记住它。例如:

#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}

注：其中text-align:center是为了让IE适应。

 

8.使用正确的DOCTYPE声明

DOCTYPE的声明决定了浏览器解析的行为，这个要根据CSS代码和HTML代码的规范程度来决定，如果严格则使用strict，否则使用过渡的模式。

 

9.居中每一个元素，请使用CSS

居中一个元素的办法有很多，最好的还是用CSS技巧。请参加：

http://www.bartelme.at/journal/archive/centering_items_via_css

 

10.充分的利用text-transform命令

用它来达到大小写的目的，可以减少很多服务器端的工作。