如何書寫整潔的 CSS 代碼?只需十步?。ǘ?/div>

你覺得自己可以寫出整潔的 CSS 代碼嗎?許多網站的設計開發者都認為編寫良好整潔的 CSS 代碼很難。事實上,許多人根本就不喜歡 CSS,對他們來說 CSS 是一個痛點。好消息來了!使用 CSS 實際上可以很簡單,你甚至可以樂在其中。這個迷你系列的文章可以助你實現這個目的,只需十步即可得到整潔的 CSS 代碼。要知道,書寫整潔的 CSS 代碼是簡單愉快地使用 CSS 的關鍵之一呢!

 內容列表:

簡介

No.1: 堅持一種命名規范

良好的有意義的 CSS 類名

語義化命名規范之美

No.2: 使用外鏈樣式表文件

No.3: 驗證 CSS 代碼

火的淬煉

No.4: 使用 CSS 代碼 linter

No.5: 采用??榛?CSS 代碼

如何選擇??榛蚣?/p>

No.6-10 在第二部分

码报2019全年开奖资料大全:簡介

本文中有許多方法可以稱得上寫出整潔的 CSS 代碼的第一要務,同時也可能有一些你不想使用的方法。因此很難決定哪個方法最重要,也很難對這 10 個方法進行排序??悸橇季貌⒅嘏帕碩啻沃?,我決定把這個問題留給你們。在這個只有兩部分的迷你系列的文章中,我僅僅是展示給你們寫出整潔的 CSS 代碼的 10 個簡單的方法而已。

我以一種既定的順序把這些方法展示給你,這是按照理論上每個方法所需的知識量來排序的?;瘓浠八?,前面的方法會比后面的方法容易實現。然而,這種順序也不是一成不變的。很可能你會在排序或者方法內容上與我產生分歧,因此你可以把它想象成餐臺并各取所需。

如果你發現了美味佳肴,拿走不謝,否則跳過然后繼續。所有這些書寫整潔的 CSS 代碼的方法都基于十年來我從事的網站設計工作的經驗。如果你在實踐中另有所得,你完全可以有不同的見解,但請不要不加嘗試地否定它。一些方法沒有生效的話,請試試其他方法,或者反其道而行之,最起碼你應該嘗試一下。沒時間啰嗦了,快上車~

No.1: 堅持一種命名規范

你考慮過該如何創建 CSS 類和 ID(請盡量避免 ID)嗎?我不是指一閃而過的念頭,而是花費若干時間來深度思考。當然,我假設你使用 CSS 是迫于工作,也許你并不想把寫代碼搞的多么有哲理。另外還可能有些人將 CSS 視如芒刺在背,找個借口趕快寫完然后去做更有趣的事情,對吧?

別擔心,我不是來說服你使用 CSS 是一件多簡單的事情。如果你不喜歡它,那也是你的選擇。然而,我會試著說服你嘗試一些其他方法,你可能經常使用 CSS,那么怎樣把它變得有趣一點呢?你只需思考如何實現良好的命名規范,然后堅持下去。為什么要這樣做呢?這會讓你的 CSS 代碼變得更具可讀性。

理解了 CSS 代碼,你就能更高效地書寫和使用它,也更容易寫出整潔的 CSS 代碼,過程也就不會那么痛苦了。也就是說,好的命名規范就等于容易理解的 CSS 代碼,你將向整潔的 CSS 代碼邁近了一步,而遠離了使用 CSS 代碼的痛苦。聽起來很簡單是嗎?那么問題來了,良好的有意義的命名規范長什么樣呢?

良好的有意義的 CSS 類名

我覺得良好的或者有意義的命名規范很容易辨認。當看到樣式表內容的時候,你就能大致了解這段代碼所控制的元素,這也可以用來測試你寫的代碼有多整潔。你是否需要查看 HTML 代碼或者加載網站才能理解 CSS 代碼?果真如此,我認為你的 CSS 代碼還不夠整潔,至少還有進步的空間。簡言之,良好的有意義的命名規范應具有描述性。

整潔的 CSS 代碼中沒有基于某人天馬行空的想象而命名的類。如果你想發揮自己的想象力,我建議你用在其他地方。確實,以你最喜歡的書或者電影命名的類并不會造成危險,但你在酩酊大醉或者磕了藥的時候修改密碼就非常糟糕了,一時心血來潮起的類名與此如出一轍,因此這并不是書寫整潔的 CSS 代碼的正確方法。如果別人并不了解你所寫的書或者電影,讀你的代碼簡直就像讀火星文一樣。并且,萬一你發現了另外一本好書或者好電影,你還要換類名嗎?

