如何書寫整潔的 CSS 代碼?只需十步!(一)

你知道如何寫出易維護的整潔的 CSS 代碼嗎?要想寫出易讀易理解易維護的 CSS 代碼,你只需掌握一些簡單的方法就夠了!今天你將會學習其中五個,我們將會討論文件結構,混合的 CSS 和 JavaScript 及其劣勢,還有如何更好地給 CSS 添加前綴以及自動執行,最后我們將學習如何處理技術債務。那么,讓我們來學習如何寫出整潔的 CSS 代碼吧!

內容列表:

No.1-5 在第一部分。

No.6: 整理你的文件結構

保持文件結構的簡潔

如何在單個文件中構建你的 CSS 代碼

No.7: 讓 CSS 和 JaceScript 代碼分離

為什么混合的 CSS 和 JavaScript 是大忌?

如何更聰明地使用 CSS 和 JavaScript?

No.8: 留心供應商的前綴和后備方案

避免臃腫的 CSS 代碼

No.9: 讓供應商更容易維護,自動執行

N0.10: 管理你的技術債務

黄大仙码报网址:No.6: 整理你的文件結構

我們在第一部分討論了??榛?CSS 代碼,在繼續學習下一個方法之前,我們應當簡單地討論一下文件結構。從自身出發,??榛?CSS 代碼非常有用,然而可能你習慣將所有的 CSS 代碼放入一個樣式表文件,那么它很快就會變得無法控制。比如說,從單個樣式表文件到十個或者二十個文件那就有如天壤之別了。我們來看寫下面這個例子,這是 ITCSS 中的文件結構:

例:

@import "settings.colors";
@import "settings.global";

@import "tools.mixins";
@import "normalize-scss/normalize.scss";
@import "generic.reset";
@import "generic.box-sizing";
@import "generic.shared";

@import "elements.headings";
@import "elements.hr";
@import "elements.forms";
@import "elements.links";
@import "elements.lists";
@import "elements.page";
@import "elements.quotes";
@import "elements.tables";

@import "objects.animations";
@import "objects.drawer";
@import "objects.list-bare";
@import "objects.media";
@import "objects.layout";
@import "objects.overlays";

@import "components.404";
@import "components.about";
@import "components.archive";
@import "components.avatars";
@import "components.blog-post";
@import "components.buttons";
@import "components.callout";
@import "components.clients";
@import "components.comments";
@import "components.contact";
@import "components.cta";
@import "components.faq";
@import "components.features";
@import "components.footer";
@import "components.forms";
@import "components.header";
@import "components.headings";
@import "components.hero";
@import "components.jobs";
@import "components.legal-nav";
@import "components.main-cta";
@import "components.main-nav";
@import "components.newsletter";
@import "components.page-title";
@import "components.pagination";
@import "components.post-teaser";
@import "components.process";
@import "components.quote-banner";
@import "components.offices";
@import "components.sec-nav";
@import "components.services";
@import "components.share-buttons";
@import "components.social-media";
@import "components.team";
@import "components.testimonials";
@import "components.topbar";
@import "components.reasons";
@import "components.wordpress";
@import "components.work-list";
@import "components.work-detail";

@import "vendor.prism";

@import "trumps.clearfix";
@import "trumps.utilities";

@import "healthcheck";

上面的例子中包含了 65(!) 個文件,如果這都不算超出了控制,告訴我什么才是!65 個文件,即使對網站的設計開發的老鳥來說也已經非常多了。如果你是個新手,這看上去簡直是瘋了!當然,這個例子比較特別,文件的數量和你選取的方法有關。然而,項目伊始你需要記住,你應該提前為項目規劃文件結構,而不要等到火燒眉毛了才著急。

保持文件結構的簡潔

我建議兩件事情,第一,保持文件結構簡潔,第二,找到有效內容。你沒必要非得使用上例中的方法,我相信構造??榛?CSS 的關鍵之一就是因人而異。不一定非要按部就班,你可以隨心所欲地改變方法。另外,你也可以自由地組合使用多個框架,比如:第一部分中講述了我綜合使用了 Atomic design 和 BEM 和少量的 SMACSS 這三種框架的例子。

你也可以和我一樣!如果你喜歡框架 A 也喜歡框架 B,不一定非要二選一,你可以取二者之長來使用。這也同樣適用于文件結構,你可以想用文件夾就用文件夾,不想用就干脆不用。其實,用文件夾可能會好一點,這樣有助于文件管理。然而,用還是不用由你決定,只需要保證你用起來舒服就好。來看一個例子,這是我在某個項目中使用的文件結構:

