前端编码规范总结-01
来源:互联网 发布:linux 文件最后修改人 编辑:程序博客网 时间:2024/06/04 19:12
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元素
1 0
- 前端编码规范总结-01
- 前端编码规范总结:HTML
- 前端之编码规范总结
- Airbnb前端编码规范总结
- 前端编码规范-一般规范
- Web前端编码规范
- Web前端编码规范
- 前端编码规范
- Web前端编码规范
- 前端编码规范
- 前端编码规范
- 前端编码规范
- Web前端编码规范
- 前端css编码规范
- web前端编码规范
- 前端编码规范
- 前端编码规范
- web前端编码规范
- Android学习笔记(43):Java开发SQLite程序
- TextView之二:常用属性
- 转:Java 自带的数据加密类MessageDigest(MD5或SHA加密)
- linux后门
- “Entity Data Modle Designer 无法显示”的问题
- 前端编码规范总结-01
- 欢迎使用CSDN-markdown编辑器
- Java常见面试题_2016
- 最新Spinner用法详解
- Mac 安装MySQL到移动硬盘
- AngularJS 世界------Angularjs指令的使用方式和自定义指令
- Ant之build.xml详解
- 用Ant实现Java项目的自动构建和部署
- Yaroslav and Permutations