月薪過萬必備:開發 CSS 最好的前端工具推薦

作者:前端攻城獅 出處:cnblogs鏈接:http://www.cnblogs.com/qianduantuanzhang/p/783251

嘿,朋友!把你的注意力從方法和技術的洪流中移開一會,你就可能會錯過什麼!上週我遇到我的一個前端開發朋友,他很興奮地跟我談論他使用的一些新工具。其中最有意思的是使用 Grunt 來編譯 SCSS。

人們很容易忘記不是每個人都和你走在同一條路上。他們或是有使用限制,或是視野狹窄,無法洞悉周遭的環境。我使用 Grunt 和使用 SCSS 一樣久。聽他講起他不得不通過命令行可以手動觸發編譯之後,我很是痛苦。所以我想分享一些我經常使用的前端開發工具(尤其是CSS)和極為重要的前端開發工具。

1、文件查看和編譯


首先,如果你還在使用命令行編譯SASS,那肯定得看自動執行的過程,這裡有許多你用得上的工具,我使用 Grunt-Watch,但是有很多人喜歡 Gulp-Watch。

月薪過萬必備:開發 CSS 最好的前端工具推薦


一些 IDE 內建預處理器,可以看看到底哪個適合你。

2、CSS庫


庫是一個大型工具包,它包含並混合從 CSS 重置、跨瀏覽器背景漸變和使用黃金比例設置字體大小的便捷數學計算等的很多東西。

主流的庫:

  • Bourbon
  • Compass
  • PostCSS


月薪過萬必備:開發 CSS 最好的前端工具推薦


我使用 Compass 好幾年了,這是一個很棒的工具集。

但是我發現它能做的遠超我的實際需要 。我用在 Compass 上學到的知識創建了一個輕量級的自定義棧插件,它使得 scss 編譯時間從4秒降低到幾乎為零。

3、Autoprefixer


不必擔心瀏覽器前綴問題了!

月薪過萬必備:開發 CSS 最好的前端工具推薦


Autoprefixer 基於 https://caniuse.com 添加所需的前綴。當我單槍匹馬乾活時,給我節省了不少時間,強烈推薦。

4、Animate.css


我喜歡編寫我自己的 CSS 動畫效果,但經常我們沒有太多的時間。

月薪過萬必備:開發 CSS 最好的前端工具推薦


Animate.css 可以讓我快速的添加和測試 CSS 動畫效果,無需思考這些動畫的邏輯。

5、KSS styleguide


KSS 允許你從你的CSS直接創建一個樣式嚮導文件,這有很多的優點。

配對的 KSS含有一個模塊化的CSS,比如BEM,允許你可靠的創建一個可重複使用的可見樣式集,你會從強大的文檔中獲得巨大的回報。

月薪過萬必備:開發 CSS 最好的前端工具推薦

KSS Styleguide is one of my favorite front end development tools

  1. 你通過文檔化的CSS得到正強化。
  2. 由於文檔和可視化的樣式嚮導,組件更容易被找到和重用-不用懷疑,如果已經建立了一個類似的組件!

6、CSS minification with CSS NANO


自動縮小我編寫的CSS文件。

月薪過萬必備:開發 CSS 最好的前端工具推薦


Minification for front end development

CSSNANO 也可以刪除所有不必要的或過時的瀏覽器前綴,如果有的話,以及重複的類。

2.html

我自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定製課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨,各種框架都有整理,送給每一位前端小夥伴,想要獲取的可以關注我的頭條號並在後臺私信我:前端,即可免費獲取。


分享到:


相關文章: