zoukankan      html  css  js  c++  java
  • CSS样式表优化

      前几天公司要模仿一家客户的网站模板来为另一客户新建一个模板,说白了就是换个数据源,然后样式表再小修小改一下就行了。但通过浏览器控制台下载素材时,发现这个网站开发的挺专业的,单就样式表而言,代码工整,注释清楚,给人的感觉就是‘这样式表看起来挺漂亮的’。而相比之下,我们公司的样式表就挺恶心了,但是好的东西就要学,所谓它山之石可以攻玉。

      我们一点点看,这个人家2年前就写好的样式表有哪些值得学习的地方。

      1、时间戳和签名

    /* 
     * ---------------------------------------------
     * website		:潍坊商业学校
     * filename		:default.css
     * revision		:1.0
     * createdate		:2012-07-02
     * author		:lc
     * description		:default.css
     * ---------------------------------------------
     */

      我觉得肯花时间来写时间戳和签名的人,在其他需要注释的地方也不会偷工减料

      2、使用单行模式格式化CSS 

      所谓单行模式就是将原来多行的描述

      #top_back
      {
        1015px;
        height:32px;
        margin:0 auto;
        background: url(../images/homes/top_back.jpg) repeat-x;
      }

      通过精简工具,格式化成为一行#top_back{ 1015px; height:32px; margin:0 auto; background: url(../images/homes/top_back.jpg) repeat-x; },也许我这样写你看不出来效果,但你可以想象一下,一个样式表统一都用多行进行描述,那在快速浏览时会多么的头疼。

      推荐一个CSS在线格式化工具:CSSTidy

      3、清晰的组织结构

      使用注释来标识不同的区块,将会使你的样式表更加整洁、有条理

    * { margin: 0; padding: 0; }
    body { font: 12px "宋体", Verdana, Arial, sans-serif; background: #eeeeee; }
    ul { list-style-type: none; }
    a { text-decoration: none; color: #000; }
    img { border: none; }
    table { border-collapse: collapse; }
    /* 常用类 */
    .floatLeft { float: left; }
    .floatRight { float: right; }
    .clearFloat { clear: both; }
    .alignRight { text-align: right; }
    .alignCenter { text-align: center; }
    ... ...
    /*****************************顶部按钮****************************************/
    ... ...
    /*****************************头部****************************************/
    ... ...

      4、类特征值的命名规则

      避免使用颜色,例如left-blue(包括颜色名称和十六进制值或者宽度,高度的尺寸值),同时你也尽量的避免去使用任何表明表现形式的值,例如box,要不然将表现和内容分离的意义也就不复存在了。推荐的命名规则:.product-description { color: #369; }

      5、id特征值的命名规则

      id特征值的命名时,应该更加严谨,因为你的命名可能会影响到后台程序员调用。另外注意,命名要有层次感,例如嵌套层的时候使用如下命名规则,那我们就算不看html代码也能大概猜出特征值要描述的元素。

    #focus { width: 340px; height: 261px; float: left; overflow: hidden; }
    #focus01 { padding: 30px 15px 4px 25px; width: 300px; height: 227px; }
    #focus02 { width: 300px; height: 227px; overflow: hidden; }
    
    或者
    
    #focus { width: 340px; height: 261px; float: left; overflow: hidden; }
    #focus_left { padding: 30px 15px 4px 25px; width: 300px; height: 227px; }
    #focus_right { width: 300px; height: 227px; overflow: hidden; }
  • 相关阅读:
    [文摘20080731]小破孩的婚姻
    Response.Redirect和Server.Transfer(Execute)的区别小论集锦
    学习FotoVision 进行C# colorMatrix 对图片的处理 : 亮度调整 抓屏 翻转 随鼠标画矩形
    [转]通过分区(Partition)提升MySQL性能
    [书目20080829]软件测试技术经典教程
    [转]c# + mysql + 事务处理(转载于 《C#数据库事务原理及实践》)
    遭遇 VS 的 无法调试引用的类库项目(DLL)问题(生成下面的模块时,启用了优化或没有调试信息)
    [转]C#动态生成文字图片
    命令行 SC命令 及通过sc config 更该windows服务的启动类型等
    [转]flash 与 js 通讯方法
  • 原文地址:https://www.cnblogs.com/ccweb/p/3613534.html
Copyright © 2011-2022 走看看