css代码怎么做才能高效整洁

171 阅读1分钟

1.代码命名规范化,不使用杂乱无章的命名,做到见名知意

如果你命名太过于简单使用字母命名,如“a,b,c”等,时间长了,很容易忘记该命名代表的板块是哪一部分,不利于后期维护

2.代码缩写

代码缩写可以提高你写代码的速度,精简你的代码量。在css里面有不少可以缩写的属性,包括margin、padding、border、font、background等

3.利用css的继承性

css遵循父子级的继承,这样可以减少过多的命名,如 #box li{color:red;}这样便对id为#box后面li元素进行了颜色的改变

4.使用多重选择器

如果多个元素的样式是一样的,那么可以合写在一起 例:

h1{float:left;color:red}

h2{float:left;color:red}

h3{float:left;color:red}

合写为h1,h2,h3{float:left;color:red}

5.注释

代码的注释非常重要,可以将不同的板块分别注释开,方便下次寻找

6.引用外部样式表

写在外部的CSS文件更加的便于维护,而且CSS文件能在浏览器中产生缓存。内置在文档中的则会在每次请求中随文档重新下载。所以,在实际应用中,没有必要把代码内置在HTML文档中

7.css书写的上下结构

写在下面的CSS代码会优先被读取,所以要注意一下CSS代码的命名和上下结构,避免写在下面的CSS样式影响到上面书写的CSS代码

——————个人理解,如有不对,欢迎纠错——————