欢迎访问畅维网络官网,我们将为您提供专业的网站建设服务!
咨询电话:0531-88162305 QQ:点击这里给我发消息
当前位置:首页 > 网站学院 > 网站技术

4条小建议整理你的CSS

长期写网站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 ;

(编辑:济南网站建设、济南网站建设公司:畅维网络)

鲁公网安备 37010502000788号

  • 扫一扫,关注微信公众号