分针网—每日分享：代码如何看起来干净
如何让代码更加规范?
可以从以下几个方面入手
文件规范
注释规范
命名规范
书写规范
其他规范
文件规范
文件分类
通用类
例:base lib ui等各种文件
业务类
做一个产品,不同的业务放在不同的地方
文件引入
行内样式(不推荐)
外联引入
内联引入
避免在css中使用@important
文件本身
文件名
如:由小写字母 数字 下划线组成
编码
utf-8等
注释规范
块状注释
同一缩进
在被注释对象之上
单行注释
文字两端需空格
在被注释对象之上
行内注释
文字两端需空格
放在分号之后
命名规范
分类命名
命名格式
大小写(建议小写)
长度(权衡长度和可读性)
语义化命名
以内容语义命名
例:nav link等
书写规范
单行与多行
- css单行节省空间,样式过多,不利于观看
- css多行比较清晰,自行选择单行或者多行
空格与分号
缩进(必须有) 2个or4个
css规则内空格(团队自主选择)
分号
保留最后一个属性值的分号
属性顺序
根据属性的重要性书写
Hack方式
同意各个浏览器Hack方式
不要滥用Hack
值格式
统一属性值(color怎么书写,url用单引号还是双引号等等)
其他规范
HTML规范
文档声明:首行顶格开始
闭合:闭合标签最好闭合
属性:单引号或者双引号
层级
缩进体现层级,提高可读性
标签正确嵌套,不要嵌套太深
注释
大小写:标签 属性均小写
图片规范
文件名称
语义
长度
保留源文件
图片合并
尽可能使用sprite技术
sprite图片按模块 业务 页面来划分
模块化
什么是模块化?
一系列相关联的结构组成的整体
带有一定语义,而非表现
怎么做模块?
为模块分类命名(如m-,md-)
以一个主选择器开头(模块根节点)
使用以主选择器开头的后代选择器(模块子节点)
为什么做模块化
好处:利于多人协同开发
便于扩展和重用
可读性 可维护性也好
好好利用这些,代码更工整
学习更多IT知识 加群：272292492