关注前端开发微信微信号web007007

4条小建议整理你的CSS

作者 管理员 发布时间 2012-09-13 21:21 文章分类 DIV&CSS 文章评论 2条评论 阅读次数

长期写网站css,尤其是大型网站的人应该都有一个体会,就是希望把css更有条理、有组织的写出来。让自己的css更加标准化。这样不但方便查看,尤其是在网站做进一步拓展开发时,显的尤为重要,减少很多开发工时,也将更便捷。

今天看了一篇相关的国外文章,里面举了一些方法很实用,结合国内的实际情况,整理了一下,来跟大家分享,希望能帮到大家规整化自己的css。有更好建议的朋友也欢迎指出,共同进步。

1. 将css模块组织化

这条建议可能是最实用的一个,可以运用于任何css的形式。例如:


#main_side {
 width: 392px;
 padding: 0;
 float: right; }

#main_side #featured_articles {
 background: #fff; }

#main_side #frontpageads {
 background: #fff;
 margin: 8px 0; }

这种结构可以很容易的定义出页面区域和它们之间的关系,如父子、同级。另外,这种结构也同样可以用于设定一些特殊的样式,即使它的基本元素是没有样式的,例如下面的h2元素:


h2 { }

#snapshot_box h2 {
 padding: 0 0 6px 0;
 font: bold 14px/14px “Verdana”, sans-serif; }

#main_side h2 {
 color: #444;
 font: bold 14px/14px “Verdana”, sans-serif; }

.sidetagselection h2 {
 color: #fff;
 font: bold 14px/14px “Verdana”, sans-serif; }

2. 将css样式表根据功能不同分为专门的区块

区块间用标记分隔开,这样你就可以快速找到你想找的区域。当然在你划分之前,要对整体有个大概的了解,划分成你容易理解的合理区块,下面是一个例子:

  • Global Styles – (body, paragraphs, lists, etc)
  • Header
  • Page Structure
  • Headings
  • Text Styles
  • Navigation
  • Forms
  • Comments
  • Extras

下面是一个分明显的分隔线,你也可以做出你喜欢的分隔线。

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

3. 基础规则样式只写一次

这一点相对来说可能不那么容易。定义每个基础规则样式时只定义一次,保证后面再出现相同规则时不用重复定义。例如,如果你知道所有的h2样式都没有padding和margin,那就把这个定义的到顶部的h2{ }样式里,让后面的h2都继承这个样式。这个建议在设计者频繁改动文字颜色或非结构性改动时十分必要。

4. 尽量把能简化的样式简化写

这点实现起来比较容易,很多人也都是这样做的,再啰嗦一次好了。例如:

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 ;

本文固定链接: http://www.web92.net/707.html | WEB前端开发

该日志由 于2012年09月13日发表在 DIV&CSS 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 4条小建议整理你的CSS | WEB前端开发
关键字: