目前我們編寫css的流程是：
給class取名 => 切換到css文件 => 編寫樣式
這個過程可不可以更快一些呢窖逗？
答案可以肯定的搞旭，有些環(huán)節(jié)可以優(yōu)化的榕莺。
首先是取名雄嚣，取一個好的class名字有時也是比較費(fèi)勁的晒屎，特別是遇到比較生疏的概念，還要通過查英文詞典來確定缓升。
有的團(tuán)隊(duì)使用bem命名法鼓鲁，名字會起成形如：block_element--modifier的格式，這種命名法一是太丑港谊，另外骇吭，打這么長的名字不累嗎？比較高效取名的方式就是“不取名”歧寺。
第二燥狰，切換到css文件，這個過程如果可以避免斜筐，省去切換文件的成本或者盡可能少的切換文件龙致，也可以提高一些效率。
第三顷链，編寫樣式目代，如果樣式都可以自動生成，或者大部分的樣式可以自動生成嗤练，無疑也會加快效率榛了。
說了這么多，高效的編寫css的方式是如何的呢潭苞？請看下面的demo：
<!--
我們平時編寫的html忽冻，其中：
mt4表示：margin-top: 4px;
...
-->
<div class='mt4 pa t0 bg333'>...</div>
<!-- 通過babel，根據(jù)class轉(zhuǎn)化可以生成如下css樣式：-->
<style>
.mt4 { margin-top: 4px }
.pa { position: absolute }
.t0 { top: 0px }
.bg333 { background: #333333 }
</style>
可以看到此疹，將css屬性的簡寫放到class里面去，然后利用babel轉(zhuǎn)化工具 babel-plugin-class-to-css 根據(jù)class生成相應(yīng)的樣式，整個編寫css的過程可以大幅度簡化蝗碎，手工代碼量會大幅下降湖笨。
有的同學(xué)會說，例如：
background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
這種css樣式蹦骑，沒有辦法簡寫吧慈省。
也不是，像上面的這種長css樣式眠菇，我們可以簡寫成：lgtr-7A88FF-7AFFAF边败。
有些同學(xué)說，這么簡寫會記不住吧捎废，沒關(guān)系笑窜，我們可以利用編輯器的提示功能：
如圖，當(dāng)我們編寫線性漸變的樣式時候登疗，只需要輸入屬性開頭幾個字母排截，就會自動得提示你可以進(jìn)行babel轉(zhuǎn)換的簡寫方式，所以不用擔(dān)心記憶成本辐益。
