忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
五、区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
六、取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#id1{}可以写成#id1{}
这样可以节省一些字节。
七、默认值
通常padding和margin的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
* {
padding:0;
margin:0
}
或者是针对某元素来定义：
ul,li,div,span {
padding:0;
margin:0
}
八、CSS的优先级
行内样式(inline style) > ID选择符 > 样式(class),伪类(pseudo-class)和属性(attribute)选择符 > 类别(type)，伪对象(pseudo-element)
解释:
*内联样式(inline style)：元素的style属性，比如
*ID选择符：元素的id属性，比如 可以用ID选择符#content
*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。
九、不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用一些默认值覆盖你的定义。
十.多重CSS样式定义，属性追加重复最后优先原则
一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。例如：
我们先定义两个样式
.one{width:200px;background:url(1.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(2.jpg) no-repeat left top;}
在页面代码中，我们可以这样调用:
这样最终的显示效果是这个div样式是什么呢？？重复的是以哪一个为准呢？？
应用到的样式如下：
width:200px;
border:10px solid #000;
background:url(2.jpg) no-repeat left top;
因为，当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则
就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值，以最后定义的为准，如果应用了两个或多个样式名，里面不重复定义的属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
十一、使用子选择器(descendant selectors)
使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
http://duote.com/# class='subnavitem'>Item 1> Item 1 Item 1
这段代码的CSS定义是：
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
你可以用下面的方法替代上面的代码
样式定义是：
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
如果一个容器里有多个同样的元素，而且这些元素样式都不一样，请避免用这个方式，建以采用不同的class如：
十二、不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：
background-image:url(“images
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
十三、导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
@import url(main.css);
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
@import main.css;
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》
十四、CSS hack
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
1.注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：
* html p {
declarations
}
(d)下面这个写法只有IE7浏览器可以理解(对其他浏览器都隐藏)
*+ html p {
}
2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：
http://www.duote.com/style/ie.css' />
还有更多的CSS hack大家可以通过网上找找，但是有很多hack都是不符合w3c标准的，本人根据以上的hack写了一个能区分IE6、IE7、FF的样式，而且可以符合w3c标准,代码如下：
.classname {width:90px!important;width:100px;}
*+html .classname {width:95px!important;}
这样写后在IE6下宽是100px，IE7下是95px，火狐下是90px。
十五、调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
十六、CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：
.classname {
width:100px;
}
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。
最后，关闭的大括号}单独写一行。空格和换行有助与阅读。
查看更多关于2.有利于SEO优化的DIV+CSS的命名规则小结_html/css_WEB-ITnose的详细内容...