编程规范

每一个工程化项目都必须有规范的支撑，无规矩不成方圆，无规范难以协同。但是小团队的规范一言难尽，总结就是：“我的规矩就是规矩”。难顶对吧。

本文章只针对规范记录，使用什么工具以及如何实现等在后续再写吧。

規範要落實真的很難，但一定要堅持。

cms项目编程规范

命名规范

项目命名

全部采用小写命名，以中划线分隔。

#对
maanagement-system-cms

#错
mall_management-system / mallManagementSystem

目录命名

全部采用小写方式，以中划线分隔，有复数时采用复数命名法，缩写不带复数

#对
scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

#错
script / style / demo_scripts / demoStyles / imgs / docs

【特殊注意】：

Vue项目中除Components外所有目录也使用kebab-case命名：

# 对
page-one / shopping-car / user-management

# 错
ShoppingCar / UserManagement

VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名

# 对
head-search / page-loading / authorized / notice-icon

# 错
HeadSearch / PageLoading

JS、CSS、SCSS、HTML、PNG 文件命名

全部采用小写，以中划线分隔

# 对
render-dom.js / signup.css / index.html / company-logo.png

# 错
renderDom.js / UserManagement.html

严格命名

代码中命名严格禁止使用拼音，更不允许使用中文，一律使用英文，注意：不要使用缩写。

#对
heander

#错
tobu[头部]
getPingfenByName[评分]

HTML规范（适用于Vue Template部分）

使用 HTML5 的文档类型申明

规定字符编码
IE 兼容模式
规定字符编码
doctype 大写

缩进

缩进使用两个空格（一个tab）嵌套的节点应该缩进。

分块注释

在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式

<body>
  <!-- header 头部 start -->
  <header>
    <div class="container">
      <a href="#">
        <!-- 图片会把a标签给撑开，所以不用设置a标签的大小 -->
        <img src="images/header.jpg" />
      </a>
    </div>
  </header>
  <!-- header 头部 end -->
</body>

语义化标签

# 对
<header></header>
<footer></footer>

# 错
<div>
  <p></p>
</div>

引号

使用双引号(" ") 而不是单引号(' ') 。

<!-- good 对 start -->
<div class="news-div"></div>
<!-- good 对 end -->

<!-- bad 错 start -->
<div class='news-div'></div>
<!-- bad 错 end -->

CSS 规范

命名

类名使用小写字母，以中划线分隔
id 采用驼峰式命名
scss 中的变量、函数、混合、placeholder 采用驼峰式命名

ID 和 class 的名称总是使用可以反映元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称

# 对
.error { color: red;}

# 错
.fw-800 {  font-weight: 800;}
.red {  color: red;}

选择器

css 选择器中避免使用标签名从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。
很多前端开发人员写选择器链的时候不使用直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。

# 对
.content > .title {
  font-size: 2rem;
}

# 错
.content .title {
  font-size: 2rem;
}

css尽量使用缩写属性

/* 對 */
.post {
    font: 12px/1.5 arial, sans-serif;
}

/* 錯 */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

注意border / margin / padding要注意影響其它元素。

圖片

全部采用小写，以中划线分隔，不要縮寫。

App項目規範

包名和文件名是與cms相差最大的地方1，中劃線改為了下劃線。

在 Dart 中标识符有三种风格：

大写驼峰：每个单词的第一个字母大写，包括第一个单词。
小写驼峰：每个单词的第一个字母大写，除了第一个单词一直小写，即使第一个单词是缩写。
小写加下划线：只使用小写字母，即使是缩写，然后使用下划线_分隔。

包名、文件名使用小写加下线划

import 'package:english_words/english_words.dart';

导入别名使用小写加下划线

当导入包时, 如果涉及到别名 as, 一律使用小写+下划线方式
import 'dart:math' as math;
import 'package:english_words/english_words.dart' as ew;

其它

类型名使用大写驼峰
其它标识符使用小写驼峰
其它标识符使用小写驼峰
在其它导入之前导入 “dart:”
注释（///用戶方法和成員，//用於方法體內注釋）
不使用 new 创建（官方）
if格式定死条件判断请写好注释不要嵌套太多的逻辑判断不能超过3层

最後，上面總結其實缺少許多，但是已經無力寫下去了，難頂。

小团队前端开发规范记录