• 一、规范化命名，提升可读性
  • 1. 命名法[一个简单有效的命名，远比冗长的注释更有意义！！！]
  • 2. CSS规范
  • 3. 组件规范
  • 4. 图标命名

一、规范化命名，提升可读性

1. 命名法[一个简单有效的命名，远比冗长的注释更有意义！！！]

常见的命名规则：

• 驼峰命名法：译自 CamelCase,这个命名来源于 Perl 语言，其展现形式是在单字之间通过首字母大小写来展现。

  • 大驼峰：GetTypeById
  • 小驼峰：getTypeById

• 下划线命名法：通过下划线来分割单词

  • 如：get_type_by_id

• 匈牙利命名法：由一个匈牙利程序员Charles Simonyi发明。命名规则：属性 + 类型 + 对象描述

  • 如：strFirstName
    • str表示这个变量的类型

note: 1.禁止使用中文命名引入的资源名称、定义变量、定义组件名称【极其不专业且低级，没有借口，不接受反驳！！！】

note: 2.禁止出现value1, value2, value3, a, b, c 这种毫无意义的变量, 即使是形参，也尽量使其具备见名识义。

2. CSS规范

• 采用BEM命名法 参考官方 【如有更友好的命名方式可以替代】
  • B: Block [块] E: Element [元素] M: Modifier [修饰符]
  • 示例

    .card {}
    .card--featured {} 
    .card__title {} 
    .card__content {}

    • .card 是一个块，表示高层次的组件。
    • .card__title 是一个元素，它属于 .card 的一部分，因此块是由元素组成的。
    • .card--featured 是一个修饰符，表示这个块与 .card 有着不同的状态
• 书写规范，按照顺序排列属性
  1. 位置：bottom, float, display, left, position, right, top 和 z-index等
  2. 大小：height, margin, padding 和 width等
  3. 版式：color, font, letter-spacing, line-height 和 text-align等
  4. 背景：background等
  5. 其他：animation 和 transition等

  note1: 缩写属性 如：padding: 3px 5px;

  note2: 去除小数开头的0 如：font-size: .5px

  note3: 缩写十六进制值 如：background-color: #0b0

  note4: 避开 !important 发现新样式无法复写旧样式。原因：1.新样式写在了旧样式前面 2.新样式对应的选择器的权重比旧样式的更低 针对于后者提升权重即可。 如：.test-selector-1 { font-size: 16px } 增加权重 .test-selector-1 .test-selector-2 { font-size: 14px }

3. 组件规范

• 命名规范
  • 按照功能命名 如: SideBar
  • 按页面来切分组件 如: NewsItem NewsDetail
  • 按照上下文来命名组件 如: NewsChildItem
• 书写规范
  • 所有组件必须拥有name属性，推荐使用小写和连字符连接 如：x-svg-icon
  • 所有组件开头必须大写，文件夹可以小写，index除外
  • 组件方法排序：name, components, data(), computed, watch, created(), mounted(), methods

4. 图标命名

• i-sys-right
  • i：图标类型 b：背景类型图片 v：商品等插图杂类图片
  • sys：对应的业务模块简写
  • right：图片自定义名称