规划您的样式表——最终指南
3.00/5 (7投票s)
不要让你的样式表文件失控 - 从一开始就遵循这些指南，你就能轻松地管理和更新你的 CSS 文件。
我们越依赖CSS，样式表文件就越大越复杂。规划和组织你的样式表对于创建一个精简、易于管理的网站至关重要。有很多方法可以组织CSS代码，但以下是最佳实践...
注释你的样式表
注释你的样式表可以让你更容易找到所需的信息或命令。
有意义的注释包括
- 最后更新日期 - 这些信息可以快速告知开发人员文件最近的更改
/* WEBCREDIBLE
更新日期：2008 年 1 月 1 日，星期四
作者：John Doe
更新内容：添加新版块“论坛”
-------------------------------------------*/ - 参考 - 注释还可以作为整个网站应用的主要样式指南的快速参考
/* 颜色
主体背景：#ffffff
主要文本：#000000
链接：#F0F0F0
等等...
*/ - 组织 - 使用注释来标识样式表的不同部分
/* =头部-------------------------------------------*//* =页脚-------------------------------------------*/ - 提醒和笔记 - 为自己和其他开发人员留下提醒和笔记可以避免日后的混淆
/* IE 6 中覆盖了宽度，在：cssIE.css */
div {width: 150px;}
在样式表的顶部定义通用规则和主要类
设置通用HTML元素的样式，例如
body
{
background: #fff;
font: arial, sans-serif 75%;
}
h1 {
font-size: 1.2em;
color: #000;
}
h2 {
font-size: 1em;
color: #f0f0f0;
}
img {border: 0;
}
然后，列出网站上最常用的类，例如
.hide
{
position: absolute;
left: -9000px;
}
.required {
background: url(#) no-repeat 100% 0;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
按相同顺序排列CSS与HTML
相同顺序排列HTML应该用来确定CSS部分的顺序。CSS文件有时会很大，命令也难以查找。在HTML和CSS文件之间建立一些关联，可以更容易地找到元素是如何被样式化的。
了解何时使用元素、ID 和类
使用正确的选择器类型意味着你的CSS文件大小可以大大减小
- 元素 - 元素，如 body (
<body>)、段落 (<p>) 和标题 (<h1>,<h2>等) 应用于定义通用规则 - ID - 它们是唯一的标识符，在文档中只能使用一次。ID 应用于样式化网页的主要结构部分，如头部或页脚。
- 类 - 它们可以用于任何类型的HTML元素。
过多的 ID 或类会不必要地使HTML和CSS文件过载。尝试通过嵌套选择器来引用元素和/或 ID 来定义尽可能多的规则。
想象一下下面的HTMLcode
<ul id="nav">
<li><a href="#">项目 1</a></li>
</ul>
由于列表中的每个项目都有一个共同的父项，后代选择器可以简化CSS标记，如下所示
#nav { 此处列出属性 }
#nav li { 此处列出属性 }
#nav li a { 此处列出属性 }
逻辑地命名类和 ID
不要根据颜色或位置来命名类和 ID，因为这些可能会随着时间改变。尽量给它们起一个可能在很长一段时间内保持相关的名字。另外，在下划线之前使用连字符，因为某些旧浏览器很难理解后者。
为你的类和 ID 使用一个通用的命名系统。这将为你开发、调试和更新文档节省大量时间和避免混淆。
嵌套CSS选择器
通过嵌套CSS选择器（即在一个命令中使用多个CSS选择器），我们可以通过导航HTML文档树来应用样式。例如，要将 div 中所有段落的颜色设置为红色，我们可以使用以下规则
div p {color: red;}
利用继承
一些CSS命令会从它们的父项继承，而另一些则不会。使用嵌套意味着你不必一遍又一遍地声明相同的属性。
总的来说，与文本相关的CSS命令（例如 font-size, color）会被后代元素继承，而与布局相关的命令（例如 float, width）则不会被继承。
将具有共同CSS声明的选择器分组
你可以通过将共享相同CSS声明的选择器分组在一起，来避免多次指定同一组属性。例如
h1, h2, h3
{
color: black;
padding: .2em;
}
本文由 Brigitte Simard 撰写。Brigitte 对可访问性非常着迷，并且CSS- 如此着迷以至于她在 Webcredible 工作，这是一家行业领先的 用户体验咨询公司，致力于让互联网成为对每个人来说都更好的地方。她非常擅长举办 CSS 培训，并且花费大量时间致力于世界上最 可访问的 CMS。