CSS样式表的规划与组织
CSS样式表的规划与组织文章列表
1：《CSS样式表的规划与组织》
2：《CSS样式表的规划与组织(续)_关于@import样式表规则》
3：《CSS样式表的规划与组织再续_一套确实可行的方案实例》
如果你的工作过程中遇到以下问题，那么请你阅读此文章。
1：样式表文件里面的代码混乱，随着项目的进展，样式表里面的先有代码不敢做任何改变，因为连自己也不知道改了以后会给现有项目造成什么影响。更不敢删除。因为连自己都不知道此处的样式到底什么地方用到了。
2：样式表文件体积增大，一个页面即使没有用到多数的样式，但仍然只能引用所有的样式，导致页面的加载缓慢。
3：样式表文件里面的代码，就像意大利面条（为什么一定要像意大利的面条？），或者就像中国的兰州拉面。所有的选择器类型全部混在一起。甚至出现很多上下的重复和不一致。
4：其他的一些CSS导致的问题。
的确，随着web标准的实施，CSS的分量逐渐增大。甚至一些原本有JavaScript处理的部分也由CSS来处理（例如一些图片的翻转替换等）。随之而来的是css文件代码的急剧增长。原本就存在的css代码管理混乱问题日益加剧。如何更好的规划、组织样式表显的日益重要。今天，请允许我在此抛块砖，希望更多的人有更好的方法来解决CSS样式表的规划与组织问题。
一：分开模板级的与页面级的
无论是DreamWeaver的template模板还是Microsoft Visual Studio 200X系列的MasterPage，现在应该没有人不用模板建站了吧。不然网页的一致性与批量更新等问题足以让一个满怀热情的人烦死。
把通用的和模板才用到的所有样式放到一个模板级的样式表文件里面将是一个比较好的做法。模板级的样式表一个主题（Theme）只能有一个。我们不防先命名为template.css或者MasterPage.css。这里面放一些通用选择器和常用选择器。这些样式无论哪一个页面都会使用到。所以我们直接从模板文件里面引用。用<link rel="stylesheet" type="text/css" href="css/MasterPage.css" media="screen"/>语句来引用。
MasterPage.css示例如下：
*{
margin:0px;
padding:0px;
font-size: 9pt;
}
BODY {
color:black;
}
LEGEND
{
margin-left:5px;
padding-left:2px;
}
A:link {
COLOR: #003366; BORDER-BOTTOM: #003366 0px solid; TEXT-DECORATION: none
}
A:visited {
COLOR: #003366; BORDER-BOTTOM: #003366 0px solid; TEXT-DECORATION: none
}
A:hover {
COLOR: #003366; BORDER-BOTTOM: #003366 0px dotted; TEXT-DECORATION: none
}
A:active {
COLOR: #003366; BORDER-BOTTOM: #003366 0px solid; TEXT-DECORATION: none
}
页面级的样式表单独放到一个页面级样式表中。页面级的样式表会可以允许有多个。几个相似页面共用一个页面级的样式表。只有在页面上才引用。引用方法如下：在head之间添加类似的如下代码。
<style type="text/css">
<!--
@import url(css/Page100X.css);
-->
</style>
页面级样式表示例如下：
.divBlock {
clear: both;
position: relative;
float: left;
}
.divBlock div{
position: relative;
float: left;
}
.btn2 {
width: 6em;
}
#buttonarea{
float:right;
position:relative;
clear:left;
margin:-3px 5px 7px 0;
padding-right:0px;
}
如果哪个页面甚至还有更特别而不通用的样式表，我们甚至可以为它单独建立一个样式表文件，只在那个页面上引用。引用方法页面级样式表。
<style type="text/css">
<!--
@import url(css/Page100X.css);
@import url(css/special.css);
-->
</style>
让我们看看我的一个示例图，也许能更好的理解。
当我们的页面没有应用任何样式的时候，显示如下图：
全部都是系统默认的样式。所有标签从上至下排列。
当面仅仅应用了模板级的样式时，显示如下图：
外面的通用的部分已经应用了样式，但是页面级的标签仍然是系统默认的样式，页面级的标签从上至下排列。
最后我们讲模板级的样式和页面级的样式通用应用上，显示如下图：
至此，页面上的所有的标签都应用的样式。页面渲染成功。
二：为什么要这样做？
这样做的好处很明显，就是将不同等级的样式分离开来。这样你便能更好的掌握样式表的作用范围。避免以前的“改不敢改，删不敢删”的尴尬。 而且，因为有了等级的概念，便能更好的定位于样式。方便你的查找。
三：别忘了打印样式表也要这样做哦。
如果你的页面也用到了打印样式表，别忘了打印样式表也要如此处理哦。但是我们发现，打印样式表不能像屏幕样式表那样在页面上引用不同的样式表文件。其实要解决这个问题也很简单。只要打印样式表引用一个样式表，然后再在那个引用的样式表文件中引用不同的样式表文件就可以啦。示意图如下：
四：仍然需要完善
当然这只是理论上的分析，具体的实践中仍然会有很多的问题。例如，一个样式具体到底要放到怎样的样式表文件中，多个页面交叉使用的样式又该如何处理？这仍然需要我们的逐步完善。这里我只是抛砖，希望能引出大家更好的建议。关于此问题的讨论大家可以到我的博客上进行，以便于讨论的汇总。我的博客为：http://justinyoung.cnblogs.com，欢迎访问。
KeyWord:管理css,css管理,管理样式表,样式表管理,css规划,css组织，css样式表，web标准网站，web标准，web标准资料