當然,你可以按自己的喜好改變而重寫所有的 CSS 代碼,但是這既不高效也讓人無法忍受。通常來說 CSS 或者其他任何代碼都必須要如洪荒宇宙一般經得住時間的考驗,其復雜性也要如此。因此最好的辦法是盡快開始書寫整潔的 CSS 代碼,最好是從一開始就這樣。如果你現在還一頭霧水,那就一個月之后再回過頭來看這篇文章。除了憑借想象力命名,你可以使用哪些其他的命名規范呢?

語義化命名規范之美

易實現且有助于寫出整潔的 CSS 代碼的命名規范都是基于語義化的,簡言之,類名應當可以清楚地描述其控制的元素。你用過Bootstrap 或者 Foundation 框架嗎?去看一下他們的文檔你就能明白什么是語義化的類名,比如:breadcrumb、btn、dropdown、jumbotron、pagination 或者 nav。你不用查看 HTML 代碼也不用加載網站就能明白這些類名的含義。

同樣,這種方法也可以用于通過類名改變狀態的元素。這種情況下類名應當描述其作用,比如:btn-raised 表明按鈕凸起,btn-disabled 表明按鈕失效,sidebar-left 表明側邊欄在左邊,nav-primary 和 nav-secondary 清楚地說明了導航的重要級。

你需要照抄這些類名才能寫出整潔的 CSS 代碼嗎?不,你可以使用自己的命名規范去創建類名。你必須要牢記類名必須具有描述性,要讓其他的網站設計開發人員無需與你溝通 ,也無需查看代碼或網站就能夠讀懂你的 CSS 代碼。如果你自我感覺良好,那么讓其他人來看一下你的 CSS 代碼,結果可能會令你大吃一驚。

關于命名規范和書寫整潔的 CSS 代碼,我最后想要提醒的事情就是當你選擇了自己的命名規范之后要堅持下去。最好將一種命名規范應用到所有的項目中,這會讓你適應原來的項目,并且在新項目中如有神助,因為你不必每次都去琢磨起名字的事情了。我最喜歡的命名規范是啥?是 BEM!

No.2: 使用外鏈樣式表文件

對許多網站設計開發者來說這是禿子頭上的虱子——明擺著的事情,但是我認為提示一下總是有益無害的。你的大部分 CSS 樣式都應該在外鏈樣式表中,為什么是大部分而不是全部呢?根據谷歌對于優化 CSS 傳輸的建議,少量內聯的 CSS 代碼是有好處的。問題是,哪些是少量的可內聯的 CSS 代碼呢?有一些關鍵的樣式,請戳這里查看。

除了這些關鍵的 CSS 樣式你可以寫在 head 標簽內或者小的 CSS 樣式文件中,其他都應當寫在主要的外鏈樣式表文件中。要注意,外鏈文件需要經過壓縮處理來優化網站的性能。

只寫一個主要的外鏈樣式表文件有助于書寫整潔的 CSS 代碼,原因有二:第一,所有的 CSS 代碼都集中在一個文件內,有助于 CSS 文件的管理,不太可能會漏掉引入某個文件。第二個原因主要是心理上的,你很難對那些突然映入眼簾的亂糟糟的 CSS 文件視而不見。在寫那些小的 CSS 樣式文件的時候,你會覺得它們是有順序的,只有當所有的文件都整理到一起的時候,你才會發現那真是一團亂麻。只寫一個外鏈的 CSS 樣式表文件能迫使你關注自己的 CSS 代碼。誰會愿意翻幾百行的代碼去改一點點內容呢?更不要說你可能根本沒在用那些樣式。一段時間之后,你就會決定停止這種寫很多文件的荒唐的做法,并做出些改變。值得慶幸,這會是好事,比如你會花時間將一團糟的 CSS 代碼整理得整潔有序,即重構你的 CSS 代碼。最后,一個樣式表文件可以助你保持你的 CSS DRY,你節省的每一行甚至每一個 kB 都是好事。

No.3: 驗證 CSS 代碼

又一個無腦的建議哈?如果你想寫整潔的 CSS ,你應該確保代碼生效。如果這真的非常簡單,那為什么網頁設計開發者中很少有人使用驗證服務來檢查他們的 CSS 代碼呢?