例:

// Project imports
// Import settings
@import '_settings/config';

// Import tools
@import '_tools/functions';
@import '_tools/mixins';

// Import base
@import '_base/normalize';
@import '_base/base';
@import '_base/typography';

// Import atoms
@import '_atoms/animations';
@import '_atoms/buttons';
@import '_atoms/inputs';
@import '_atoms/inserts';
@import '_atoms/labels';
@import '_atoms/links';

// Import molecules
@import '_molecules/forms';
@import '_molecules/gallery';
@import '_molecules/jumbotron';
@import '_molecules/navigation';
@import '_molecules/pagination';
@import '_molecules/parallax';
@import '_molecules/slider';

// Import organisms
@import '_organisms/footer';
@import '_organisms/grid';
@import '_organisms/header';
@import '_organisms/sections';

// Import pages
@import '_pages/404';
@import '_pages/about';
@import '_pages/contact';
@import '_pages/homepage';
@import '_pages/prices';
@import '_pages/faq';

// Import templates
@import '_templates/print';

如你所見,我喜歡使用文件夾使框架中各個層相互獨立,我也喜歡讓文件結構相對第一個 ITCSS 的例子保持簡單。要記得,我之所以這樣用是因為這很適合我,如果你喜歡其他的方法,那就用其他的方法,如果不喜歡某個方法就不要用。我們的目標是使用有意義的結構避免啰嗦的代碼,而代碼啰嗦是書寫整潔的 CSS 代碼最大的阻礙之一。整潔的 CSS 代碼就是 DRY CSS。

如何在單個文件中構建你的 CSS 代碼

我們要討論的最后一個問題就是如何在單個文件中構建你的 CSS 代碼結構。此時此刻,我們假定你沒有使用任何的預處理器,因為事實上你沒必要去用它。使用預處理器并不會幫你寫出好的整潔的 CSS 代碼。這種情況非常流行,如果你的 CSS 代碼很糟糕,預處理器通常只會雪上加霜而不是雪中送炭。因此,如果你決定使用預處理器,首先保證提高你的 CSS 編碼技巧。

說一點次要的,組織 CSS 代碼最簡單的方式就是使用注釋,這也是一個良好的實踐。我在單個樣式表文件中也會使用注釋來組織代碼,這樣能使編譯后的 CSS 代碼更具可讀性,不然將很難讀懂引入內容的開始和結束位置。現在,我通常在工作流中使用兩種注釋,實際上我用了三種注釋,但是第三種注釋只在 Sass 中才使用,并且也不會將其編譯成 CSS 代碼。

這兩種注釋即單行和多行注釋。我用多行注釋來標注每一個引入的內容,換句話說,我使用這種注釋作為每個引入文件的開始。然后,我會使用單行注釋來標明某項內容的開始位置。那么第三種源于 Sass 的注釋呢?我會用它記錄一些瑣事或者未完成的內容,這種注釋只在開發中才有用,沒必要寫入生產環境。

例 1:

/**
 * Section heading
 */

 /* Sub-section heading */

重申一下,你沒必要使用相同樣式的注釋。注釋有很多種,讓我用幾個實例來給你的想象力充滿電。

例 2:

/*
 * === SECTION HEADING ===
 */

/*
 * — Sub-section Heading —
 */

例 3:

/* ==========================================================================
SECTION HEADING
========================================================================== */

/**
* Sub-section Heading
*/

例 4:

/***************************
****************************
Section heading
****************************
***************************/

/***************************
Sub-section heading
***************************/

No.7: 讓 CSS 和 JaceScript 代碼分離

??榛?CSS 代碼和有效地使用注釋能夠很好地維護整潔的 CSS 代碼。然而,如果你到處寫 CSS 代碼,這些方法一個也不會生效。什么意思?網站設計者經常在 JavaScript 代碼中定義 CSS 樣式,我認為這在使用 jQuery 或者其他 JacaScript 庫的開發者中更為普遍。使用 jQuery 來改變 CSS 樣式比使用 vanilla JavaScript 更簡單迅速,然而,這并不意味著那是好事。

為什么混合的 CSS 和 JavaScript 是大忌?

混合的 CSS 和 JavaScript 代碼的問題就是很容易被忽視。這和在若干個樣式表中維護整潔的 CSS 代碼不同,當添加了 JavaScript 文件,你只會給自己的工作添堵。如果你使用了 JavaScript 預處理器,那簡直是在自討苦吃。那么是不是應該不顧代價地避免雜糅的 CSS 和 JacaScript 代碼呢?也許不必,如果你只需改動一兩次或者改動很小,雜糅也沒關系。

