【工作笔记】一种高效的CSS编写方式

目前我们编写css的流程是：
给class取名 => 切换到css文件 => 编写样式

这个过程可不可以更快一些呢？

答案可以肯定的，有些环节可以优化的。

首先是取名，取一个好的class名字有时也是比较费劲的，特别是遇到比较生疏的概念，还要通过查英文词典来确定。

有的团队使用bem命名法，名字会起成形如：block_element--modifier的格式，这种命名法一是太丑，另外，打这么长的名字不累吗？比较高效取名的方式就是“不取名”。

第二，切换到css文件，这个过程如果可以避免，省去切换文件的成本或者尽可能少的切换文件，也可以提高一些效率。

第三，编写样式，如果样式都可以自动生成，或者大部分的样式可以自动生成，无疑也会加快效率。

说了这么多，高效的编写css的方式是如何的呢？请看下面的demo：

...

可以看到，将css属性的简写放到class里面去，然后利用babel转化工具 babel-plugin-class-to-css 根据class生成相应的样式，整个编写css的过程可以大幅度简化，手工代码量会大幅下降。

有的同学会说，例如：

background-image: linear-gradient(to right , #7A88FF, #7AFFAF);

这种css样式，没有办法简写吧。

也不是，像上面的这种长css样式，我们可以简写成：lgtr-7A88FF-7AFFAF。

有些同学说，这么简写会记不住吧，没关系，我们可以利用编辑器的提示功能：

如图，当我们编写线性渐变的样式时候，只需要输入属性开头几个字母，就会自动得提示你可以进行babel转换的简写方式，所以不用担心记忆成本。