前端的开发规范
- 目录构建的规范
-
命名原则:
- 简洁
比如: src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包 - 不使用复数
比如: 不使用 imgs docs
- 简洁
-
根目录(root)结构按职能划分
比如:
1. src 源代码(逻辑)
2. doc 文档
3. dep 第三方依赖包
4. test 测试 -
根据业务逻辑进行文件夹的划分
src
common 公共资源
img
logo.png
sprites.png
css
reset.css
js
conf.js 项目的配置文件
public/static 静态资源
js
css
tpl
index.html
shopcar.html
img
component 组件
home
shopcar
login
register
user
list
detail
view/tpl 项目模板 tpl 是 template的缩写 -
总结:
以上目录开发规范有两种使用途径- 纯手动打造
- 快速构建工具做 —》 改造
- 前端命名规范
BEM && OOCSS 针对的都是 css 命名规范
jslint eslint js使用规范
BEM规范
1. 概念:
Block Element Modifier,它是一种前端命名方法,旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。
2. BEM是定义了一种css class的命名规范,每个名称及其组成部分都是存在一定的含义。
3. 由拉丁字母, 数字, -组成css的单个名称.
Block Element Modifier
独立且有意义的实体, e.g. header, container, menu, checkbox, etc. Block的一部分且没有独立的意义, e.g. header title, menu item, list item, etc. Blocks或Elements的一种标志,可以用它改变其表现形式、行为、状态. e.g. disabled, checked, fixed, etc.
Naming
由拉丁字母, 数字, -组成css的单个名称.
Block
使用简洁的前缀名字来命名一个独立且有意义的抽象块或组件。
e.g.
.block
.header
.site-search
Element
使用__连接符来连接Block 和 Element。
e.g.
.block__element
.header__title
.site-search__field
Modifier
使用--连接符来连接Block 或 Element 和 Modifier。
e.g.
.block--modifier
.block__element--modifier
.header--hide
.header__title--color-red
.site-search__field--disabled