开发前的开胃小菜之前端开发规范🍖🍖

想要代码好看，想要领导加薪，我们先去掌握开发规范。

我们可以将开发规范比作和女朋友之间的约定，遵守约定，你女朋友就会对你好，代码也是一样。

与文件的约定🤗

1. 命名规范

• html, css, js, images文件均归档至约定的目录中;
• html文件命名: 英文命名, 后缀.html或.htm. 同时将统一页面文件放于同目录中, 以方便后端添加功能时查找对应页面;
• css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;
• Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名。

2. 目录规范

• 按照静态文件，html，css，js文件夹夹目录，且入口文件必须为index.html
• 文件夹命名必须符合规范，列如静态命名为static等。

与HTML的约定😎

1. Class与ID的命名

• 我们应该用功能或者内容来对class命名

<div class="footer"></div> 
<!-- 这是使用尾部来命名class -->
复制代码

• class与id命名的字母需要小写，且多个单词组成时需要用-隔开

<div class="f-div"></div> 
复制代码

2. 属性的书写顺序

我们需要按特定的顺序来对元素加上属性

• id
• class
• name
• data-xxx
• src, for, type, href
• title, alt PS：属性的定义统一用双引号来定义

<a id="" class=""  href="###"></a>
复制代码

与CSS的约定🥳

1. 声明规范

• 选择器分组时，保持独立的选择器占用一行
• 声明块的左括号 { 前添加一个空格
• 声明块的右括号 } 应单独成行
• 声明语句中的 : 后应添加一个空格
• 声明语句应以分号 ; 结尾
• 一般以逗号分隔的属性值，每个逗号后应添加一个空格
• rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，紧密相连
• 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）
• 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff
• 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;

.footer,
.footer-right,
.footer-left {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
复制代码

2. 声明顺序 相关的属性为一组，然后分顺序编写

• 定位
• 盒子模型
• 排版
• 视觉设计

.footer {
 /* 定位 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* 盒子模型 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
  /* 排版 */
  line-height: 1.5;
  text-align: center;
  /* 视觉设计 */
  background-color: #ffffff;
}
复制代码

与javascript的约定 😗

1. 变量命名

• 使用驼峰命名法
• 私有属性，私有变量与方法以下划线开头
• 常量全部使用大写字母

2. 函数命名

• 使用驼峰命名法