當你書寫大量的CSS代碼時，可能會出現不止一個的錯誤?？赡苄枰硞€工具來阻止你CSS書寫的錯誤。

可能，有的時候你的錯誤真的是一個bug。也有可能僅僅因為草率造成的不一致或者不明確的代碼風格?？赡芩鼈儺斨械脑S多看起來微不足道(取決于你的性子)，但是隨著代碼庫的增多以及時間累積，許多人使用時就會做出有丑陋的東西。事情的后果不是你可以想象的。

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

無論是你或者你同事都不喜歡討論你犯下的錯誤，因為這是令人尷尬的事情。甚至有時會令人沮喪或者產生情感破裂。一定的規(guī)范有時候對于代碼庫的維護是有幫助的，如一致的書寫風格，可能當手動執(zhí)行時，看起來有點迂腐乏味。不然它們就會將你平時喜歡的愛出風頭，固執(zhí)的元素展現出來。

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

你所需要的是一個防止錯誤產生的機器

你需要一個防止錯誤產生的機器，可以理解CSS并且理解你:你的意圖、喜好、主意以及弱點。

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

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

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

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

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

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

使用stylelint你可以做的事情

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

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

錯誤捕獲

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

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

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

強制執(zhí)行最佳實踐

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

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

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

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

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

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

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

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

制定以及擴展一切

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

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

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

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

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

如果你有關于stylelint擴展的想法，請讓我們知道！

預期問題的答案

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

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

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

正因為PostCSS解析器 -- 因此stylelint支持SCSS，Less以及新SugarSS。如果你想要實現另外一個自定義語法的支持，你可以通過PostLess得以實現！

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

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

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

stylelint配置是巨大的，我應該從哪兒開始呢？

我們建議三種配置方式:

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

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

運行stylelint最簡單的方式？

對于大多數人而言，最簡單的方式就是通過它的命令行。

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

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

此外，這里也存在一個適用于Atom，Sublime Text，VS Code的stylelint文本編譯插件，以提供最快的反饋。關于更多信息，請查閱 stylelint 網站上的互補工具列表。

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

在Atom中顯示如下；

stylelint是否可以修補我的錯誤？

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

你也可以使用其它的工具，例如CSScomb或者與stylelint聯合使用的perfectionlist，自動修復并自動強制休息。

使用linting進行約束補充

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

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

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

最新評論