前端规范

1> 目录规范
前后端不分离项目
css目录可用于存放css资源文件（包含less，sass等动态样式表语言）。css文件后缀名 必须(MUST) 为.css，less文件后缀名 必须(MUST) 为.less。需要单独区分字体css

├── content
│ ├── css
│ ├── reset.css
│ └── fonts
│ ├── iconfont.svg
│ └── iconfont.css
│ ├── js
│ └── libs
│ └── jquery.min.js
│ ├── images
| └── index.html
└── README.md
1
2
3
4
5
6
7
8
9
10
11
12
前后端分离项目
可以根据实际需求定义目录

├── build
│ ├── build.js
│ └── webpack.dev.js
├── src
│ ├── assets
│ ├── js
│ └── css
│ ├── componets
│ └── index.vue
│ ├── pages
│ └── index.vue
│ └── main.js
├── static
│ └── img
├── node_modeles
├── .gitignore
├── index.html
├── package.json
└── SUMMARY.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2> 文件名规范
确保他们的浏览器能正确地处理页面,以及增强搜索引擎优化(SEO)

1. 文件名采用小写字母
   　　　　网页的文件名决定了访问者在访问自己的页面时需要输入的文本,因此,文件名和文件夹名只用小写字母可以最大程度地避免访问者的输入错误。

这样做对创建页面之间的 链接也有很大的帮助。如果所有的文件名都用小写字母,那我们就少了一件需要操心的事情。

2. 使用正确的扩展名
   　　　　浏览器主要通过查看文件的扩展名得知需要读取的文本文档是一个网页。尽管也可以使用 .htm作为网页的扩展名,但通常使用的是.html。

如果页面使用其他的扩展名(如.txt),浏览器会将其当做文本处理,相当于将我们的代码直接呈现给访问者。

3. 用短横线分隔单词
   　　　　不要在文件名和文件夹名中使用空格分隔单词。应该使用短横线,例如 company-history.html 和 my-favorite-movies.html。

有的网站使用下划线(_),我们不推荐这种做法, 因为短横线是搜索引擎更容易接受的方式。

3> css类名规范
规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
与mdn标准样式标准为准，例如padding-top

样式书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
1
2
3
4
5
注释
团队协作中，在文件最前边注释内添加文件创建作者，方便日后维护的时候或者后端出现问题快速找到责任人

---

作者：MrLiu