DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 使用 stylelint檢查CSS_StyleLint
使用 stylelint檢查CSS_StyleLint
編輯:JavaScript基礎知識     

當你書寫大量的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、 文件、 新想法或只是反饋,請給我們提出!這樣我們所有級別的開發人員就有工作做了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved