让我们面对现实吧。至于网络语言去吧，CSS可以说是最简单的。我的意思是，真的，还有什么比一列影响元素的属性更简单的呢?
语法就像书面英语。想要更改字体大小?有一个字体大小CSS属性。
颜色怎么样?有颜色财产。但是，尽管CSS的外观看似简单，但它是一个复杂的系统，尤其是当您在专业、高规模、高性能级别上使用它时。
选择元素的方式之多令人惊叹;更不用说可以应用于所选元素集的属性的数量，以及当您谈到支持多种浏览器和布局引擎时呈现方式的变化。使用CSS很容易出错。下面是一些我们都会犯的常见CSS错误。
1.没有使用正确的CSS重置
网络浏览器是我们变化无常的朋友。它们的不一致性会让任何开发人员抓狂。但归根结底，他们是展示你的网站的人，所以你最好做你必须做的事情来取悦他们。
浏览器做的一件比较愚蠢的事情是为HTML元素提供默认样式。我想你不能真的责怪他们:如果一个“网站管理员”选择不设计他们的页面呢?对于那些选择不使用CSS的人，必须有一个后备机制。
在任何情况下，很少有两个浏览器提供相同的默认样式，所以确保样式有效的唯一真正的方法是使用CSS重置。CSS重置所需要的是重置(或者，更确切地说，设置)将所有HTML元素的所有样式转换为可预测的基线值。这样做的好处是，一旦您有效地包含了CSS重置，您就可以设置页面上所有元素的样式，就好像它们一开始都是一样的。
这是一张白纸，真的。网络上有很多CSS重置代码库，你可以把它们整合到你的工作中。我个人用的修改版比较流行Eric Meyer重置和Six Revisions网站使用了一个修改版本的YUI Reset CSS。
你也可以建立自己的重置，如果你认为它会更好的工作。我们很多人所做的就是利用一个简单的通用选择器margin/padding重置。
*{保证金:0;填充:0;｝
虽然这很有效，但并不是完全重置。
你还需要重置，例如，边框，下划线，以及列表项，链接和表格等元素的颜色，这样你就不会在不同的浏览器之间遇到意想不到的不一致。通过这个指南了解更多关于重置你的样式的信息:用CSS重置重置你的样式．
2.Over-Qualifying选择器
在选择样式元素时过于特定并不是一个好的实践。下面的选择器就是一个很好的例子:
Ul #navigation li a{…｝
通常，主导航列表的结构是< ul >(通常使用ID like#导航或#导航)，然后列出一些项目(<李>)，各有各的<一>标签里面链接到其他页面。
这个HTML结构是完全正确的，但是CSS选择器才是我真正担心的。首先，没有理由ul之前#导航因为ID已经是最具体的选择器。另外，你不需要把李在选择器语法中因为所有的一个导航栏中的元素是在列表项中，所以没有必要这么特别。
因此，你可以将选择器浓缩为:
#导航a{…｝
这是一个过于简单的示例，因为您可能嵌套了一些想要采用不同样式的列表项(例如:#导航李不同于#导航li ul li a）;但如果你不这么做，那就没有必要过分强调细节了。
我还想谈谈在这种情况下对ID的需求。让我们假设这个导航列表在标题div (#头)．我们还假设在标题中除了导航列表之外没有其他无序列表。
如果是这样的话，我们甚至可以从HTML标记中的无序列表中删除ID，然后我们可以在CSS中这样选择它:
#header ul a{…｝
下面是我想让您从这个例子中得到的:始终使用使其工作所需的最低层次的专一性来编写CSS选择器。包括所有额外的绒毛可能会使它看起来更安全精确，但当涉及到CSS选择器时，只有两个层次的特异性:具体的,不够具体．
3.不使用速记属性
看看下面的属性列表:
#选择器{margin-top: 50px;margin-right: 0;margin-bottom: 50 px;margin-left 0;｝
这幅图有什么问题?我希望当你注意到我们有多么频繁地重复自己的时候，你的脑子里已经敲响了警钟。幸运的是，有一个解决方案，它正在使用CSS简写属性．
下面的代码与上面的样式声明具有相同的效果，但是我们将代码减少了三行。
#selector {margin: 50px 0;｝
看看这个处理字体样式的属性列表:
字体类型:Helvetica;字体大小:14 px;粗细:大胆的;行高:1.5;
我们可以把这一切浓缩成一句话:
字体:粗体14px/1.5 Helvetica;
我们也可以这样做背景属性。以下几点:
背景图片:url (background.png);平铺方式:repeat-y;背景位置:中心最高;
可以写成这样的简写CSS:
Background: url(Background .png) repeat-y center top;
使用简写CSS提高效率并使维护我们的代码更容易。
要了解更多关于CSS简写属性的信息，请查看这个CSS简写属性的备忘单．
4.使用0px而不是0
假设您想在元素的底部添加20px的边距。你可以这样使用:
#selector {margin: 20px 0px 20px 0px;｝
不喜欢。这是过度。
不需要包括px后0．虽然这看起来像是我在吹毛求疵，但当您处理一个巨大的文件时，应该删除所有多余的内容px可以减少文件的大小(这从来都不是一件坏事)。
5.使用颜色名称而不是十六进制
声明红色的因为颜色值是懒人的# FF0000．说:
颜色:红色;
你实际上是在说浏览器应该显示它所想的东西红色的是多少。如果你从如何在所有浏览器中正确运行中学到了什么——以及你因为一个只有在IE7中才能看到的愚蠢的列表项目错误排列而积累了数小时的沮丧——那就是你永远不应该让浏览器决定如何显示你的网页。
相反，您应该努力找到您要使用的颜色的实际十六进制值。这样，您就可以确保在所有浏览器中显示相同的颜色。可以使用提供预览和颜色的十六进制值的颜色备忘单。
这可能看起来微不足道，但当涉及到CSS时，这些小事往往会导致大的陷阱。
6.多余的选择器
我写作风格的过程是从所有的排版开始，然后是结构，最后是所有的颜色和背景的样式。这对我很有效。因为我一次不会只关注一个元素，所以我经常会发现自己不小心输入了一个冗余的样式声明。
我总是在完成之后做最后的检查这样我就可以确保我没有重复任何选择器;如果有的话，我会合并它们。在开发过程中犯这种错误是可以的，但要确保它们不会出现在生产中。看看这个CSS优化器列表这可以帮助您自动搜索效率低下和冗余的选择器。
7.冗余属性
与上面的类似，我经常发现自己必须将相同的属性应用于多个选择器。这可能是一种造型< h5 >在头部看起来完全像<编辑>在页脚，做出< >之前的年代,< blockquote >大小相同，或者介于两者之间。在对CSS的最后审查中，我将确保没有重复太多的属性。
例如，如果我看到两个选择器做同样的事情，比如这个:
# selector-1{字体样式:斜体;颜色:# e7e7e7;保证金:5 px;填充:20 px}.selector-2{字体样式:斜体;颜色:# e7e7e7;保证金:5 px;填充:20 px}
我将它们结合起来，用逗号分隔选择器(，)：
# selector-1, .selector-2{字体样式:斜体;颜色:# e7e7e7;保证金:5 px;填充:20 px}
我希望你在这里看到了一个趋势:尽量做到简洁和高效。它在维护时间和页面加载速度方面具有优势。
8.不提供回退字体
在一个完美的世界里，每台电脑都会安装你想要使用的所有字体。不幸的是，我们并不生活在一个完美的世界。@font-face除此之外，网页设计师们几乎被限制在少数所谓的网络安全字体(例如。
Arial, Georgia, serif等)。不过，也有好的一面。你仍然可以使用Helvetica这样的字体，这些字体不一定安装在每台电脑上。
秘密在于字体栈。字体堆栈是开发人员在用户没有安装首选字体时提供浏览器显示的备用字体的一种方式。例如:
#选择器{字体家族:Helvetica;｝
可以使用回退字体进行扩展，如下所示:
#selector {font-family: Arial, sans-serif;｝
现在，如果用户没有Helvetica，他们可以看到你的网站在Arial，如果这不起作用，它会默认安装任何sans-serif字体。
通过定义回退的字体，你就能更好地控制网页的呈现方式。
9.不必要的空格
当谈到为了提高性能而减少CSS文件大小时，每个空间都很重要。在开发过程中，可以使用自己喜欢的方式格式化代码。但是，绝对没有理由不删除多余的字符(这个过程称为缩小)当你把你的项目放到网上，你的文件大小真的很重要。
很多开发者在发布网站前都没有精简文件，我认为这是一个巨大的错误。虽然它可能感觉不太不同，但当您有巨大的CSS文件时，它可以改进您的页面响应时间．
10.没有按照逻辑的方式组织CSS
当您编写CSS时，请组织您的代码。通过注释，您可以确保下次对文件进行更改时仍然能够对其进行导航。如何组织你的风格完全取决于你自己，无论什么工作．
我个人喜欢根据我所设计的HTML的结构来组织我的样式。这意味着我有注释来区分页眉、正文、侧边栏和页脚。我看到的一个常见的css编写错误是，人们一想到自己的风格就把它们写下来。
下次当您试图更改某些内容而又找不到样式声明时，您将会暗自诅咒自己没有足够好地组织CSS。
11.只使用一个样式表的一切
这是一个主观的问题，所以请允许我给你我的观点。和其他人一样，我认为最好将样式表拆分为几个不同的样式表，以便于大型站点的维护和更好的模块化。也许我会有一个用于CSS重置，一个用于特定于ie的修复，等等。
通过将CSS组织到不同的样式表中，我将立即知道在哪里可以找到我想要更改的样式。你可以这样导入所有的样式表到一个样式表中:
@ import url(“reset.css”);@ import url(“ie.css”);@ import url(“typography.css”);@ import url(“layout.css”);
然而，我要强调的是，这对我和许多其他开发人员都是有效的。您可能更喜欢将它们全部压缩到一个文件中，这是可以的;这没有什么错。
但是，如果维护单个文件有困难，可以尝试将CSS拆分。
12.不提供打印样式表
为了在将要打印的页面上设计站点的样式，你所要做的就是利用并包含一个打印样式表。这很简单:
< link rel = "样式表" href = " print.css”媒体= "打印"/>
使用用于打印的样式表可以隐藏不想打印的元素(比如导航菜单)、将背景颜色重置为白色、为段落提供另一种排版方式，以便它更适合在一张纸上打印，等等。重要的是，您要考虑页面在打印时的外观。
太多的人没有考虑到这一点，所以他们的网站只是简单地以你在屏幕上看到的方式打印出来。
