关于前端的开发规范“两三事”

1. 前端的开发规范

1. 目录构建的规范

* 命名原则：

1. 简洁
   比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包
2. 不使用复数
   比如： 不使用 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的缩写

* 总结：

以上目录开发规范有两种使用途径

1. 纯手动打造
2. 快速构建工具做 —》 改造
3. 前端命名规范
   BEM && OOCSS 针对的都是 css 命名规范
   jslint eslint js使用规范
   BEM规范
4. 概念：
   Block Element Modifier，它是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。
5. BEM是定义了一种css class的命名规范，每个名称及其组成部分都是存在一定的含义。
6. 由拉丁字母, 数字, -组成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_