前端编码规范总结-01

---

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中带”“的变量名、函数名冲突。

---

05-CSS样式应该用class选择器归类，元素id具有唯一性，不能id选择器定义的样式在不同标签间复用，id的唯一性多用来js快速定位DOM元素

---