团队规范之样式规范实践

3,158 阅读5分钟

我所处的团队最近正在不断壮大中,在维护项目增多,人员增加以及每个人的编程习惯不同的背景下,我开始思考团队编码规范统一的工作该如何开展。提及编码规范这个词,大部分的人都会联想到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

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;
}

以上是我对样式规范化的实践,希望我的文章中也有对你的团队有帮助的地方。