CSS标准与最佳实践

CSS用于定义网站的UI 和将内容从外观中分离。

CSS在几乎所有网站中被广泛应用。让我们花点时间来看看我们编写的样式是否基于比较好的标准。

下面的这些技巧将对CSS初学者在开发中有所帮助，对CSS高手或许也将有某些提高。

1.索引

这个定义可以帮助你和其他人更多的理解这个网站。这个索引只是一个格式化的文本段落，和CSS注释 一样。

• 给该CSS的作者以一些著作权声明
• 定义网站的布局 [卷数，固定宽度或全屏]
• 跟踪版本[对多个编辑者和特别更新很有用]

2.锚点

锚点在CSS中就像书签。锚点让你很方便的浏览你的CSS而不会盲目和混乱，会让一切变得有规律。

锚点在CSS的索引中定义。CSS没有原生的锚点系统，所以我在文档中采用一种比较简单的技术来定义锚点。

这个主意是用一套特定的字符来定义注释。要找到一个锚点，你可以通过复制和查找(搜索)索引中定义的锚点，然后就可以很正确的定位到相关的内容。

3.多类症

多类症 是一个术语，用来描述在HTML中过度使用class定义的现象。

CSS中最美的地方之一就是上下文选择器，让我们使用这个吧:

4.命名规范

给你的元素声明一个恰当和简洁的名字是一个关键。这真的能够 避免混乱 并能让你更好更快的理解CSS。

事实上这涉及到代码的语义化和可读性，好的命名规则可以让自己和团队的工作更加轻松。



5.简写

CSS中的缩写是指,定义与单个样式拥有相同属性的一系列样式.

CSS简写可使开发工作变得更加容易,并让你的CSS保持简洁、更小而且更易用。这里是一些示例：



推荐阅读:

• CSS 简写指南
• CSS简写介绍
• 通过简写属性提高CSS的性能

6.Sprites

合并所有的背景图片到一个单个图片 里面，并通过background-position属性来使用这个图片，这就是我们所谓的CSS Sprites的全部。

CSS Sprites可以减少HTTP请求 的数量，节省带宽 并加快页面加载。同时，可以避免图片闪烁[例如，如果系统或网速比较慢的时候，当鼠标放到一个按钮时加载另外一个图片就可能引起闪烁/中断]。

最好和最著名的使用CSS Sprites技术的例子就是Apple公司官方网站的菜单系统。


图片来源: [/i][i]apple.com

推荐阅读:

• css sprites的真谛 特别推荐
• 如何正确的使用CSS Sprites
• CSS Sprites: 它们是什么,为什么这么酷,如何使用
• CSS Sprites:图片限制的死神之吻

7.特异性

选择器特异性 是一种用于确定当多个规则用于同一个元素的时候哪一个起作用（优先级）的处理方法。

通常来说，每一个CSS选择器都有一些种类的关联权重 ,某个选择器的所有权重之和决定它在文档中的优先权 。当遇到很大的CSS文件时，特异性就非常有帮助。

然而，特异性在CSS中是一个很大的领域，它不能用一些简单的语句解释清楚。这里是一些示例：



推荐阅读 :

• CSS 特异性: 你应该知道的一些事情
• CSS 特异性

8.重设

全局重设可以确保一个网站在所有浏览器保持统一的外观。完全不一样的浏览器会在一个网站上应用自己的默认设置，这可能导致一个网站在不同的浏览器有不同的界面表现……一个全局重设可以解决这个问题，可以让你从一个绝对基础构建一个网站。

使用一个CSS框架不是什么时候都是恰当的，但是一个CSS 重设是你每次都需要的。从简单到复杂，有很多不同的重设方法。



推荐阅读:

• CSS Frameworks + CSS Reset: 从头开始设计
• CSS Tools: Reset CSS
• YUI Reset CSS

9.Hacks

即便是完美的CSS也未必能在所有的浏览器生成完全一致的输出，因为浏览器解释你的CSS的方法不同。如果你想使你的网站在所有的浏览器中看起来一样 ，你不得不使用CSS hacks。



我承认使用CSS hacks会在CSS验证的时候出现错误。一个替代的方法是建一个独立的针对某个浏览器的特别CSS文件，然后在HTML代码中使用特定标签引用它。我常常在我的所有项目中使用“fuck-ie.css” 文件

这样你就可以验证你的主要CSS文件，而且也可以验证 “fuck-ie.css” 文件，只是在IE中的主要CSS文件的优先级低一点儿…

推荐阅读:

• CSS hacks
• 浏览器特定 CSS Hacks介绍

10.验证

当你写好了CSS文件之后，验证一直是件很重要的事情。这可以确认你的CSS是没有错误的 而且在不同的浏览器中的解释/表现是一样的。

W3C Validator 是一个非常流行和有用的在线验证CSS的工具。