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

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

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

与文件的约定🤗

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, altPS：属性的定义统一用双引号来定义

<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. 函数命名

• 使用驼峰命名法