前端规范总结

1> 目录规范

前后端不分离项目

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

├── 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

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等)

注释:

团队协作中，在文件最前边注释内添加文件创建作者，方便日后维护的时候或者后端出现问题快速找到责任人

相关标准

• 合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。
• 选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
• 注意选择器的性能，不要使用低性能的选择器。
• 禁止在css中使用*选择符。
• 除非必须，否则，一般有class或id的，不需要再- 写上元素对应的tag。
• 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px。
• 如果是16进制表示颜色，则颜色取值应该大写。
• 如果没有边框时，不要写成border:0，应该写成border:none 。
• 尽量避免使用AlphaImageLoader 。
• 在保持代码解耦的前提下，尽量合并重复的样式。
• background、font等可以缩写的属性，尽量使用缩写形式 。

CSS Hack的使用

请不用动不动就使用浏览器检测和CSSHacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！

相关英文名

• 常用id的命名

(1)页面结构

• 容器: container
• 页头：header
• 内容：content/container
• 页面主体：main
• 页尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 页面外围控制整体布局宽度：wrapper
• 左右中：left right center

(2)导航

• 导航：nav
• 主导航：mainbav
• 子导航：subnav
• 顶导航：topnav
• 边导航：sidebar
• 左导航：leftsidebar
• 右导航：rightsidebar
• 菜单：menu
• 子菜单：submenu
• 标题: title
• 摘要: summary

(3)功能

• 标志：logo
• 广告：banner
• 登陆：login
• 登录条：loginbar
• 注册：regsiter
• 搜索：search
• 功能区：shop
• 标题：title
• 加入：joinus
• 状态：status
• 按钮：btn
• 滚动：scroll
• 标签页：tab
• 文章列表：list
• 提示信息：msg
• 当前的: current
• 小技巧：tips
• 图标: icon
• 注释：note
• 指南：guild
• 服务：service
• 热点：hot
• 新闻：news
• 下载：download
• 投票：vote
• 合作伙伴：partner
• 友情链接：link
• 版权：copyright

4> 命名规范js

变量名使用驼峰命名，添加详细注释