如何写出优雅规范的css代码的几条建议

投稿  雅兮网 2017-02-16 07:24 阅读 113 次 评论 29 条
摘要:

css代码规范书写对于后期维护升级有重要作用,本文给出几条建议,帮助初入门的朋友快速学会如何书写优雅规范的css代码。

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:

如何写出优雅规范的css代码的几条建议 建站经验 第1张

1. 使用Reset但并非全局Reset

不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:

  1. *{ margin:0; padding:0; }

这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同,Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:

  1. /** 清除内外边距 **/
  2. body, h1, h2, h3, h4, h5, h6, hr, p,
  3. blockquote, /* structural elements 结构元素 */
  4. dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
  5. pre/* text formatting elements 文本格式元素 */
  6. form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
  7. th, td, /* table elements 表格元素 */
  8. img/* img elements 图片元素 */{
  9. border:medium none;
  10. margin: 0;
  11. padding: 0;
  12. }
  13. /** 设置默认字体 **/
  14. body,button, input, select, textarea {
  15. font12px/1.5 '宋体',tahoma, Srial, helveticasans-serif;
  16. }
  17. h1, h2, h3, h4, h5, h6 { font-size: 100%; }
  18. em{font-style:normal;}
  19. /** 重置列表元素 **/
  20. ul, ol { list-stylenone; }
  21. /** 重置超链接元素 **/
  22. a { text-decorationnonecolor:#333;}
  23. a:hover { text-decorationunderlinecolor:#F40; }
  24. /** 重置图片元素 **/
  25. img{ border:0px;}
  26. /** 重置表格元素 **/
  27. table { border-collapsecollapseborder-spacing: 0; }

2. 良好的命名习惯

无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。就像这样的代码:

  1. .aaabb{margin:2px;color:red;}

我想即使是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:

  1. <h1>My name is <span>Wiky</span></h1>

问题在于如果你需要把所有原本红色的字体改成蓝色,那修改后就样式就会变成:

  1. .red{color:bule;}

这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以,请不要使用元素的特性(颜色,位置,大小等)来命名一个class或id,您可以选择意义的命名如:#navigation{…},.sidebar{…},.postwrap{…}

这样,无论你如何修改定义这些class或id的样式,都不影响它跟HTML元素间的联系。

另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚刚说的那种情况,如

  1. .alignleft{float:left;margin-right:20px;}
  2.  .alignright{float:rightright;text-align:rightright;margin-left:20px;}
  3.  .clear{clear:both;text-indent:-9999px;}

那么对于这样一个段落

  1. <p class="alignleft">我是一个段落!</p>

如果需要把这个段落由原先的左对齐修改为右对齐,那么只需要修改它的className就为alignright就可以了。

3. 代码缩写

CSS代码缩写可以提高你写代码的速度,精简你的代码量。在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您学会了代码缩写,原本这样的代码:

  1. li{
  2. font-family:ArialHelveticasans-serif;
  3. font-size: 1.2em;
  4. line-height: 1.4em;
  5. padding-top:5px;
  6. padding-bottom:10px;
  7. padding-left:5px;
  8.  }

就可以缩写为:

  1. li{
  2. font: 1.2em/1.4em ArialHelveticasans-serif;
  3. padding:5px 0 10px 5px;
  4.  }

如果您想更了解这些属性要怎么缩写,可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。

4. 利用CSS继承

如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:

  1. #container li{ font-family:Georgia, serif; }
  2. #container p{ font-family:Georgia, serif; }
  3. #container h1{font-family:Georgia, serif; }

就可以简写成:

  1. #container{ font-family:Georgia, serif; }

5. 使用多重选择器

你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如:

  1. h1{ font-family:ArialHelveticasans-seriffont-weight:normal; }
  2. h2{ font-family:ArialHelveticasans-seriffont-weight:normal; }
  3. h3{ font-family:ArialHelveticasans-seriffont-weight:normal; }

可以合并为

  1. h1, h2, h3{ font-family:ArialHelveticasans-seriffont-weight:normal; }

6. 适当的代码注释

代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。你可以选择做的样式表的开始添加目录:

  1. /*------------------------------------
  2. 1. Reset
  3. 2. Header
  4. 3. Content
  5. 4. SideBar
  6. 5. Footer
  7. ----------------------------------- */

如此你代码的结构就一目了然,你可以容易的查找和修改代码。

而对于代码的主内容,也应适当的加以划分,甚至在有必要的地方在对代码加以注释说明,这样也有利于团队开发:

  1. /*** Header ***/
  2.  #headerheight:145pxposition:relative; }
  3.  #header h1{ width:324pxmargin:45px 0 0 20pxfloat:leftheight:72px;}
  4.  /*** Content ***/
  5.  #content{ background:#fffwidth:650pxfloat:leftmin-height:600pxoverflow:hidden;}
  6.  #content h1{color:#F00}/* 设置字体颜色 */
  7.  #content .posts{ overflow:hidden; }
  8.  #content .recent{ margin-bottom:20pxborder-bottom:1px solid #f3f3f3position:relativeoverflow:hidden; }
  9.  /*** Footer ***/
  10.  #footerclear:bothpadding:50px 5px 0; overflow:hidden;}
  11.  #footer h4{ color:#b99d7ffont-family:ArialHelveticasans-seriffont-size:1.1em; }

7. 给你的CSS代码排序

如果代码中的属性都能按照字母排序,那查找修改的时候就能更加快速:

  1. /*** 样式属性按字母排序 ***/
  2. div{
  3. background-color:#3399cc;
  4. color:#666;
  5. font:1.2em/1.4em ArialHelveticasans-serif;
  6. height:300px;
  7. margin:10px 5px;
  8. padding:5px 0 10px 5px;
  9. width:30%;
  10. z-index:10;
  11.  }

8. 保持CSS的可读性

书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。

  1. /*** 每个样式属性写一行 ***/
  2. div{
  3. background-color:#3399cc;
  4. color:#666;
  5. font: 1.2em/1.4em ArialHelveticasans-serif;
  6. height:300px;
  7. margin:10px 5px;
  8. padding:5px 0 10px 5px;
  9. width:30%;
  10. z-index:10;
  11.  }
  12.  /*** 所有的样式属性写在同一行 ***/
  13. div{ background-color:#3399cccolor:#666font: 1.2em/1.4em ArialHelveticasans-serifheight:300pxmargin:10px 5pxpadding:5px 0 10px 5pxwidth:30%; z-index:10; }

当对于一些样式属性较少的选择器,我会写到一行:

  1. /*** 选择器属性少的写在同一行 ***/
  2. div{ background-color:#3399cccolor:#666;}

对于这个规则并非硬性规定,但无论您采用哪种写法,我的建议是始终保持代码一致。属性多的分行写,属性少于3个可以写一行。

9. 选择更优的样式属性值

CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如

区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。

而border:none把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。所以建议使用border:none;

同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。

10. 使用代替@import

首先,@import不属于XHTML标签,也不是Web标准的一部分,它对于较早期的浏览器兼容也不高,并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计:不要使用@import》。所以,请避免使用@import

11. 使用外部样式表

这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以,在实际应用中,没有必要把CSS代码内置在HTML文档中:

  1. <style type="text/css" >
  2.  #container{ .. }
  3.  #sidebar{ .. }
  4.  </style>

  1. <li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是使用<link>导入外部样式表:

  1. <link rel="stylesheet" type="text/css" href="css/styles.css" />

12. 避免使用CSS表达式(Expression)

CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:

  1. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以,在非不得已,请避免使用CSS表达式。

13. 代码压缩

当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具

利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。

14. 总结

在本文中,我力图更详尽的总结书写更高效的CSS代码的原则,但鉴于本人见识和精力有限,我还是希望这些原则能帮助您更好的书写和管理您的CSS代码,不知您又是如何书写CSS的,是否也有一些想要分享的技巧?给我留言吧谢谢~

赞赏作者

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,   ,  
原文地址:http://www.iyaxi.com/2017-02-06/1261.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana

发表评论


表情

  1. 明月登楼的博客
    明月登楼的博客 【总理】 @回复

    CSS那繁杂的代码彻底的把我大败了!

  2. 南通SEO
    南通SEO 【村长】 @回复

    我也算是个码盲,所以好比在看天书。
    就整体现在的建站环境来说,会改代码就ok了。所以说基础的东西还是要会一点的,不然无从下手

  3. 风阿觉
    风阿觉 【村长】 @回复

    值得参考。

  4. 姜辰
    姜辰 【市长】 @回复

    滴,姜辰卡~已经学习~~

  5. 杭州SEO优化
    杭州SEO优化 【镇长】 @回复

    不错 学前端很实用

  6. 旭博客
    旭博客 【村长】 @回复

    滴。学生卡

  7. 锅子
    锅子 【农民】 @回复

    这个不错.正好最近在学前端

  8. 明月登楼的博客
    明月登楼的博客 【总理】 @回复

    CSS看着都好复杂呀!看来我是不指望学会他了!

  9. 西狂
    西狂 【镇长】 @回复

    干货,好文

  10. 小萝博客
    小萝博客 【县长】 @回复

    看的头大

  11. 我要网赚
    我要网赚 【市长】 @回复

    这个可以有

  12. 爱资讯网
    爱资讯网 【队长】 @回复

    感谢分享

  13. 夏天烤洋芋
    夏天烤洋芋 【县长】 @回复

    我原来看过别人弄的html 代码。我都头大。

  14. 明月登楼
    明月登楼 【总理】 @回复

    不错,好专业的感觉!

  15. 玉满斋
    玉满斋 【市长】 @回复

    路过留个脚印支持一下!

  16. 赚钱铺
    赚钱铺 【农民】 @回复

    学习了。。。。。

  17. 码农BTS
    码农BTS 【市长】 @回复

    写代码没有一个好的习惯是不行的

  18. 何先生
    何先生 【农民】 @回复

    看来有空也得好好规范一下自己的css了。。

  19. 免费会员电影
    免费会员电影 【镇长】 @回复

    按规范来,绝对没有错

  20. 爱时尚
    爱时尚 【省长】 @回复

    代码高效整洁也是很重要的,这就涉及到了代码优化

  21. 靠谱学生兼职网
    靠谱学生兼职网 【市长】 @回复

    css我确实太弱太弱了。

  22. 橘子书
    橘子书 【县长】 @回复

    其实,对于初学者来说,能够将css里面的每个代码逐渐认遍才是最主要的。至于规范,是在这个基础上来的。比如padding:上 右 下 左。知道的人可以将它们拆开为padding-top等,但不知道的人,到时候想要调整样式,就会摸不着头脑。

    • 雅兮网
      雅兮网 【省长】2017-02-16 09:50  回复

      @橘子书css属性的学习必然是入门的基础,搭配上相应的书写规范,能够让整个样式表简洁高效、可读性强、灵活可维护。

  23. 小C博客
    小C博客 【县长】 @回复

    我写css,就是想哪写哪,直接在样式下面追加,导致很多冗余!

  24. 阅乎之
    阅乎之 【村长】 @回复

    学到了很多,谢谢博主!

  25. 金榜台博客
    金榜台博客 【市长】 @回复

    这建议不错

  26. Koolight
    Koolight 【省长】 @回复

    不明觉厉。