CSS 代码质量提高的10条实用技巧

时间：2016-02-07 17:20:13 阅读：240 评论：0 收藏：0 [点我收藏+]

回头去看自己写的CSS代码，你很容易就可以发现那些代码都乱成一团了，可能是因为你还没有规划好就开始马马虎虎虎地乱写一通，或者是你的代码夹杂了太多的Hack代码，还可能是因为那些代码改动太过频繁了。

       不管出于是什么原因，我们都应该认真考虑怎么写好CSS代码，让那些代码能够更加简洁、易于控制、易于维护。

参考下面这10点心得去实践可以让你不会再那么头痛CSS代码该怎么写。

1.保持代码井井有条
       永远不要随随便便地想到一个id、class就一股脑把代码写下去，这样写出来的代码非常难维护也不好扩展，所以应该先考虑如何组织结构更加清晰的CSS代码，以便更好地利用CSS继承的特性。

       记住，最常见的元素一定要先声明，再声明具体的某个元素。这样可以让让具体某个元素继承那些已经声明过的属性，也可以让你在需要的时候修改特定的属性。这种结构的CSS代码易于阅读，更符合逻辑结构。

       结构化编写CSS代码可以让自己以后能够轻松维护那些代码（或者让替你擦屁股的人松一口气）。可以参考下面这样的结构：

reset
链接、预定义类型
总体布局
二级布局
表单
各种其他元素……

2.标注代码作者、日期、其他重要信息
在css代码的头部写明是谁写了这些代码，在什么时候，怎么联系上作者，特别是在制作模板和主题的时候。像这样的信息：
技术分享

       注意图片中的示例颜色代码，多年来我发现列出一份CSS中用到的颜色示例代码并说明大概是什么颜色，在不管是最初编写颜色样式的时候还是以后可能会进行的改进都是极其有效地，至少可以再你打开取色器输入那些16进制颜色代码的之前可以让你有个大概的印象，或者可以在需要改变颜色的时候提供快速的参考。

3.制作样式库
       一旦你的CSS代码保持相对良好的结构的时候，你可以把那些最经常使用的代码独立出来作为一个库来不断复用。

       你可以为不同的用途制作相应的版本，比如一个两栏布局的样式，一个博客主题、用来打印的样式等等。如果你要为每个相同或者类似样式规则的页面重新编写各自的CSS代码，你肯定会疯掉。
技术分享

4.使用通用的命名规范
       你可能注意到可第一点提到的CSS代码中的声明了两个ID：col-alpha、col-beta，为什么不把他们命名成：col-left、col-right？我们要考虑将来可能的需求变更。

       明年你可能就需要把现在网站中的左边那一块放到右边去，你不需要为重命名HTML中的相关元素，也不需要为了变换一个元素的位置去改变样式表中的那个对应的id。

       你也可以把左边的元素移到右边，然后保留它原来的id：col-left，但是问题出在哪里？如果这个id的样式让元素呆在左边，有人希望它就应该一直呆在左边，这样就不没给你太多的空间去改变它的位置。

       css的一个主要的有点就是能把样式和内容分离，重新设计站点的时候你只需要稍微修改一下你的样式代码而无须去修改html代码，所以不要在css中使用有特定环境限制的命名方式，应该始终如一地使用更为通用的命名规则。

       不要在CSS中使用那些有特定表意命名（比如位置,颜色之类的），用.link-blue来标示蓝色的连接或许不错，但是当客户要你把链接颜色改为橙色的时候，你要去修改链接的class呢还是把.link-blue里的color改为orange？不要让自己的命名规范把自己的手脚束缚了。

       语义化命名，而不是为表现命名，举个例子.comment-blue 来的比.comment-beta不通用，.post-largefont也比 .post-title使用起来更受限制。

5.使用连接符而不是下划线
       因为有的一些老的浏览器不支持下划线，为了某种意义上的向后兼容，改掉你使用下划线（_）的习惯，用连接符(-)来代替.

6.不要重复造轮子
       把有相同属性的元素归为一组，以便可以重复利用那些相同属性。比如h1 和h2的都有相同的字体、颜色、margin，你就应该这么写：
技术分享

特别主要想margin、padding等属性都有相应的简写形式。
技术分享

当然你要理解这样写代表样式属性顺序。

7.优化CSS代码
       掌握了上面的原则已经可以减少CSS代码的大小，代码量越少载入速度就越快，也越方便维护。

       把那些不需要的代码通通切掉，能归为一组的都写在一起，使用别人封装的CSS库时特别要注意，因为你可能在自己的代码中继承了很多根本用不着的属性。还有一点，不用为0px,0em等加上单位。

8.先编写Gecko下的基本样式，再去考虑兼容webket和IE
       为了解决最然让人头痛的浏览器问题，你可以先在firefox下编写调试出最基础的样式代码，然后在其他核心的浏览器（比如webket、IE）做一点修改即可，因为在firefox下运行良好的代码一般在其他浏览器下是不会有太大问题的。

9.验证你的CSS
       要充分利用W3C’s free CSS validator.如果在遇到问题的时候（比如你写的布局代码没有效果）一片茫然的时候，这东西可以帮你大忙。

10.保持代码整洁
       通过javascript、后台控制、条件注释等手段把那些为了实现特定浏览器效果而编写的CSS独立出来，就避免了那些可恶的hack代码，这样就可以让最基本的CSS保持整洁，便于管理。

原文：10 Best CSS Practices to Improve Your Code

CSS 代码质量提高的10条实用技巧

原文：http://www.jb51.net/css/16489.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)