前端编码规范总结-01

最新推荐文章于 2024-06-15 22:31:00 发布

PTKGEM

最新推荐文章于 2024-06-15 22:31:00 发布

阅读量536

点赞数 1

分类专栏： Css / Html 前端相关文章标签：前端编码规范 html css

本文链接：https://blog.csdn.net/Dong_PT/article/details/51239512

版权

前端相关同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

Css / Html

31 篇文章 0 订阅

订阅专栏

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;
}