前端的开发规范

命名原则：
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. 快速构建工具做 —》改造

前端命名规范
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

前端的开发规范

前端的开发规范

猜你喜欢