當(dāng)你書寫大量的CSS代碼時(shí)，可能會(huì)出現(xiàn)不止一個(gè)的錯(cuò)誤?？赡苄枰硞€(gè)工具來阻止你CSS書寫的錯(cuò)誤。

可能，有的時(shí)候你的錯(cuò)誤真的是一個(gè)bug。也有可能僅僅因?yàn)椴萋试斐傻牟灰恢禄蛘卟幻鞔_的代碼風(fēng)格?？赡芩鼈儺?dāng)中的許多看起來微不足道(取決于你的性子)，但是隨著代碼庫的增多以及時(shí)間累積，許多人使用時(shí)就會(huì)做出有丑陋的東西。事情的后果不是你可以想象的。

你嘗試去控制自己。你的同事也幫助你，當(dāng)你游離及時(shí)糾正你的錯(cuò)誤。但是，你和你的同事都是錯(cuò)誤的制造者，所以最后至少在一定程度上都不可避免的失敗了。后來，你或者其他人就要解決你頁面CSS錯(cuò)誤造成的問題。

無論是你或者你同事都不喜歡討論你犯下的錯(cuò)誤，因?yàn)檫@是令人尷尬的事情。甚至有時(shí)會(huì)令人沮喪或者產(chǎn)生情感破裂。一定的規(guī)范有時(shí)候?qū)τ诖a庫的維護(hù)是有幫助的，如一致的書寫風(fēng)格，可能當(dāng)手動(dòng)執(zhí)行時(shí)，看起來有點(diǎn)迂腐乏味。不然它們就會(huì)將你平時(shí)喜歡的愛出風(fēng)頭，固執(zhí)的元素展現(xiàn)出來。

另外你可能更喜歡可以及時(shí)修正錯(cuò)誤，而不是等待代碼審查后由別人指出錯(cuò)誤后，自己進(jìn)行修改并聲明自己不會(huì)再出現(xiàn)此類錯(cuò)誤。當(dāng)你的CSS出現(xiàn)錯(cuò)誤時(shí)，一個(gè)及時(shí)的反饋會(huì)幫助你節(jié)省很多時(shí)間。

你所需要的是一個(gè)防止錯(cuò)誤產(chǎn)生的機(jī)器

你需要一個(gè)防止錯(cuò)誤產(chǎn)生的機(jī)器，可以理解CSS并且理解你:你的意圖、喜好、主意以及弱點(diǎn)。

這種機(jī)器將具有局限性。所有的事物都不是完美的。但是這種局限和你以及你的同事又有所不同。只要是它可以阻止的錯(cuò)誤它都會(huì)持續(xù)阻止，孜孜不倦。同時(shí)，你和你的同事可以一直改善機(jī)器，擴(kuò)展它的功能并且削弱其局限性。它是開源的，全世界的人都可以加入其中盡自己的一份力量--其他想要阻止自己出現(xiàn)CSS書寫錯(cuò)誤的作者。

和其他一樣，CSS 作者也需要 linters

我們將這些防止錯(cuò)誤出現(xiàn)的程序稱為"linters"。Javascript中有幾個(gè)比較好的linter。尤其是ESLint，它起到的作用如奇跡般，向我們展示了一個(gè)好的linter是如此的有用。但是在CSS中，我們就沒有這么幸運(yùn)了，我們的選擇十分有限: 基于Ruby的，具有特殊預(yù)處理程序的scss-lint和較早的CSS Lint。

