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

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

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

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

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

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

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

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

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

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

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

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

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

使用stylelint你可以做的事情

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

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

錯誤捕獲

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

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

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

強制執行最佳實踐

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

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

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

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

執行代碼樣式的約定

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

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

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

制定以及擴展一切

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

你可以書寫并且發布自己的規則插件。現在已經具有了一大堆可以使用的;并且我們渴望看到別人的優秀插件。

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

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

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

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

預期問題的答案

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

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

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

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

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

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

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

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

我們建議三種配置方式:

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

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

運行stylelint最簡單的方式？

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

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

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

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

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

在Atom中顯示如下；

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

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

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

使用linting進行約束補充

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

stylelint的目標是自動執行 ―― 提供一套核心規則和一個可插拔的框架以便于CSS 作者可以使用來執行自己的戰略。

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