不管怎么說,除了維護整潔的 CSS 代碼還有兩個使用 CSS 驗證的理由。

第一,這很容易確保你向客戶端傳送了完美的內容,客戶端當然不大可能會驗證 CSS 代碼。你不會知道驗證的結果將會如何,并且這僅僅是確保你的工作完美無瑕。驗證器只需幾秒鐘時間去分析 CSS 代碼,如果沒有問題或者警告,你可以獎勵自己一朵大紅花。但是如果出現了問題或者警告呢?太棒了!這是你提高工作水平和代碼質量的好機會!當你思考的時候,你就在走上坡路了!整個過程中,你要么通過了驗證,要么學到了新東西,何樂而不為呢?

火的淬煉

接下來是我們使用 CSS 驗證器的第二個理由,你可以發現自己的弱項、發現自己的錯誤,然后改正錯誤并將弱項鞏固成強項。你將再次向整潔的 CSS 邁近了一步。我想強調一件事情,驗證器并不能用來評判你的優劣,時刻記住它只是個工具。所以,無論結果如何都不要太往心里去。

上文提到,使用驗證器跑一下 CSS 代碼有利無害,你要么通過測試要么學到所需的知識。現在我要修正一下,還有一種情況是失敗的,那就是你忽視結果并決定不再學習如何做得更加出色。其他的任何情況對你而言都是勝利。

我們還有一些心理上的坎要過,比如我們害怕技能測試。上學的時候,考試不及格是非常糟糕的事情,拿到一個 F 簡直就是世界末日。為什么要這樣呢?如我所言每一次測試都是機會,你能發現自己不擅長的東西并且鞏固它,不然如果連自己的弱項都不知道,又怎么能鞏固它呢?這么說來,驗證器是否正中你的要害?是的!打開 Google 找到你的代碼哪里出錯了,為什么會錯,你也可以在 Stack Overlow 上尋找最佳答案。記住,變的優秀的唯一的辦法就是不斷學習和鞏固你的弱項。

No.4: 使用 CSS linter

你是不是覺得使用驗證器就像是打了雞血一樣?或者像是搏擊俱樂部的 Tyler Durden?那么我來給你介紹一個叫做 CSSlint 的東西。如果你認為 CSS 驗證器正中你的要害并且有點傷感情,那就嘗試一下這個工具吧。

這兩者有什么區別嗎?驗證器只會提示你無效的代碼,即被反對或沒有完全實現的代碼、語法錯誤以及不支持的元素。另一方面,linter 就顯得更加主觀一些?;誑梢宰遠ㄒ宓墓嬖?,它能提示許多被驗證器忽略的內容,通常 linter 用來檢測錯誤、重復的樣式、性能、兼容性和可及性的問題。一旦你違反了規則,linter 都會有提示。我覺得使用 linter 更容易寫出整潔的 CSS 代碼。你也可以只使用驗證器,事實上我關注的一些 CSS 最佳實踐都是基于 CSS lint 的。

你記得我們第一次討論過的 CSS 最佳實踐嗎?如果你關注了這些內容,你可以使用 linter 測試一下,比如你可以測試關鍵元素的使用、ID 和過時的元素。Linter 的好處就在于你可以自己選擇要檢查的規則,比如你想使用 box-sizing(誰不想呢?),就把該條規則禁用掉。記住,linter 應該助你寫出整潔的 CSS 代碼,而不是給你造成麻煩。

同樣要記住 CSS linter 中的規則并不是一成不變的,也沒有人人都要關注的最佳實踐。因此我建議你使用 linter 之前,按照需要自定義設置,如果你不喜歡一些規則,不要使用就是了。

No.5: 采用??榛?CSS 代碼

第五個方法中,我們將接觸更高級一點的書寫整潔的 CSS 代碼的方法。為什么要 CSS 代碼??榛??真的有必要嗎?我先回答第一個問題,CSS 代碼??榛兄諼頤槍菇ê褪侗?CSS 樣式,也有助于實現 DRY CSS?;瘓浠八?,它讓你更容易寫出整潔的 CSS 代碼。??榛?CSS 潛在的不利因素就是需要使用預處理器,我使用的是 Sass。

你可以書寫原生的 CSS 代碼并將其??榛?,使用預處理器的好處就是能夠切分 CSS 代碼,你可以分別存儲每一個代碼塊文件,然后在一個單獨的樣式表文件中將其引入。這屬于管理代碼的范疇了,因此并不是 CSS 代碼??榛謀匭敕絞?。CSS 代碼??榛侵甘樾純芍賾玫拇?,你將創造能夠用于任何位置的??槎揮檬樾錘啻?,這能優化性能也有利于網站維護。

