當你書寫大量的CSS程式碼時,可能會出現不只一個的錯誤。可能需要某個工具來阻止你CSS書寫的錯誤。
可能,有的時候你的錯誤真的是一個bug。也有可能僅僅因為草率造成的不一致或不明確的程式碼風格。可能它們當中的許多看起來微不足道(取決於你的性子),但是隨著程式碼庫的增多以及時間累積,許多人使用時就會做出有醜陋的東西。事情的後果不是你可以想像的。
你嘗試去控制自己。你的同事也幫助你,當你遊離及時糾正你的錯誤。但是,你和你的同事都是錯誤的製造者,所以最後至少在某種程度上都不可避免的失敗了。後來,你或其他人就要解決你頁面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
),就會發出警告,因為這可能是由於你的疏忽造成的。另外,還有一種規則會警告你:當出現混亂局面時,如規則A出現在規則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、 文件、 新想法或只是反饋,請給我們提出!這樣我們所有層級的開發人員就有工作做了。