# develop_standard
**Repository Path**: liuestc/develop_standard
## Basic Information
- **Project Name**: develop_standard
- **Description**: 前端规范
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-03-13
- **Last Updated**: 2020-12-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
光尘前端规范 Alpha版
===
### 文件及变量命名规范
1. 目录规范
2. 文件及文件夹命名
1. 尽量语义化，多个英文单词采用驼峰法 | eg: *(repaireOrder.html)*
3. 变量命名
1. class 采用中画线命名方式 *(btn-danger)*
2. ID 采用驼峰法
3. 名称应当尽可能短，以功能或内容命名，不以表现形式命名，并且意义明确，避免 left bottom 等方位性的词语。
4. 属性统一使用双引号
### 代码书写规范
1. CSS
+ 四格缩进
```
.gluxen {
display: block;
width: 50px;
}
```
+ 加载顺序
+ 避免多级嵌套（小于3级）
+ 注意权重，避免样式覆盖 [more...](https://www.w3cplus.com/css/css-specificity-things-you-should-know.html)
+ 慎用内联
+ 建议不要使用ID写样式（ID留给JS操作DOM）
+ 避免使用!important
+ 避免使用@import
+ 复用样式抽象 | ``
+ PC统一引用reset.css,移动端引用 mobileReset.css
+ 使用autoprefixer添加浏览器前缀 [戳我](https://github.com/postcss/autoprefixer)
+ 性能问题
2. HTML
1. 保持`DOCTYPE`一致
```
```
更多DOCTYPE姿势[戳我](http://www.w3school.com.cn/tags/tag_doctype.asp)
2. 字符串编码及`meta`标签
1. 声明编码 ,一般使用UTF-8 ``
2. 移动端特有属性,通常设置为如下`` [more](https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag)
3. JS
+ JS 换行缩进：采用 4 空格
+ 结束行需添加分号;
+ jQuery变量要求首字符为 $, 私有变量:首字符为_; 尽量避免全局变量.
+ 避免使用 eval()，setTimeOut使用调用函数，考虑重绘，回流 操作对页面影响 参看：reflows，repaints
+ JS调试使用console.log(),上线时注释掉 `console.log`
### 一些有用的插件
1. js
- [缓动函数速查表](http://easings.net/zh-cn)
- [Swiper移动端轮播图](http://www.swiper.com.cn/)
- [wow.js 炫酷效果](https://github.com/matthieua/WOW)
2. css
- [Animate 炫酷动画](https://daneden.github.io/animate.css/)
- [有趣的进度条按钮](https://github.com/codrops/ProgressButtonStyles)
- [btn交互](https://github.com/codrops/CreativeButtons)
### 文档
- [webpack中文文档](http://www.css88.com/doc/webpack2/concepts/)
### 一些有用的资料
- [字体排版](http://aaaaaashu.me/shu/)
### 一些有用的网站
### 分享
- [分享丢到这里 by jd](../share/test.md)
### 杂项