我們可以花一整天的時間來討論各種各樣的框架,然而這并不是本文的目的。另外本文也已經夠長了,我盡可能地長話短說。最后,有許多??榛?CSS 框架,你可以用來書寫整潔的 CSS 代碼。因此……

如何選擇??榛蚣?/h2>

最重要的問題來了,哪個才是最好的框架呢?我的答案是沒有。根本就沒有最好一說,實現方法和需求因人而異。適用于我的框架也許并不適合你,另外你也可以博采眾長創造一個新的框架。因此我建議你嘗試多個框架,并找到適合你的那個。

拿我自己舉個例子吧。我決定使用??榛?CSS 代碼的時候,剛開始使用的是 SMACSS,這個框架簡單易學容易實現,基于對 CSS 代碼的五種分類,即基礎代碼、布局、???、狀態和主題,需要學習的就是如何識別 CSS 代碼的分類。你對 SMACSS 感興趣嗎?最好的學習方法是閱讀官方文檔,官網地址。

由于 SMACSS 的性能很好,我很長一段時間都在使用它。但是當我發現 Atomic design 的時候,我決定要上升一個檔次。Atomic design 也是基于五個分類,即原子、分子、物體、模板和頁面,也清楚地說明了每個特定的 CSS 樣式所屬的分類。我最喜歡將 Atomic design 和 BEM 一起使用,并用在了所有的項目中。你想學習更多內容嗎?我給你推薦兩個資源。

第一個就是 Atomic design 的官網,介紹的地非常深入,因此你需要時間來消化。第二個就是利用 Atomic design 書寫可擴展的 & ??榛?CSS 代碼指南,這個文章會幫助你學習如何利用 Atomic design 快速書寫??榛?CSS 代碼的所有內容。BTW,我在博客上也發布過這篇指南。除了 SMACSS 和 Atomic design,我還會介紹至少兩個更流行的框架來書寫??榛駝嗟?CSS 代碼。

一個是 Object Oriented CSS 也稱 OOCSS。它將代碼塊視作可重用的對象,這仍然是??榛?CSS 代碼,因此它的工作原理類似 SMACSS 和 Atomic design。我以前用過所以可以介紹地更多,請查看 GitHub 上的文檔或者這篇 Smashing Magazine 上的說明。

第二個是新出的 ITCSS,其基于七個層——設置層、工具層、一般層、元素層、對象層、組件層和最高層。ITCSS 乍看之下稍有難度,其實不然,一旦你理解了規則和思路使用起來非常簡單。如果你對 ITCSS 感興趣,歡迎查看 ITCSS 全方位簡介。??榛?CSS 的框架千千萬,但弱水三千只取一瓢,今天討論的這些足夠你起步了,我希望能盡快幫助你寫出整潔的 CSS 代碼,而不是將你淹沒在可能的選項中。

寫在文末

第一部分到這里就結束了。今天我們學習了五個寫出整潔的 CSS 代碼的方法,大部分都很簡單,你能馬上測試并實現。你可以簡單地從驗證和檢查 CSS 代碼開始,也可以使用外鏈的樣式表文件?;蛘?,如果喜歡更有趣的內容,你可以創造你自己的命名規范。如果你想挑戰自己,不如來嘗試使用一些框架寫??榛?CSS 代碼?

如果你覺得這些方法很難,請記住我們為什么要這樣做——這有助于你書寫易于維護的整潔的 CSS 代碼。相信我,最初的不適是值得你去花費時間和精力去渡過的,把它想象成對自己的投資并且將會在未來收獲成倍的回報。預知后事如何?我們會討論一些關于 CSS 文件、自動操作、技術債務和更多內容,回見!

來源:github

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

下一篇: 微信小程序出師不利,谷歌百度或推新Web應用標準抄后路

分享到: 更多
3d组六组三遗漏 推二八杠赢钱技巧 秒速时时彩网盘 带人买彩票骗局 水果老虎机 游戏 山东时时是什么意思是什么意思 游戏《森林》手机版 足彩任选九场预测 凤凰凤凰论坛高手资料 高低低高规律 分分什么软件计划比较稳 时时彩计划免费下载 网上炸金花有什么技巧 中国波兰 元游棋牌通比牛牛 抢庄牌九怎么玩