一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如:width: 100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:
div#content { }
fieldset.details { }
可以写成
#content { }
.details { }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样:
* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个class"update"
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。
八.多重class定义
一个标签可以同时定义多个class。例如:我们先定义两个样式，第一个样式背景为#666;第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:
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 { }
你可以用下面的方法替代上面的代码
Item 1
Item 1
Item 1
样式定义是:
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
十.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如:
background:url("images
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:
body {
text-align:center;
}
由于不同的搜索引擎在网页支持方面存在差异，因此在网页设计时不要只注意外观漂亮，许多平常设计网页时常用到的元素到了搜索引擎那里会产生问题。
框架结构（Frame Sets）：有些搜索引擎是不支持框架结构的，他们的“蜘蛛”程序无法阅读这样的网页。
图象区块（Image Maps）：除AltaVista、Google和Northern Light明确支持图像区块链接外，其他引擎是不支持它的。当“蜘蛛”程序遇到这种结构时，往往会感到茫然不知所措。因此尽量不要设置Image Map链接。
特效链接：我们经常看到有些网站为导航链接加上了特效，如点击某个项目会展开下层链接等。这些效果一般通过Java Script实现，视觉上非常新颖，但在“蜘蛛”程序的眼里则没那么诱人，相反它无法解读这种链接。为了让搜索引擎顺利检索到你的网页，建议还是牺牲掉一些花哨的东西。
FLASH：虽然FLASH制作的网页视觉效果较好，但搜索引擎对此却不太感冒，个案表明这一类的网站很难被百度搜索引擎索引。明智的做法是提供FLASH和非FLASH网页两种选择，这样即增加了网页的观赏性，又照顾到了搜索引擎的情绪。
动态网页（Dynamic Pages）：任何地址中带“？”号、“&”号（及其他类似符号）的网页都会把“蜘蛛”程序挡在门外。这些网页通常由CGI、PHP、ASP等程序产生，技术上较先进，但不适合搜索引擎的“蜘蛛”程序。虽然目前有的大型搜索引擎已具备检索动态网页的能力，但相当一部分数引擎还是不支持它的。而且即使是能够索引动态网页的Google，也在多个场合中明确表示不保证检索全部的动态网页。因此，除非是超大型网站，为方便起见不得不采用动态网页生成技术，否则还是尽量使用静态网页为好。
加密网页：除非你不希望搜索引擎检索你的网页，否则不要给你的网页加密。
网页容量：包括图像在内的网页字节数最好不要超过50K。体型庞大的网页下载速度慢，不仅会让普通访问者等得心急如焚，有时也会使“蜘蛛”程序感到不耐烦。
独立域名与付费虚拟主机：目前搜索引擎都不愿收录位于免费主页空间上的网站。其理由是，既然你认为自己的网站如此重要，以至于需要登录搜索引擎让天下人都知道，那么你没有理由还将它放在免费服务器上。更何况免费主页通常速度较慢，会影响大家搜索信息的效率。
当然凡事都有例外，如果你的网站确实优秀，也有可能被搜索引擎接受，不过在条件相当的情况下，你的排名会永远跟在那些拥有独立域名的网站后面。
1、超长的页面下载时间：如果页面下载时间超过30秒，很难有用户会喜欢你的网站。
2、无限制的使用flash及图片：无可否认，适当的用一些图片及flash可以增加网站的生动性，增加视觉冲击力。但无限制的使用flash及图片，会造成页面文件超大，占用浏览者的cpu资源，并且不利于页面更新及搜索引擎对网站的抓取。
3、网站页面过长：你认为有多少浏览都有兴趣看你网页中最下面的内容？在一个网站的首页，能看到第三屏内容的人只有10%以下一个过长的网站很容易引起浏览者的视觉疲劳，更何况大部分浏览者很有可能已经被前两屏的内容吸引到别的页面去了。
4、不友好的导航：不友好的导航是最影响用户操作的，不能让用记很方便的找到自己想到的内容。用户来到一个页面不知如何返回上一页,不知道当前页面是在哪个栏目下的.这样的网站很可能用户来了一次就不会再来了。
5、过期的信息：很久不更新的信息很容易让浏览者感到反感，而且在心中也会对你这个网站的品牌形象大打折扣。
6、死连接或连接错误：这是最基本的错误。
7、孤立的页面：用户不知用什么方法返回首页，这种情况往往是出现在信息提示页或内容调查的结果页上。
8、页面没有视觉差异：页面没有视觉差异，设计很“平”，缺少“层次感”，缺少视觉冲击力和亮点，或者视觉冲击力突出的并不是网站的主体内容。这是没有经验的网页设计师设计大型网站时最容易犯的错误。
9、链连没有标准的表现形式：现在很多刚上网站的人还只认为有带下画线的文字才是链接，网站要有统一标准的链接表现形式并且要和没有连接的文字有区别，要让浏览者很方便的认出哪些是连接的文字。如果是图片加的连接要在图片下标出“点击图片见大图”，图片一定要加“alt”属性。
10、过多的运用新技术：所谓新技术就是只有少数人掌握的技术，虽然有可能他的视觉效果很好，功能很强大，但过多的运用新技术就意味着你准备抛弃99%的用户。
11、缺少互动的内容：缺少互动的内容，缺少网友的参与，不能让网友表达情感和思想，注定这个网站只是个死网站。
12、过复杂的文件目录及文件名：过复杂的文件目录及文件名不利用搜索引擎对页面的拾取，并且也不利于浏览者的记忆。
13、使用框架：不建议使用框架，不为什么？就因为搜索引擎不喜欢。连google的广告计划中，对有框架的代码都是单独的。
14、恶意插件，恶意弹出窗口。
15、页面中不要过多的用”_blank”，过多的弹出新窗口，会大量占用计算机的资源，影响浏览者的浏览速度。