當你想要改動一兩次某個屬性時候,可以選擇 JavaScript,但是我不建議你使用這種方法,也不建議修改很多的屬性或者反復地修改內容。如果那樣做,你將不得不重復寫這些代碼,其結果是你不會再有 DRY CSS,更不要說是整潔的 CSS 代碼了。當然,你可以使用函數來實現,但是你需要兼顧有些設備可能會造成 JavaScript 代碼阻塞的情況。

盡管生活在一個技術迭代迅速的時代,但是我們并不能百分百地依賴 JavaScript。想象一下其他很蠢或者自我感覺良好的事情,很可能有不用 JavaScript 的人訪問你的網站。如果你的一些樣式依賴于 JavaScript,它們將不會生效。因此,即使你不太關心代碼的組織結構,寫混合的 CSS 和 JavaScript 代碼也不是一個好的方法。

如何更聰明地使用 CSS 和 JavaScript?

那么,問題來了,你有什么其他辦法能夠動態地改變 CSS 樣式并且維護整潔的 CSS 代碼呢?從在你的 CSS 樣式表文件中定義新的類開始,之后根據需要使用 JavaScript 來給特定的元素添加或者刪除類,這樣你就可達到目的。你就沒必要在 JavaScript 中寫好多遍 CSS 代碼了,也不用使用任何的函數來實現。但是仍存在一個問題,這不能幫你解決 JavaScript 阻塞或者失效的問題。

JavaScript 阻塞或者失效問題的解決辦法依當時情況而定。但你可以創建一個后備方案,設備不支持 JavaScript 時該方案就會生效,支持 JavaScript 的時候,你再去掉后備方案中的類,并不再使用。特征檢測庫 Modernizr 工作原理與之類似,我曾經討論過如何利用 Modernizr 實現特征檢測和漸進式增長,請戳這里。有點跑題了。

那么來概括一下,為了書寫整潔的 CSS 代碼,我建議保持 CSS 和 JavaScript 代碼分離。如果你需要動態改變樣式,請使用 CSS 中的類,不要直接在 JavaScript 中改變樣式。因為哪怕你的改變很微小或者僅僅改動了一次,都可能會引發異常。如果你在為無 JavaScript 的情況寫后備方案的時候遇到了任何問題,都可以跟我說。

No.8: 留心供應商的前綴和后備方案

第八個書寫整潔的 CSS 代碼的方法是只使用有用的代碼,這意味著你應該經常檢查你的 CSS 代碼并且移除老舊的供應商前綴和后備方案。我是使用 CSS 和 JavaScript 最新特性的忠實擁躉,是的,我喜歡去體驗那些或多或少有著試驗意味的技術。我認為網站設計和開發者都應該有勇氣使用這些技術,并且不光是在開發環境中,也要在生產環境中使用。

然而,這也要求你在網站開發過程中學習更多合理的方法。你需要選擇你的網站支持哪些瀏覽器,光是支持最新版的瀏覽器是不行的,你必須確保網站在很多瀏覽器上都可用。比如,我通常比較注重 IE11+、Google Chrome 49+、Firefox 49+ 和 Safari 9+ 瀏覽器的使用情況,我會在這些瀏覽器上測試項目并使用必要的前綴和后備方案。

這僅僅是過程中的一部分,還有一個就是在改變瀏覽器的用法并實現了一些新功能的時候重新訪問網站。當一些瀏覽器淡出用戶視野之后,你應該移除為其而寫的前綴和后備方案。如果想維護整潔的 CSS 代碼,你應該定期這樣做,否則你的 CSS 代碼將會變得臃腫,將會充斥著沒用的代碼,并且瀏覽器在實現的同時會忽視這些前綴內容。

避免臃腫的 CSS 代碼

不幸的是,這些前綴還存在你的 CSS 代碼里,并造成了比實際需要更多的代碼。對小項目來說,這并不是問題,但如果你在一個體量龐大的項目中使用 CSS 代碼,這些前綴會給樣式表增加許多 kB。就性能而言,每個 kB 都錙銖必較。另外,越來越多的人在使用移動設備訪問網站,并不是所有人的網速都很快。

矛盾的是,有些設備經常運行的瀏覽器需要所有的前綴內容,但是其網絡狀態卻差到每個 kB 都舉足輕重。于是,用戶變得越來越沒有耐心。我們學到了什么?你應該在開發過程中做到重復訪問過時的前綴和后備方案并移除它們。這樣,你就能維護整潔的 CSS 代碼,網站也能獲得很高的性能。你可以點擊這里來查看更多網站維護的內容。

