黄金定律
永远遵循同一套编码规范--不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。
语法
- 用两个空格来代替制表符（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 – 鼠标放置上去的提示
JS命名规约##
- 1.标识符
- 区分大小写
- 第一个字符必须是字母、下划线（_）、或者是$
- 后面的可以是字母、数字、下划线、$
- 2.使用是实际意义的单词
- 3.变量使用驼峰规则，第一个单词首字母小写，后面单词首字母大写
- 4.变量使用名词，方法函数使用动词开头，常量全部用大写字母，函数创建对象首字母大写
网友评论