CSS编码规范只看了有2/3就发现自己在写代码的过程中有很多的规范问题,先就自己的错误对应的知识点罗列如下。
自己写的代码中需改正的规范:
- 要使用4个空格做为一个缩进层级,不允许使用2个空格或tab字符。一直都是用tab缩进的,以后要改正。
- 选择器与
{
之间必须包含空格。表示自己一直都没有写空格。 - 当一个rule包含多个selector时,每个选择器声明必须独占一行。如下例子是规范的写法:
.post,
.page,
.comment {
line-height: 1.5;
}
- [建议]选择器的嵌套层级应不大于3级。
[建议]同一rule set下的属性在书写时,应按功能进行分组,并以FormattingModel(布局方式、位置)>BoxModel(尺寸)>Typographic(文本相关)>Visual(视觉效果)的顺序书写,以提高代码的可读性。解释:
- Formatting Model相关属性包括:
position /top / right / bottom / left / float / display / overflow
等 - Box Model相关属性包括:
border /margin / padding / width / height
等 - Typographic相关属性包括:
font /line-height / text-align / word-wrap
等 - Visual相关属性包括:
background/ color / transition / list-style
等 - 另外,如果包含
content
属性,应放在最前面。
- Formatting Model相关属性包括:
当数值为 0 - 1 之间的小数时,省略整数部分的0,比如0.2写成 .2。
- 长度为0时须省略单位。(也只有长度单位可省)
- 颜色值可以缩写时,必须使用缩写形式,比如白色写成
#fff
而不是#ffffff
。[建议]颜色值中的英文字符采用小写,如不用小写也需要保证同一项目内保持大小写一致。 - 颜色值不允许使用命名色值。比如:
color: grey
是不可以的。
自己需注意的规范:
- 列表型属性值书写在单行时,逗号后必须跟一个空格。比如设置字体时:
font-family: Arial, sans-serif;
这样是规范的写法。
- 每行不得超过120个字符,除非单行不可分割。常见不可分割的场景为URL超长。给出的建议是对于超长的样式,在样式值的空格处或逗号后换行,按逻辑分组。
>
、+
、~
选择器的前后两侧各保留一个空格。- 属性选择器中的值必须而且是只能用双引号包围,其他都是不可以的。
- 如无必要,不得为
id
、class
选择器添加类型选择器进行限定。如下举出规范和不规范的例子:
/* good */
#error,
.danger-message {
font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
font-color: #c00;
}
- 文本内容必须用双引号包围。举例:
/* good */
html[lang|="zh"] q:before {
font-family: "Microsoft YaHei", sans-serif;
content: "“";
}
html[lang|="zh"] q:after {
font-family: "Microsoft YaHei", sans-serif;
content: "”";
}
/* bad */
html[lang|=zh] q:before {
font-family: 'Microsoft YaHei', sans-serif;
content: '“';
}
html[lang|=zh] q:after {
font-family: "Microsoft YaHei", sans-serif;
content: "”";
}
url( )
函数中的路径不加引号,以前都没注意,就直接写了,有时加有时不加,现在就要注意了。[建议]url( )
函数中的绝对路径可省去协议名,如url(//baidu.com/img/bg.png)
。
心得体会:
今天跟小伙伴们深刻讨论了代码,发现了自己很多问题,需要对代码进行重新修改。
1.轮播图那儿应该用img
标签将图写进代码中,而不是background
。
2.感觉最底下那一块中的select
按钮不应该像自己那样写成了背景,而是直接写一个img
标签然后进行定位。
3.还有很多代码优化方面的细节问题需要修改,细节问题还是很多的。
参考规范:https://github.com/ecomfe/spec/blob/master/css-style-guide.md