No.9: 讓供應商更容易維護,自動執行

移除老舊的前綴對維護整潔的 CSS 代碼是非常重要的,然而,要實現這個目的也是很痛苦的。誰會愿意每兩個月就檢查一遍代碼并且手動移除過時的代碼呢?估計沒人愿意。幸運的是,已經有更好的替代方案啦,我們可以將這項任務“外包”出去。

有兩種方法,第一個選擇就是使用任務運行工具比如 Gulp、Grunt 或者 Webpack。這些任務運行工具可以使用類似于autoprefixer 的插件,多虧了這個插件你才可以外包這些任務。當你在使用這個插件開展任務時,它只在必要的時候才添加前綴,它還可以檢查樣式表文件并移除過時的前綴。你只需運行任務即可。

第二個選擇是使用名為 prefix-free 的小工具,它和 autoprefixer 還是有點點區別的。 如我們所談到的,autoprefixer 和任務運行工具一同工作,比如后處理器。而當你想要使用 prefix-free 時,你需要在頁面的頭部或者尾部將其引入,它將會在網站加載的時候運行并添加必要的前綴。有什么負面影響嗎?又多了一個外部資源并且增加了帶寬唄!如果用戶遇到了 JavaScript 代碼阻塞或者失效呢?然而,這總比不添加前綴好吧,而且這也比學習使用任務運行工具簡單多了。

想征求我的建議?因人而異!短期來看并且作為一個快速修復的方法,prefix-free 會是更好的選擇。然而,我建議額外花一些時間去學習使用任務運行工具,這會讓你學有所得。任務運行工具能夠讓你的生活變得簡單讓你的工作變得快捷。我最愛 Gulp了,你可以在 Gulp for Web Designers 這篇文章中學習如何使用它。

N0.10: 管理你的技術債務

我們來談談維護整潔的 CSS 代碼的最后一個方法吧。你聽過所謂的技術債務嗎?每一次你為了解決問題而快速地 Hack 一些事情時,技術債務就發生了。當你使用容易實現的代碼替代最全面的解決方案時,技術債務就增加了。它通常出現在一些需要快速移動和傳輸的項目中,換句話說,在初創公司中很常見。

技術債務的問題不在于你創造了它,而在于很多時候你根本沒有那么多時間去完美地解決它。有時候為了立竿見影你不得不使用非常差勁的方案,比如:假使你或者別人發現了網站或者產品上的一個大問題,而且網站或產品已經上線了。然后你需要迅速修復,否則就會失去客戶,結果就會造成技術債務。

如我所言,其問題不是發生了技術債務,真正的問題是你可能會忘記有這個東西。技術債務發生的時候,你應該只把它作為臨時的解決方案。等到時間富裕的時候,你應該回過頭來用更好的方法替換掉快速修復的方法。從長遠上來看,你將能夠維護整潔的 CSS 代碼。

不幸的是,我無法準確告訴你如何減少技術債務的發生,解決方法取決于當時的情況。但是,我可以給你三條建議:第一,利用某種方式積累工作內容,每次你使用投機取巧的解決方案時都要新建一個任務,好記性不如爛筆頭。第二,花費部分時間來重新查看這些工作,并逐個解決。不要讓技術債務和任務的數量積累得太大,否則將超出控制你將無從下手。第三,定期重構你的 CSS 代碼。通過保持 DRY CSS 來維護整潔的代碼,減少重復的代碼,做到一次書寫多次調用。

寫在文末

恭喜,你已經讀完了第二部分,同時也讀完了這個迷你系列的文章!我希望談論的這十條建議能夠幫助你寫出整潔的 CSS 代碼,也希望你能夠長期維護好它。我來告訴你一個秘密,書寫整潔的 CSS 代碼根本沒什么困難,難的是你能夠一直保持 CSS 代碼的整潔。如果不只你一個人在寫 CSS 代碼,那將變得更加困難,但是只要懷著良好的目的去寫 CSS 代碼,事情就會變得簡單了。

來源:github

上一篇: 10個HTML 5.1的新功能

下一篇: 如何書寫整潔的 CSS 代碼?只需十步?。ǘ?/a>

腾讯u站 飞艇冠军二期四码计划软件 u优乐国际pt老虎机 5人炸金花技巧 快3怎么猜大小 腾讯奇趣分分彩计划软件 七星彩购买前四位网站 长期稳定六肖 七星彩内部泄漏 时时彩五星一码不定位万能码 球探体育比分电脑版 复式6码二中二多少组 冷热温6码轮换 吉林快三彩票 自由抢庄牛牛玩法介绍 足球