编写高质量的CSS代码，规范建议

最新推荐文章于 2024-09-13 20:22:34 发布

weixin_30919235

最新推荐文章于 2024-09-13 20:22:34 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rentj1/archive/2012/06/06/2538639.html

本文分享了在CSS中实现高效、清晰布局的技巧，包括id和class命名规范、属性书写顺序、避免副作用等，旨在提升网页加载速度与用户体验。

网上收集整理的一些比较好建议

id和class的命名在保持语义性的同时尽可能的短.
       不推荐的写法：#navigation {} .atr {}
       推荐的写法： #nav {} .author {}
        可以缩写单词，但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。
       参考链接： http://www.36ria.com/5249

属性书写顺序,首先定义显示属性
       推荐的写法：.selector{float:left;width:300px;height:200px; font-size:14px;color:#f36;}
       不推荐的写法：.selector{font-size:14px; color:#f36; float:left; width:300px; height:200px;}
      这样，就可以从CSS 规则中靠前的定义获得显示版式。框架为先，细节次之比如写一个浮动容器的样式，我们应该先让这个容器的框架被渲染出来，让大家看到基本的网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的，写在后面。
      参考链接：
           http://www.qianduan.net/css-code-readable-tips.html
           http://code.google.com/p/mappn/issues/detail?id=1
           http://aliceui.com/css-spec/

属性书写顺序，有因才有果
      不推荐的写法： span{ margin-bottom:10px; display:block; }
      推荐的写法： span{ display:block; margin-bottom:10px; }
      如果想让一个 span 使用 margin, 那么我们应该这样写:span{display:block;margin-bottom:10px;} 而非 span{margin-bottom:10px;display:block;}。因为没有 display 之前，行内元素是没有 margin 的。
      参考链接：http://aliceui.com/css-spec/

其他....

转载于:https://www.cnblogs.com/rentj1/archive/2012/06/06/2538639.html