但是這都是在PostCSS出現(xiàn)之前。除此之外，PostCSS提供了一些方法，建立更具有良好交互性的CSS工具。它可以將任何類CSS語法解析為抽象語法樹(AST)的插件，從而進(jìn)行分析以及操作。并且利用自定義解析器，PostCSS甚至可以處理不規(guī)范的無效模式(如//注釋)

成熟的條件已經(jīng)可以產(chǎn)生一個(gè)具有更強(qiáng)大功能的linter -- 基于PostCSS的強(qiáng)大功能以及在scss-lint和ESLint最佳功能的啟發(fā)之下。

我和幾個(gè)小伙伴一起致力于這個(gè)項(xiàng)目，現(xiàn)在我就要開始介紹一下我們開發(fā)的工具: stylelint.

使用stylelint你可以做的事情

以下是嘗試于stylelint的功能總結(jié)，其中規(guī)則多達(dá)百余條，并且具有可擴(kuò)展性。

在這一點(diǎn)，如果你發(fā)現(xiàn)自己已經(jīng)變得有點(diǎn)不耐煩("Ok,Ok:我相信stylelint將具有奇跡般的工作效果。不需要過多的總結(jié)。")。僅僅跳到下一部分，在這里我僅僅說明一些問題并提供一些提示。

錯(cuò)誤捕獲

有些stylelint規(guī)則旨在找出明顯的錯(cuò)誤，如拼寫錯(cuò)誤或者由于你的心煩意亂或者睡眼惺忪時(shí)制造的疏漏。例如，你可以禁止空白塊，無效的十六進(jìn)制值，重復(fù)的選擇器，未命名的動(dòng)畫名稱和錯(cuò)誤的線性漸變的語法。

其它的規(guī)則都是盡自己最大的努力捕捉更細(xì)微的錯(cuò)誤。這里有一條規(guī)則: 當(dāng)你使用可以覆蓋其屬性同行(如 margin-top)的速記屬性時(shí)(如 margin)，就會(huì)發(fā)出警告，因?yàn)檫@可能是由于你的疏忽造成的。另外，還有一種規(guī)則會(huì)警告你:當(dāng)出現(xiàn)混亂局面時(shí)，如規(guī)則Ａ出現(xiàn)在規(guī)則B之前，但是實(shí)際上覆蓋了規(guī)則B，因?yàn)橐?guī)則A的的選擇器具有更高的優(yōu)先級(jí)(如，規(guī)則A為 .foo.bar{···}，規(guī)則B為 .foo{···})。這是一種十分棘手的情況。

還有一種規(guī)則使用了PostCSS的doiuse插件，用于檢查你的瀏覽器是否支持此樣式。另外一種則使用了css-colorguard插件用于提示顏色的相似性，以免造成你的混亂使用。(請(qǐng)注意: 這是基于PostCSS之上的stylelint的主要優(yōu)勢(shì)之一：相比于其它PostCSS 插件，用很少的努力，stylelint就可以進(jìn)行提示。)

強(qiáng)制執(zhí)行最佳實(shí)踐

如果你在樣式表中使用了系統(tǒng)方法，或者對(duì)你的代碼設(shè)置了一個(gè)樣式指南，你應(yīng)該取締這些模式了。stylelint已經(jīng)提供了這些功能。

