CSS代码规范

Posted Miku灬Rua

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS代码规范相关的知识,希望对你有一定的参考价值。


聊骚


又一段时间没有写推文了,并不是我没有时间,而是我把时间都花在了我刚搭的博客上啦,有兴趣的小伙伴可以来我博客看技术文哒。最近写了很多新文章,都在博客上,欢迎光临!~


今天写的这篇推文同样已经收录到我的博客中了~


我的博客:my.mikublog.xyz


简介


代码格式同样属于规范的一部分,作为一名优秀的前端程序员,就得好好学习如何提高代码的可读性和可维护性~



规范




小写


选择器、属性以及其值都使用小写




单行定义样式


 1<style>
2
3    .m-list {position:relative;height:30%;text-align:center;}
4
5    @media all and (min-width:0) and (max-width:767px) {
6        html {font-size:67.5%;}
7        body {opacity:0.8;}
8    }
9
10</style>


顾名思义,代码写在一行,这样更简洁清晰~



属性值分号结尾



一般最后一个属性值可以省略分号,不过加上分号不容易出错~




0时省略单位


属性值为0的时候就可以不用加上单位了,这样可以省略一些不必要的字母


1<style>
2
3    .count{width:0;height:700px;}
4
5</style>



十六进制表示颜色值



除非使用rgba增加透明度,颜色一般都用十六进制表示~




值缩写


通过缩写属性值可以减少


1<style>
2
3    .count{width:100px;height:100px;margin:0 0 0 0;/*值缩写*/}
4
5</style>



选择器合并


如果多个元素有相同的样式,那么将选择器写到一起并用逗号隔开


1<style>
2
3    .m-list1,.m-list2,.m-list3,.m-list4{width:100px;height:100px;margin:0 0 0 0;/*值缩写*/}
4
5
</style>



属性顺序


先布局属性、接着为自身属性、最后到文本属性~


1<style>
2
3    .count{position:relative;left:0;top:0;/*布局属性*/width:100px;height:100px;/*自身属性*/text-align:center;/*文本属性*/}
4
5
</style>



使用单引号


省略url中的引号,其他需要引号的地方使用单引号~


1<style>
2
3    .count {background:url(http://xxx.com/xxx.jpg)}
4
5    .count:before {content:''}
6
7
</style>



私有在前,标准在后


带有浏览器私有标志的放在前面,然后是W3C标准的~


1<style>
2
3    .count{-webkit-box-shadow:0 0 0 #000;position:relative;left:0;top:0;/*布局属性*/width:100px;height:100px;/*自身属性*/text-align:center;/*文本属性*/}
4
5
</style>



注释


一般使用的是块级注释,注释一般写在注释对象的上一行,而行内注释写在对应属性的分号后~


1<style>
2
3    /*给类为count赋上属性*/
4
5    .count{position:relative;left:0;top:0;/*布局属性*/width:100px;height:100px;/*自身属性*/text-align:center;/*文本属性*/}
6
7
</style>



减少js对CSS的直接修改


最后提醒一下:能用CSS写的就不要用js去写。当然也可以结合CSS和js,如:提前写好一个类的样式,然后通过js给DOM元素增加类从而增加对该元素的样式。


 1<style>
2
3    /*给类为count赋上属性*/
4
5    .count{position:relative;left:0;top:0;/*布局属性*/width:100px;height:100px;/*自身属性*/text-align:center;/*文本属性*/}
6
7
</style>
8
9<body>
10
11    <div></div>
12
13</body>
14
15<script>
16
17    //获取该元素并为其增加类
18    document.querySelector("div").className = "count"
19
20
</script>



总结



结合上述所说的去规范自己,就能写上漂漂亮亮的CSS代码啦~




关注不吃亏



以上是关于CSS代码规范的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

CSS代码片段