01-像写文件路径一样写CSS选择器
在写CSS时,CSS选择器用来定位HTML的DOM原型节点。CSS虽然不是一门什么高级程序语言(CSS的奇技淫巧真的应该用魔法来形容),但是CSS编码同样拥有严格的规范。
就像人们发明高级编程语言时的设计思想“代码不只是用来给机器理解的,更是给人来理解的!” 所以就像CSS选择器如果不按照一定规范来书写,就很有可能变得杂乱无章,只有机器可以理解。而创造代码的是人,之后需要来维护的也是人,所以如果不安规范书写CSS选择器来书写样式,很可能会给自己或是他人后期维护维护代码造成麻烦。
所以可以按照“文件路径书写”模式来书写CSS选择器,例如:
footer #btm_statement .btm_nav > a:not(:nth-child(1))
是不是类似文件路径:
ooter\btm_statement\.btm_nav\a:not\(:nth-child(1))
通过以上规范书写的CSS选择器可以让人很容易的定位到DOM元素所在位置。
02-不要将文本内容写在伪元素的 content=“文本内容”里在页面中展示
/*左下角使用说明文字,不要将内容写在样式里,
要将HTML结构和内容与CSS样式分离,避免不必要的维护成本和不符合前端规范的技术实现
所以要将底部文字内容写在HTML结构便签内,培养好的前端编程习惯和规范*/
/*fieldset::after {
content: "光标放在表格上 滚动鼠标滚轮可上下滚动查看:-)";
display: inline-block;
color: #0033FF;
font: 14px "黑体";
font-weight: bold;
position: absolute;
left: 70px;
bottom: 20px;
}*/
/*将底部文字内容写在HTML结构的<em>便签内*/
fieldset em {
color: #0033FF;
font: 14px "黑体";
font-weight: bold;
position: absolute;
left: 70px;
bottom: 20px;
}
03-如果能简便的通过HTML元素间的DOM层次结构定位元素的话,就少用 class 和 id
这一条有些思想是和第一条相照应的,少用 class 和 id 还可以使HTML文档简洁。
04-CSS选择器命名用连字符”-“连接不同单词, 不要使用下划线”_”
尤其是id选择器命名,不要使用下划线”“链接命名单词,避免与js中带”“的变量名、函数名冲突。