首先，你需要狠狠地控制你的選擇器。使用stylelint，你可以禁止超過一定特異性的選擇器或者在嵌套深度上設(shè)置限制。你可以禁止類別選擇器(例如沒有 id的選擇器），并對(duì)其余的選擇器使用正則表達(dá)式進(jìn)行命名約定。

你可以禁止!important的使用，或者你的瀏覽器并不支持的brower hacks。如果你使用Autoprefixer(或者說你應(yīng)該使用),你可以禁止在源樣式表中使用供應(yīng)商前綴。

如果你想要更加嚴(yán)謹(jǐn) -- 你可以花費(fèi)一些時(shí)間在配置上，以保證絕對(duì)的一致性 -- 你可以強(qiáng)制執(zhí)行樣式表屬性的順序，并為黑名單，白名單提供屬性，值，函數(shù)還有單位。

執(zhí)行代碼樣式的約定

stylelint具有自動(dòng)執(zhí)行代碼樣式的約定，所以你和你的隊(duì)友無需主動(dòng)設(shè)置。我們致力于使這些規(guī)則更加全面靈活。

這些規(guī)則主要針對(duì)于空格，但是同樣針對(duì)于其它的細(xì)節(jié)，如；引號(hào)，大小寫字母，在小數(shù)前寫零，使用關(guān)鍵字以及拼讀出值等等。

夢(mèng)想你和你的隊(duì)友可以建立一個(gè)格式約定(例如我們始終在聲明冒號(hào)之后留有一個(gè)空格)，并在你的stylelint配置中進(jìn)行修改，之后你們就不會(huì)為此再次討論。讓其執(zhí)行于機(jī)器王國(guó)。

制定以及擴(kuò)展一切

Nicholas Zakas，ESLint(以及 CSS Lint)的創(chuàng)作者，寫到ESLint的成功在于它的擴(kuò)展性。stylelint試圖遵循ESLint的領(lǐng)先優(yōu)勢(shì)，并且提供給CSS 作者一個(gè)linter，同樣具有擴(kuò)展性。

你可以書寫并且發(fā)布自己的規(guī)則插件?，F(xiàn)在已經(jīng)具有了一大堆可以使用的;并且我們渴望看到別人的優(yōu)秀插件。

配置是可擴(kuò)展的，因此可以共享。至于插件，我們從ESLint了解了這一功能的價(jià)值性。檢查其中包括WordPress和SUITCSS配置的，并且已經(jīng)公布的。

如果你不喜歡 stylelint 的內(nèi)置提示，你可以手工創(chuàng)建屬于你自己的風(fēng)格，甚至可以為你的組織進(jìn)行創(chuàng)建。你還可以自定義用于提供警告信息的規(guī)則。

使用stylelint的API，你可以創(chuàng)建文本編譯器的插件，并進(jìn)行測(cè)試使stylelint 融入到你的工作流的每個(gè)方面。

如果你有關(guān)于stylelint擴(kuò)展的想法，請(qǐng)讓我們知道！

預(yù)期問題的答案

在你的心中可能存在幾個(gè)疑問。這里有幾個(gè)最為常見問題的解釋:

是否可以在SCSS或者Less中使用stylelint？

答案是肯定的，你可以在SCSS中使用stylelint，并且在Less中也得到了支持！自從PostCSS允許自定義解析器，stylelint可以很輕松的支持各種各樣的非標(biāo)準(zhǔn)語法 - 你可以自定義一個(gè)PostCSS解析器進(jìn)行解析。

正因?yàn)镻ostCSS解析器 -- 因此stylelint支持SCSS，Less以及新SugarSS。如果你想要實(shí)現(xiàn)另外一個(gè)自定義語法的支持，你可以通過PostLess得以實(shí)現(xiàn)！

