1、先确定HTML，确定意义的标签，再选择使用合适的CSS。
2、判断网页标签是否良好的方法：去掉样式，看网页结构是否组织良好有序，是否仍然具有很好的可读性。——CSS裸体日（4月5日）。
3、表单域要用fieldset标签包起来，并用legend表情说明用途。
4、页面最开始处需要进行DTD(文档类型声明)声明，IE则会触发怪异模式。
5、CSS样式可分为：page.css（具体某一个页面的样式），common.css（模块化的css样式，针对不同的对象，例如表单，图片列表等），base.css（底层原子类，即最细化到元素的样式，例如：文字排版，定位，长度，高度，边距等）三大层次。
View Code
6、CSS的模块划分时候，模块之间尽量不包含相同部分，如具有相同部分，尽量拆分成独立的模块。模块在保证数量少的原则下，尽可能做到简单，以提高重用性。
7、CSS的命名，尽量选用适合的英文单词，提高阅读性及维护性，一般采用驼峰命名方法，下划线隔开。
8、多用组合，少用继承。
View Code
1 <style type="text/css"> 2 .list1{font-size:12px; boder:1px solid #ccc;padding:1px;} 3 .list1 li { height:20px;line-height:20px;} 4 .list2{font-size:16px; boder:1px solid #ccc;padding:1px;} 5 .list2 li { height:20px;line-height:20px;color:red;} 6 </style> 7 <body> 8 <ul class="list1"> 9 <li>1</li> 10 <li>2</li> 11 <li>3</li> 12 </ul> 13 <ul class="list2"> 14 <li>1</li> 15 <li>2</li> 16 <li>3</li> 17 </ul> 18 </body> 19 20 21 22 23 /*优化后代码*/ 24 <style type="text/css"> 25 .f12{font-size:12px;} 26 .f16{font-size:16px;} 27 .red{color:red;} 28 .list{ boder:1px solid #ccc;padding:1px;} 29 .list li { height:20px;line-height:20px;} 30 </style> 31 <body> 32 <ul class="list f12"> 33 <li>1</li> 34 <li>2</li> 35 <li>3</li> 36 </ul> 37 <ul class="list f12 red"> 38 <li>1</li> 39 <li>2</li> 40 <li>3</li> 41 </ul> 42 </body>
9、避免滥用自选择器，Css选择符具有不同的权重，当不同选择符的样式设置有冲突时候，会采用权重较高的选择符样式。为保证样式容易被覆盖，提高可维护性，css选择符保证权重尽可能低。
View Code
1 <style type="text/css"> 2 span{font-size:40px;} 3 .text{color:red;} 4 </style> 5 6 <span class="test">111</span> 7 8 /*CSS层叠有冲突的情况*/ 9 <style type="text/css"> 10 span{font-size:40px;color:green;} 11 .text{color:red;} 12 </style> 13 14 <span class="test">111</span>
最终的结果会是green，因为span的权重较低。
权重的规则是：HTML标签的权重为1，class的权重是10，di的权重是100。
所以以上代码的结果是green，因为span的权重为1，而test的权重是10。
10、使用CSS sprite，避免因为需要图片较多，从而发送多次HTTP请求，占用服务器性能。sprite指的是，通过图片翻转技术，将多张图片合并为一张，利用 background-position 属性来展示需要的图片。
sprete注意点：1、sprite只能用于背景图片，对于<img src="">设置的图片，不能合并到到 sprite 的图中，如果合并将会影响页面的可读性。
2、对于横向和纵向平铺的图片，不能使用sprite；如果横行平铺，只能将所有横向平铺的图合并成，只能竖直排列，不能水平排列。如果纵向平铺，只能将所有纵向平铺的突破合并，只能水平排列，不能竖直排列。
3、CSS sprite 技术醉倒的好处是减少http请求数，减轻服务器压力，需要付出 ，降低开发效率，增大开发难度 的代价，适用于网站流量较大的网站。
11、id，class选择符的选用，id不能重用，对网页的扩展性有影响。对于重用较多的模块，可选用class作为选择符。所以一般建议使用class。
12、CSS hank 于不同的浏览器，比如 IE 6,IE 7,Mozilla Firefox、Chrome等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
IE条件注释法： View Code
13、hasLayout 与影响IE与Firefox等浏览器显示不同的重要属性。
14、块级元素与行内元素的区别。常见的块级元素：div、p、form、ul、ol、li等，常见的行级元素：span、strong、em等。
一般块级元素会独自占用一行，同时宽度自动填满其父级元素的宽度。行及元素则不会独占一行，与行内元素排列在同一行中，宽度也随着元素的内容而变化。
15、position:relative,position:absolute,position:可以改变元素在文档流中的位置。影响 left right top bottom 及z-index的激活情况。一般所有元素均在z-index:0这一层。
16、居中：水平居中：text-align:center可以实现文本，图片等行内元素的居中。块级元素则使用 margin -left及margin-right：auto进行居中。
垂直居中：父级元素不确定高度的垂直居中，一般采用给父级元素设置相同的上下边距实现。
单行文本可以使用 line - height 进行设置。多行文本居中使用 vertical-align （作用于td，th时候，不支持div，p等块级元素。可以使用 display:table-cell; 仅限IE8。 ）
17、z-index，z-index越大则元素位置越靠上。flash则可以设置 wmode属性，分别有 window（窗口），poaque（非窗口不透明），transparent（非窗口透明）。