10个让css代码清晰的原则

《10个让css代码清晰的原则》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、10个让CSS代码清晰的原则1.保持代码井井有条永远不要随随便便地想到一个id、class就一股脑把代码写下去，这样写出来的代码非常难维护也不好扩展，所以应该先考虑如何组织结构更加清晰的CSS代码，以便更好地利用CSS继承的特性。记住，最常见的元素一定要先声明，再声明具体的某个元素。这样可以让让具体某个元素继承那些已经声明过的属性，也可以让你在需要的时候修改特定的属性。这种结构的CSS代码易于阅读，更符合逻辑结构。结构化编写CSS代码可以让自己以后能够轻松维护那些代码(或者让替你擦屁股的人松一口气)。可以参考下面这样的结构：reset链接、预定义类型总体布局二级布局表单

2、各种其他元素……2.标注代码作者、日期、其他重要信息在css代码的头部写明是谁写了这些代码，在什么时候，怎么联系上作者，特别是在制作模板和主题的时候。像这样的信息：注意图片中的示例颜色代码，多年来我发现列出一份CSS中用到的颜色示例代码并说明大概是什么颜色，在不管是最初编写颜色样式的时候还是以后可能会进行的改进都是极其有效地，至少可以再你打开取色器输入那些16进制颜色代码的之前可以让你有个大概的印象，或者可以在需要改变颜色的时候提供快速的参考。3.制作样式库一旦你的CSS代码保持相对良好的结构的时候，你可以把那些最经常使用的代码独立出来作为一个库来不断复用。你可以为不同

3、的用途制作相应的版本，比如一个两栏布局的样式，一个博客主题、用来打印的样式等等。如果你要为每个相同或者类似样式规则的页面重新编写各自的CSS代码，你肯定会疯掉。4.使用通用的命名规范你可能注意到可第一点提到的CSS代码中的声明了两个ID：col-alpha、col-beta，为什么不把他们命名成：col-left、col-right?我们要考虑将来可能的需求变更。明年你可能就需要把现在网站中的左边那一块放到右边去，你不需要为重命名HTML中的相关元素，也不需要为了变换一个元素的位置去改变样式表中的那个对应的id。你也可以把左边的元素移到右边，然后保留它原来的id：col

4、-left，但是问题出在哪里?如果这个id的样式让元素呆在左边，有人希望它就应该一直呆在左边，这样就不没给你太多的空间去改变它的位置。css的一个主要的有点就是能把样式和内容分离，重新设计站点的时候你只需要稍微修改一下你的样式代码而无须去修改html代码，所以不要在css中使用有特定环境限制的命名方式，应该始终如一地使用更为通用的命名规则。不要在CSS中使用那些有特定表意命名(比如位置,颜色之类的)，用.link-blue来标示蓝色的连接或许不错，但是当客户要你把链接颜色改为橙色的时候，你要去修改链接的class呢还是把.link-blue里的color改为orange

5、?不要让自己的命名规范把自己的手脚束缚了。语义化命名，而不是为表现命名，举个例子.comment-blue来的比.comment-beta不通用，.post-largefont也比.post-title使用起来更受限制。5.使用连接符而不是下划线因为有的一些老的浏览器不支持下划线，为了某种意义上的向后兼容，改掉你使用下划线(_)的习惯，用连接符(-)来代替.6.不要重复造轮子把有相同属性的元素归为一组，以便可以重复利用那些相同属性。比如h1和h2的都有相同的字体、颜色、margin，你就应该这么写：特别主要想margin、padding等属性都有相应的简写形式。当然你要

6、理解这样写代表样式属性顺序。7.优化CSS代码掌握了上面的原则已经可以减少CSS代码的大小，代码量越少载入速度就越快，也越方便维护。把那些不需要的代码通通切掉，能归为一组的都写在一起，使用别人封装的CSS库时特别要注意，因为你可能在自己的代码中继承了很多根本用不着的属性。还有一点，不用为0px,0em等加上单位。8.先编写Gecko下的基本样式，再去考虑兼容webket和IE为了解决最然让人头痛的浏览器问题，你可以先在firefox下编写调试出最基础的样式代码，然后在其他核心的浏览器(比如webket、IE)做一点修改即可，因为在firefox下运行良好的代码一般在其他

7、浏览器下是不会有太大问题的。9.验证你的CSS要充分利用W3C’sfreeCSSvalidator.如果在遇到问题的时候(比如你写的布局代码没有效果)一片茫然的时候，这东西可以帮你大忙。10.保持代码整洁通过javascript、后台控制、条件注释等手段把那些为了实现特定浏览器效果而编写的CSS独立出来，就避免了那些可恶的hack代码，这样就可以让最基本的CSS保持整洁，便于管理。11、常用的CSS命名规范模块：module.css基本共用：base.css布局、版面：layout.css主题：themes.css专栏：columns.c