团队规范之样式规范实践

我所处的团队最近正在不断壮大中，在维护项目增多，人员增长以及每一个人的编程习惯不一样的背景下，我开始思考团队编码规范统一的工做该如何开展。说起编码规范这个词，大部分的人都会联想到EsLint，它是一个JavaScript语言的检查工具。这证实对于JavaScript的编写规范上你们仍是很是重视的，可是当说起样式书写规范时，你们却少有概念。有些人说css并非正统的编程语言，不须要过于严谨的书写过程。若是你有这样的想法，但愿看完这篇文章你能对css有所改观。

示例

接下来的内容都将经过如下的实例代码展开：

.header {
  text-align: center;
  margin-left: 8px;
  color: #fff;
  font-family: PingFangSC-Regular;
  width: 100px;
  margin-right: 8px;
  transform:translate(50%,50%)
}
.footer {
  color: #FFF;
  transform: translate(50%, 50%);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}
复制代码

疑问

当我看到示例中的样式代码时，首先它给我带来了阅读障碍，我没法快速的理解这个header和footer是一个什么样的容器、设计了怎样的布局。其次个人心中出现了许多疑问（固然这个例子是为了更好的描述而编写的，现实中应该没有这么拙劣的代码）：

• 关于颜色的16进制应该用大写仍是小写
• 能够简写的属性是否要强制使用简写形式
• 属性冒号以后是否须要空格
• 属性值结尾是否须要强制使用分号

这些疑问伴随着样式代码的书写量增长随之增多，成为了在团队规范化编码的行程中必需要解决的问题。幸运的是在业界中已经出现了解决这些问题的工具——stylelint。stylelint是一个css检查工具，它能够类比为检测Js的检查工具Eslint，咱们能够经过配置相应的规则对css的编码规范、风格进行必定的约束，从而达到团队总体的一致性也提升了代码的可阅读性。

实践

stylelint的应用和Eslint的应用方式相差很少，安装对应的检查器，检查器会读取配置文件中的规则对项目中的样式文件进行检查，接下来是我在团队项目中的实践。

Installation

npm install stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order --save-dev
复制代码

• stylelint：规则检查工具
• stylelint-config-standard：关于规范、风格约束的规则集，其中已经作了许多规则的配置
• stylelint-order：对css属性进行排序的插件工具
• stylelint-config-recess-order：社区提供的属性排序的规则集

Configuration

上面所列出的工具包如何真正应用到项目中就须要在项目的根目录下建立建一个.stylelintrc文件，这是stylelint这一工具所须要读取的配置文件，该文件的内容能够书写json语法或yaml语法。具体的配置以下：

{
  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
  "plugins": ["stylelint-order"],
  "rules": {
    // ...
  }
}
复制代码

上述配置中的rules字段能够用来定制适合本身团队的规则，遇到extends引入的工具包中相同的规则时，它将对其进行覆盖。假如你不了解stylelint存在哪些规则，你能够查阅它的官网，或是你只须要社区提供的经常使用规则，那你彻底能够不使用rules字段。

Usage

经过上面的两步，咱们已经为咱们的项目配置好了css样式所须要的规范化工具。最后一步就是如何在项目中使用它，较为常规的两种方式有两种：

1. 使用编辑器插件
2. 与你使用的构建技术相结合

这两种方式能够任选其一，在咱们的团队中，咱们选择让二者同时存在结合使用。咱们的团队在一年前统一了成员所使用的编辑器，这也是为了规范化所作的一项措施。选择了功能完善的visual studio code，让咱们很方便的找到了stylelint-plus这个插件。安装了该插件而且保证前两步没有错误的状况下，你只须要打开该插件的Auto Fix On Save功能，就能够在你编写代码时经过保存修复不符合规范的样式。

尽管编辑器已经给咱们带来了许多便利，但咱们并不能想固然的要求全部人都使用这种方式，由于咱们很难约束人的行为。因此咱们仍然在构建中加入了检测，这样当你在编写代码的过程当中，终端会给出相应的报错提示。

结语

stylelint的应用为我解决了全部的疑惑，我不须要再考虑代码的书写风格不统一和属性书写顺序的问题。关于属性的书写顺序咱们统一使用如下的排序进行书写：

1. 定位相关属性 position top z-index
2. 自身相关属性 width padding margin border
3. 文字样式 font color
4. 文本属性 text-align word-spacing
5. css3新增属性

以这样的书写顺序进行样式书写是我在一篇浏览器性能优化中学习到的，这有效的防止浏览器的重绘与回流。尽管这一优化我无从得知其优化效率，可是我仍然以为当我看到如下清晰的代码的时候，会让我心情愉悦。

.header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-item: center;
  width: 100px;
  padding: 20px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}
复制代码

以上是我对样式规范化的实践，但愿个人文章中也有对你的团队有帮助的地方。