緊跟任何開(kāi)發(fā)工具包的更新都是一件需要持續(xù)努力的事，特別是前端開(kāi)發(fā)工具。下面由學(xué)習(xí)啦小編為大家整理的CSS開(kāi)發(fā)工具，希望大家喜歡!

　　CSS開(kāi)發(fā)工具

　　1. 文件查看和編譯

　　首先，如果你還在使用命令行編譯SASS，那肯定得看自動(dòng)執(zhí)行的過(guò)程，這里有許多你用得上的工具，我使用 Grunt-Watch，但是有很多人喜歡 Gulp-Watch。

　　2. SCSS 庫(kù)

　　庫(kù)是一個(gè)大型工具包，它包含并混合從 CSS 重置、跨瀏覽器背景漸變和使用黃金比例設(shè)置字體大小的便捷數(shù)學(xué)計(jì)算等的很多東西。

　　主流的庫(kù)：

　　Bourbon

　　Compass

　　PostCSS

　　3. Autoprefixer

　　Autoprefixer 基于 https://caniuse.com 添加所需的前綴。當(dāng)我單槍匹馬干活時(shí)，給我節(jié)省了不少時(shí)間，強(qiáng)烈推薦。

　　CSS前端開(kāi)發(fā)工具

　　1. Animate.css

　　我喜歡編寫(xiě)我自己的 CSS 動(dòng)畫(huà)效果，但經(jīng)常我們沒(méi)有太多的時(shí)間。

　　Animate.css 可以讓我快速的添加和測(cè)試 CSS 動(dòng)畫(huà)效果，無(wú)需思考這些動(dòng)畫(huà)的邏輯。

　　2. KSS styleguide

　　KSS 允許你從你的CSS直接創(chuàng)建一個(gè)樣式向?qū)募?，這有很多的優(yōu)點(diǎn)。

　　配對(duì)的 KSS含有一個(gè)模塊化的CSS，比如BEM，允許你可靠的創(chuàng)建一個(gè)可重復(fù)使用的可見(jiàn)樣式集，你會(huì)從強(qiáng)大的文檔中獲得巨大的回報(bào)。

　　你通過(guò)文檔化的CSS得到正強(qiáng)化。

　　由于文檔和可視化的樣式向?qū)?，組件更容易被找到和重用-不用懷疑，如果已經(jīng)建立了一個(gè)類(lèi)似的組件!

　　3. CSS minification with CSS NANO

　　自動(dòng)縮小我編寫(xiě)的CSS文件。

　　CSSNANO 也可以刪除所有不必要的或過(guò)時(shí)的瀏覽器前綴，如果有的話，以及重復(fù)的類(lèi)。

　　其他CSS前端開(kāi)發(fā)工具

　　1.CSS 預(yù)處理器

　　超過(guò) 63% 的受訪者使用 Sass – 無(wú)可爭(zhēng)議的預(yù)處理器冠軍。8%的受訪者還使用 PostCSS，雖然它通常與其他預(yù)處理器結(jié)合使用以提供有用的功能 – 如AutoPrefixer( 65% 的受訪者采用)。

　　近 14% 的受訪者不使用預(yù)處理器，而更喜歡使用原始 CSS 代碼。當(dāng)你認(rèn)為它是最簡(jiǎn)單的(和最好的)開(kāi)始前端開(kāi)發(fā)的方式時(shí)，這個(gè)比例似乎有點(diǎn)低。如果 86% 的開(kāi)發(fā)人員使用 CSS 預(yù)處理器，我預(yù)計(jì)平均每個(gè)網(wǎng)站的CSS文件請(qǐng)求應(yīng)該低于7.2個(gè)。

　　近 70% 的受訪者嘗試過(guò) Less ，19% 的受訪者嘗試了 Stylus 。80% 從未聽(tīng)說(shuō)過(guò) Rework。

　　2.CSS 命名方案

　　46% 的受訪開(kāi)發(fā)人員使用命名方案，但是對(duì)于那些將 CSS 水平自我評(píng)價(jià)為高級(jí)或?qū)＜壹?jí)別的人來(lái)說(shuō)，這一比例上升到 57% 。

　　最受歡迎的選擇是 BEM ，占40%，其次是 CSS模塊(CSS Modules)(16%)，OOCSS(15%)和 SMACSS(13%)。