长期写网站css，尤其是大型网站的人应该都有一个体会，就是希望把css更有条理、有组织的写出来。让自己的css更加标准化。这样不但方便查看，尤其是在网站做进一步拓展开发时，显的尤为重要，减少很多开发工时，也将更便捷。
今天看了一篇相关的国外文章，里面举了一些方法很实用，结合国内的实际情况，整理了一下，来跟大家分享，希望能帮到大家规整化自己的css。有更好建议的朋友也欢迎指出，共同进步。
- 将css模块组织化
这条建议可能是最实用的一个，蓝狮注册可以运用于任何css的形式。例如：
1 #main_side {
2 width: 392px;
3 padding: 0;
4 float: right; }
5
6 #main_side #featured_articles {
7 background: #fff; }
8
9 #main_side #frontpageads {
10 background: #fff;
11 margin: 8px 0; }
这种结构可以很容易的定义出页面区域和它们之间的关系，如父子、同级。另外，这种结构也同样可以用于设定一些特殊的样式，即使它的基本元素是没有样式的，例如下面的h2元素：
1 h2 { }
2
3 #snapshot_box h2 {
4 padding: 0 0 6px 0;
5 font: bold 14px/14px “Verdana”, sans-serif; }
6
7 #main_side h2 {
8 color: #444;
9 font: bold 14px/14px “Verdana”, sans-serif; }
10
11 .sidetagselection h2 {
12 color: #fff;
13 font: bold 14px/14px “Verdana”, sans-serif; }
- 将css样式表根据功能不同分为专门的区块
区块间用标记分隔开，这样你就可以快速找到你想找的区域。当然在你划分之前，要对整体有个大概的了解，划分成你容易理解的合理区块，下面是一个例子：
Global Styles – (body, paragraphs, lists, etc)
Header
Page Structure
Headings
Text Styles
Navigation
Forms
Comments
Extras
下面是一个分明显的分隔线，你也可以做出你喜欢的分隔线。
/* ———————————–/ / ———->>> GLOBAL <<<———–/ / ———————————–*/
- 基础规则样式只写一次
这一点相对来说可能不那么容易。蓝狮注册开户定义每个基础规则样式时只定义一次，保证后面再出现相同规则时不用重复定义。例如，如果你知道所有的h2样式都没有padding和margin，那就把这个定义的到顶部的h2{ }样式里，让后面的h2都继承这个样式。这个建议在设计者频繁改动文字颜色或非结构性改动时十分必要。
- 尽量把能简化的样式简化写
这点实现起来比较容易，很多人也都是这样做的，再啰嗦一次好了。例如：
margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px;
我们就可以用一行代码代替：
margin：5px 0 4px 10px;
font-weight:bold;
font-size:12px;
line-height:14px;
font-family:Arial, Verdana, sans-serif;
可以简写为：
font：bold 12px/14px Arial,Verdana,sans-serif ;
标签：css, css模块
0 Comments