编写现代 CSS 代码的 20 个建议

15px;    color:#505050;} td{    border:1pxsolid#505050;    padding:10px;}

2472698196-57ced1090b687_articlex

这里存在的问题是出现了很多的重复的边,会导致视觉上不协调的情况,那么我们可以通过设置border-collapse:collapse来进行处理:
2919922177-57ced1090db24_articlex

注释格式优化

CSS虽然谈不上一门编程语言但是其仍然需要添加注释以保障整体代码的可读性,只要添加些简单的注释不仅可以方便你更好地组织整个样式表还能够让你的同事或者未来的自己更好地理解。对于CSS中整块的注释或者使用在Media-Query中的注释,建议是使用如下形式:

CSS12345/*---------------    #Header---------------*/header {}header nav {}/*---------------    #Slideshow---------------*/.slideshow {}

而设计的细节说明或者一些不重要的组件可以用如下单行注释的方式:

CSS1234/*  Footer Buttons  */.footer button {} .footer button:hover {}

同时,不要忘了CSS中是没有//这种注释方式的:

CSS1234567/*  Do  */p {    padding:15px;    /*border: 1px solid #222;*/}/*  Don't  */p {    padding:15px;    //border:1pxsolid#222;  }

使用Kebab-case命名变量

对于样式类名或者ID名的命名都需要在多个单词之间添加-符号,CSS本身是大小写不敏感的因此你是用不了camelCase的,另一方面,很久之前也不支持下划线,所以现在的默认的命名方式就是使用-:

CSS1234567/*  Do    */.footer-column-left {} /*  Don't  */.footerColumnLeft {}