目前我们编写css的流程是：
给class取名 => 切换到css文件 => 编写样式
这个过程可不可以更快一些呢？
答案可以肯定的，有些环节可以优化的。
首先是取名，取一个好的class名字有时也是比较费劲的，特别是遇到比较生疏的概念，还要通过查英文词典来确定。
有的团队使用bem命名法，名字会起成形如：block_element--modifier的格式，这种命名法一是太丑，另外，打这么长的名字不累吗？比较高效取名的方式就是“不取名”。
第二，切换到css文件，这个过程如果可以避免，省去切换文件的成本或者尽可能少的切换文件，也可以提高一些效率。
第三，编写样式，如果样式都可以自动生成，或者大部分的样式可以自动生成，无疑也会加快效率。
说了这么多，高效的编写css的方式是如何的呢？请看下面的demo：
<!--
我们平时编写的html，其中：
mt4表示：margin-top: 4px;
...
-->
<div class='mt4 pa t0 bg333'>...</div>
<!-- 通过babel，根据class转化可以生成如下css样式：-->
<style>
.mt4 { margin-top: 4px }
.pa { position: absolute }
.t0 { top: 0px }
.bg333 { background: #333333 }
</style>
可以看到，将css属性的简写放到class里面去，然后利用babel转化工具 babel-plugin-class-to-css 根据class生成相应的样式，整个编写css的过程可以大幅度简化，手工代码量会大幅下降。
有的同学会说，例如：
background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
这种css样式，没有办法简写吧。
也不是，像上面的这种长css样式，我们可以简写成：lgtr-7A88FF-7AFFAF。
有些同学说，这么简写会记不住吧，没关系，我们可以利用编辑器的提示功能：
如图，当我们编写线性渐变的样式时候，只需要输入属性开头几个字母，就会自动得提示你可以进行babel转换的简写方式，所以不用担心记忆成本。
网友评论