當(dāng)然，還有一定的規(guī)則在你的非標(biāo)準(zhǔn)語法面前得到羈絆(如迷惑于Sass id選擇器的 #{$interpolation})。因?yàn)閟tylelint試圖掩蓋我們樣式表的樣式 - 一些人使用標(biāo)準(zhǔn)CSS，一些人使用擴(kuò)展語言如SCSS，一些人使用一些怪異的自定義屬性等等 - 這些難免都會(huì)產(chǎn)生一些漏洞需要去填補(bǔ)。但是，我們一直在處理我們找到的這些錯(cuò)誤；在此期間的任何規(guī)則可以完全被關(guān)閉或者逐次樣式表或者逐次行的進(jìn)行禁用。

stylelint是否可以使用未來CSS語法？

是的！類似于上面所述的答案: stylelint可以理解PostCSS所理解的任何東西，包括啟用未來任何的CSS語法(可能通過PostCSS插件)。事實(shí)上，一些stylelint規(guī)則專門處理未來CSS語法和一些自定義屬性。

stylelint配置是巨大的，我應(yīng)該從哪兒開始呢？

我們建議三種配置方式:

擴(kuò)展一個(gè)發(fā)布的配置。我們維持stylelint-配置標(biāo)準(zhǔn)，以便于為用戶提供一個(gè)固有的基準(zhǔn)。并且許多的配置也已經(jīng)公布。從頭開始，一次添加一條規(guī)則。默認(rèn)情況下，沒有一條規(guī)則被開啟，所以通過手動(dòng)添加規(guī)則你就會(huì)知道哪一個(gè)會(huì)被強(qiáng)制執(zhí)行，并且可以理解你添加的每條規(guī)則。啟動(dòng)復(fù)制粘貼配置，決定使用哪些選項(xiàng)并選擇性進(jìn)行刪除。

值得慶幸的是，你不需要一遍又一遍的書寫巨大的stylelint配置。你可以選擇一個(gè)你喜歡的風(fēng)格并且可以在任何地方使用它。

運(yùn)行stylelint最簡(jiǎn)單的方式？

對(duì)于大多數(shù)人而言，最簡(jiǎn)單的方式就是通過它的命令行。

如果你更偏愛gulp插件，你可以使用gulp-stylelint。對(duì)于webpack，這里有很多選擇的可能性。我們希望這些插件可以激勵(lì)你們創(chuàng)建其它的stylelint插件，例如，適用于Grunt的插件。(你可以在開源項(xiàng)目中去尋找！)

你也可以使用PostCSS 插件運(yùn)行stylelint，包括插件中所包含的任何東西。這就意味著你可以在任何可以使用PostCSS(幾乎涵蓋于每一個(gè)編譯工具)的地方使用stylelint！

此外，這里也存在一個(gè)適用于Atom，Sublime Text，VS Code的stylelint文本編譯插件，以提供最快的反饋。關(guān)于更多信息，請(qǐng)查閱 stylelint 網(wǎng)站上的互補(bǔ)工具列表。

如下所示，在命令行中，你所期待看到的結(jié)果:

在Atom中顯示如下；

stylelint是否可以修補(bǔ)我的錯(cuò)誤？

不，但是另外一個(gè)叫做stylefmt旨在做到這一點(diǎn)。它需要一個(gè)stylelint配置 - 十分類似于你在linting使用的 - 并且可以修復(fù)任何錯(cuò)誤。我們希望隨著社區(qū)人員的貢獻(xiàn)，stylelint可以發(fā)展到自動(dòng)修補(bǔ)違反stylelint規(guī)則的錯(cuò)誤。請(qǐng)幫他們實(shí)現(xiàn)這個(gè)目標(biāo)！

你也可以使用其它的工具，例如CSScomb或者與stylelint聯(lián)合使用的perfectionlist，自動(dòng)修復(fù)并自動(dòng)強(qiáng)制休息。

使用linting進(jìn)行約束補(bǔ)充

在良好的CSS中有巨大數(shù)額的約束。這就是為什么我們花費(fèi)大量的時(shí)間討論 SMACSS, ACSS, BEM, SUITCSS, ITCSS等等的方法。我們都知道書寫糟糕的CSS是十分容易的，所以，如果讓我們不再畏懼于CSS樣式的書寫，我們需要在工作中建立一個(gè)智能化的戰(zhàn)略并勇敢的堅(jiān)守下去。

stylelint的目標(biāo)是自動(dòng)執(zhí)行 —— 提供一套核心規(guī)則和一個(gè)可插拔的框架以便于CSS 作者可以使用來執(zhí)行自己的戰(zhàn)略。

試一試，讓我們知道如何為你提供服務(wù)。如果你有相關(guān)更好的改進(jìn)想法，如貢獻(xiàn)規(guī)則、 增強(qiáng)功能、 測(cè)試、 修復(fù)bug、 文件、 新想法或只是反饋，請(qǐng)給我們提出！這樣我們所有級(jí)別的開發(fā)人員就有工作做了。

最新評(píng)論