摘要:代碼質量這個術語對于程序員來說并不陌生。在本文中,我們將探討我們如何能夠利用幫助我們,保持我們的代碼質量更高。怎樣使用在這篇文章中,我們重點介紹幾個插件,可以幫助我們提高代碼質量。使用相當簡單的。這兩個插件可用于代碼分析。
“代碼質量”這個術語對于程序員來說并不陌生。畢竟,每個開發人員都知道,代碼只是能工作是不夠的。它還應該具備其他要素:它應該是可讀的,良好的格式和一致性。它也應該符合一些標準的量化指標。不過這些在寫CSS時,經常被忽略。我們可以花很多時間討論為什么會發生這種情況,但重要的是,CSS編碼是和JavaScript,PHP等一樣,我們要關注我們寫代碼的方式。否則,可能會導致很多復雜的問題。
在本文中,我們將探討我們如何能夠利用PostCSS幫助我們,保持我們的CSS代碼質量更高。首先,找出“好CSS代碼”的含義。有幾件事情需要注意的:
1、代碼應該是一致的風格-你可以選擇如何命名類名,如何換行或如何列出需要的屬性,但你應該保持所有樣式的方式相同。一貫的風格提高可讀性,使代碼更容易理解。
2、代碼應該遵守一些量化標準-有定量的度量,我們保證代碼可以測量并保持在基本標準以上,比如頁面上使用了統一的顏色表示方式,選擇器的最大層數。
3、應該避免HACK-例如,在某些情況下,!important有時看起來像可行的解決方案,但通常會使代碼更復雜。
這不是一個完整的列表,但我們必須關注上述問題。雖然是顯而易見的,但如果在一個很多人參與的項目里,人們技能各不相同,以上問題就很容易被忽略。我們希望有一個工具,可以幫助我們通過代碼分析工具自動實施這些標準。
怎樣使用PostCSS
在這篇文章中,我們重點介紹幾個PostCSS插件,可以幫助我們提高CSS代碼質量。
在開始之前,先使用gulp工具建立一個環境。首先,創建一個新的文件夾,并用npm初始化。然后,安裝gulp的PostCSS插件reporter plugin,寫一個任務查看PostCSS插件的輸出。
具體方法是切換到新創建的文件夾并運行:
npm i gulp gulp-postcss postcss-reporter --save-dev
在創建一個空的style.css文件和gulpfile.js包含以下內容之后:
var gulp = require("gulp"); gulp.task("analyze-css", function () { var postcss = require("gulp-postcss"); var reporter = require("postcss-reporter"); return gulp.src("style.css") .pipe(postcss([ reporter() ]));});
創建掃描style.css內容的任務,并通過一系列PostCSS插件運行它。在命令行下你已經可以運行gulp analyze-css,postcss-reporter只是一個日志插件。讓我們添加一個測試插件。
Stylelint
現在大多數語言都有檢測工具,CSS也不例外。Stylelint允許您按照一組預定義的規則驗證你的CSS代碼,它可以檢查代碼格式的一致性,規則,單位或指令的使用情況,以及潛在的錯誤(如顏色值不正確)。它允許自定義檢查規則 -它本身也有一些基本的檢測,比如,確保選擇器和下面的大括號有一個空格,引號成對使用。還有其它一些規則。下面是幾個例子:
property-blacklist和unit-blacklist允許您指定不使用的屬性和單位的列表。
property-no-vendor-prefix 警告您關于使用瀏覽器前綴,不要求他們根據 Can I use.的數據檢測屬性。
declaration-no-important 不允許使用!important指令。
selector-max-specificity 限制選擇器的最大層級。
Stylelint默認情況下禁用了所有附帶的規則,所以希望你來配置自己的規則。配置可能花點時間。或者,也可以擴展標準配置,如stylelint-標準配置,并用自己的規則對它進行擴展。
設置stylelint一個標準的規則集:
npm i stylelint stylelint-config-standard --save-dev
對gulpfile文件添加代碼,以使用新的插件:
var gulp = require("gulp"); gulp.task("analyze-css", function () { var postcss = require("gulp-postcss"); var stylelint = require("stylelint"); var reporter = require("postcss-reporter"); return gulp.src("style.css") .pipe(postcss([ stylelint(), reporter() ]));});
Stylelint規則可以內嵌在gulpfile文件中,最后在一個多帶帶的文件定義。在項目文件夾中創建.stylelintrc文件,并添加如下內容:
{"extends": "stylelint-config-standard"}
這將告訴stylelint,我們自己的規則集是基于stylelint的標準配置。現在更新style.css文件并且測試插件查測CSS片斷的情況:
.title,.content{ background: #FFFFFF; font-size:0.9em; margin: 0; }
運行gulp analyze-css 產生下面的報告:
style.css 1:7 Expected newline after "," (selector-list-comma-newline-after) [stylelint] 1:15 Expected single space before "{" (block-opening-brace-space-before) [stylelint] 1:17 Expected newline after "{" of a multi-line block (block-opening-brace-newline-after) [stylelint] 1:17 Unexpected whitespace at end of line (no-eol-whitespace) [stylelint] 2:5 Expected indentation of 2 spaces (indentation) [stylelint] 2:17 Expected "#FFFFFF" to be "#ffffff" (color-hex-case) [stylelint] 2:17 Expected "#FFFFFF" to be "#FFF" (color-hex-length) [stylelint] 2:25 Expected newline after ";" in a multi-line rule (declaration-block-semicolon-newline-after) [stylelint] 2:25 Unexpected whitespace at end of line (no-eol-whitespace) [stylelint] 3:5 Expected indentation of 2 spaces (indentation) [stylelint] 3:15 Expected single space after ":" with a single-line value (declaration-colon-space-after) [stylelint] 4:4 Unexpected whitespace at end of line (no-eol-whitespace) [stylelint] 5:4 Unexpected whitespace at end of line (no-eol-whitespace) [stylelint] 6:5 Expected indentation of 2 spaces (indentation) [stylelint] 7:1 Unexpected missing newline at end of file (no-missing-eof-newline) [stylelint]
使用這個插件可以幫助編寫良好的規范的CSS。通過自定義規則列表和覆蓋標準配置的那些不用的配置。您可以把這些規則作為項目和團隊的規則。如果標準規則,沒有符合要求,你也可以自己寫一個。
Do I Use
在寫css時要適配多個瀏覽器是一件痛苦的事。Do I Use 是一個幫助你寫出適配多個瀏覽器CSS的插件。首先定義哪些瀏覽器是要支持的。之后,當您運行的插件,它會通過caniuse.com的數據庫來檢查你的代碼。如果一些代碼不被支持,則提示錯誤。
使用相當簡單的。安裝:
npm i doiuse --save-dev
更新gulpfile:
return gulp.src("style.css") .pipe(postcss([ doiuse({ browsers: ["ie >= 9", "last 2 versions"], }), reporter()]));
此配置定義要支持瀏覽器的最新2個主要版本,IE9及以上。
為了演示,將運行插件來檢測一些新CSS屬性,如:網格布局模功能。
body { display: grid; grid-columns: 200px 1% 1fr; grid-rows: auto 15px auto 15px auto;}
下面是doiuse給出的報告:
style.css 11:2 CSS3 Multiple column layout not supported by: IE (9), Firefox (43,44), Chrome (48,49), Safari (8,9), Opera (34,35), iOS Safari (8.1-8.4,9.0-9.2) (multicolumn) [doiuse]
在寫CSS的時候,瀏覽器不能很好的支持CSS網格模塊。但是,do i use工具可以幫助我們追蹤瀏覽器的支持情況!
Immutable CSS
現在樣式表中重寫CSS規則,會帶來錯誤和復雜性。即使使用現代調試工具,弄清楚那里的樣式被重寫或為什么,有時也是一項挑戰。這就是為什么添加修飾符給選擇器比重寫樣式更好的原因。immutable CSS插件對樣式重寫發出警告。
有兩種操作模式。默認情況下,如果在不同的文件重寫樣式,只警告你。當多個文件合并成單一的文件,它會利用源文件地址,找出其中哪里重寫的樣式的。這意味著它可以與Sass或postcss-impot插件很好的兼容。如果你想更嚴格,可以啟用嚴格模式,在一個單一的文件重寫樣式也會發生警告。
這里有一個簡單的示例。先安裝插件:
npm i immutable-css --save-dev
并在gulpfile里啟用插件嚴格模式:
return gulp.src("style.css") .pipe(postcss([ immutableCss({ strict: true }), reporter() ]))
然后準備不友好的CSS片斷:
.title { color: blue; font-weight: bold;} .title { color: green;} .article .title { font-size: 1.2em;}
下面是該插件的報告,.title偽類已突變:
.title was mutated 3 times[line 1, col 1]: /Users/pavels/Documents/projects/sandbox/postcss/style.css [line 6, col 1]: /Users/pavels/Documents/projects/sandbox/postcss/style.css [line 10, col 1]: /Users/pavels/Documents/projects/sandbox/postcss/style.css
想了解更多這個插件的信息,可以訪問 官網.。
CSS Stats and List Selectors
我們來看一下最后兩個插件 CSS stats和list selectors。他們和上面提到的檢查類插件有點不同:它們的目的不是指出問題,而是提供了自定義分析數據。
CSS stats提供了基本的樣式信息:多少規則,選擇器或使用的聲明,它們是什么,指出一些特殊選擇器,或代碼中font-size出現的次數。這只是一個簡單的生成報告中包含的信息樣本。更詳細的說明上它的頁面GitHub的。你也可以訪問cssstats.com看一些利用插件生成數據報告的例子。
List selectors 插件更簡單,它側重于提取的樣式表中使用選擇器的列表,并通過類別將它們分組 - 類選擇器,屬性,ID或標簽。
這兩個插件可用于代碼分析。下面是幾個例子:
1、保證在一個線程的使用的實體的特征,大小和數量。
2、確保所有的選擇器都是符合編碼風格的。
3、確保媒體查詢的一致性。
這些只是一些想法。更實際的做法是先使用之前的插件,再回到這兩個插件,看是否可以提供更多有用的信息。
結束語
代碼測試和分析僅僅PostCSS使用方式之一,其本身可以有很多功能可以添加到你的開發過程,可以節省開發人員的時間和麻煩。即使在其他編程領域,CSS仍然經常被忽視是很覺。但我相信,在配置PostCSS和這幾個插件是使您的開發更容易,更可靠的一步。
原文標題:Improving the Quality of Your CSS with PostCSS
原文件鏈接:http://www.sitepoint.com/improving-the-quality-of-your-css-with-postcss/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115224.html
摘要:許多開發人員花時間在使用的預處理器上如和。傳統的預處理器的問題不能擴展。有些預處理器提供諸如的功能,可以徹底不使用它們。每個預處理器已經有了自己的標準。如下它被翻譯成嗯我從來沒有說過所有的插件都是有用的結束語和預處理器是偉大的。 許多開發人員花時間在使用CSS的預處理器上如less,sass和stylus。這些工具已經成為Web開發的重要組成部分。寫一個網站的樣式,不使用嵌套,變量或混...
摘要:而則是專門的用于進行布局的工具。避免重復代碼大部分元素的屬性都是從樹根部繼承而來,這也是其命名為級聯樣式表的由來。在壓縮的過程中,會將所有的空白與重復剔除掉從而減少整個文件的體積大小。 本文翻譯自Danny Markov 的20-Tips-For-Writing-Modern-CSS一文。 本文歸納于筆者的Web 前端入門與最佳實踐中CSS入門與最佳實踐系列,其他的關于CSS樣式指南的...
摘要:變量用的好或不好,和代碼質量有著非常重要的聯系。簡而言之,匈牙利命名法就是把變量的類型縮寫,放到變量名的最前面。很多情況下,使用匈牙利命名法是個不錯的主意,因為它可以改善你的代碼可讀性,尤其在那些變量眾多同一類型多次出現時。 歡迎大家前往騰訊云+社區,獲取更多騰訊海量技術實踐干貨哦~ 本文由鵝廠優文發表于云+社區專欄作者:朱雷 | 騰訊IEG高級工程師 『Python 工匠』是什么?...
摘要:起初只是一個美化文檔的工具,但是事情到年發生了變化。對于來說,這意味著有問題的布局。和朝夕相伴的有和最終確定的。他們通過增加前綴的辦法,解決了命名沖突的問題。長長的前綴將成為歷史,歡迎來到未來的世界。 譯者注(GeoffZhu): 這篇適合一些使用過預處理CSS的開發者,比如less,sass或stylus,如果你都沒用過,那你一定不是個好司機。在PostCSS中早就可以使用CSS M...
摘要:下面的代碼違反規則下面的代碼符合規則禁止使用十六進制顏色十六進制的顏色違反規則無效的十六進制色同樣違規下面的是符合規則的自動將十六進制色轉換為大寫或者小寫可以使用實現同樣的功能。 showImg(https://segmentfault.com/img/remote/1460000014782565); 在PostCSS官網有著這樣的對PostCSS特性介紹,箭頭后面是對應功能的插件及...
閱讀 2137·2021-11-22 15:22
閱讀 1286·2021-11-11 16:54
閱讀 1807·2021-09-23 11:32
閱讀 3007·2021-09-22 10:02
閱讀 1771·2019-08-30 12:59
閱讀 1085·2019-08-29 16:27
閱讀 622·2019-08-29 13:21
閱讀 2464·2019-08-28 17:57