编码规范

最新推荐文章于 2022-08-23 17:11:03 发布

孙_常乐

最新推荐文章于 2022-08-23 17:11:03 发布

阅读量161

点赞数

分类专栏：编码规范

编码规范专栏收录该内容

3 篇文章 0 订阅

订阅专栏

黄金定律

永远遵循同一套编码规范--不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

语法

用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合元素的尾部添加斜线。
不要省略可选的结束标签（closing tag）（例如</body>）。

命名规范

1.必须标注文档类型 <!DOCTYPE html>
2.尽可能为文档标注语言属性 <html lang="zh-CN">
3.明确声明字符编码 <meta charset="UTF-8">
4.代码要符合语义化,并且尽量使用最少的标签并保持最小的复杂度。
5.涉及到引号一律使用双引号,命名一律使用小写,连接单词一律用中横线-,
6.为选择器分组时，将单独的选择器单独放在一行。每个属性也单独放在一行

.header,
.content,
.footer{
padding:10px;
}

7.可缩写的属性尽可能使用缩写,值为0的属性省略单位,小于1的小数可省略前面的0

  /*padding:0px 15px 0px 15px;
  color: #ffffff;
  background-color: rgba(255, 0, 0, 0.5);*/

  padding:0 15px;
  color: #fff;
  background-color: rgba(255, 0, 0, .5);

命名方式

命名是功能的描述，如果不知道如何命名，把你能想到的中文名字翻译成看着最顺眼的英文
对于功能复杂的命名，可使用”是什么-什么特性”的命名方式，如”text-lesser”代表样式地位更轻一点的文本，”dialog-open”代表打开了的弹窗
可充分利用语意化标签，配合直接子元素选择器去定位元素，省去一部分元素的命名

部分命名经验

wrap – 用于外侧包裹
header或者** head** – 用于头部
main – 用于主体
container或** ct** – 包裹容器
aside – 用于侧边栏
nav – 用于导航条
tab – 用于Tab切换选项卡
content – 和header footer 对应，用于主要内容
footer或者foot – 用于尾部
ad – 广告
subnav – 二级导航
menu – 菜单
tag – 标签
message或者notice – 提示消息
summary– 摘要
logo– logo
search– 搜索框
login – 登录
register– 注册
username– 用户名
password– 密码
dropmenu – 下拉菜单
banner – 广告条
copyright – 版权
modal或者 dialog – 弹窗
tooltip – 鼠标放置上去的提示