CSS設計模式

關於web設計的網站

https://www.smashingmagazine.com/

什麼是設計模式？

先來看一下比較官方的解釋：」設計模式（Design pattern）是一套被反覆使用、多數人知曉的、通過分類的、代碼設計經驗的總結。使用設計模式是爲了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 毫無疑問，設計模式於己於他人於系統都是多贏的；設計模式使代碼編制真正工程化；設計模式是軟件工程的基石脈絡，如同大廈的結構同樣。」

今天咱們來聊聊CSS的設計模式。

設計模式，這個詞彙咱們常見，幾乎全部的編程語言都會有幾套，但深刻研究的人很少，緣由以下：

1. 彷佛沒有太大必要性去強調它，有問題了改一下或者按團隊規範來就行；
2. 不去使用一些既有的模式也無傷大雅；
3. 很多人所接觸的業務量級尚未達到須要規劃和組織的程度，光寫佈局，寫特效，照顧兼容，就夠喝一壺的了，沒有意識去思考一些方法論的問題。

咱們都會長大，都會慢慢的作更多、更大、更復雜的項目，這個時候，就須要自上而下，全流程的去思考一些問題，後臺不說，只講前端，好比：風格的制定、色調、模塊、佈局方式、交互方式、邏輯等等，若是再加上團隊合做，若再沒有一個規劃的話，要不了多久，那些看起來沒問題的代碼，就會暴露出各類問題，模塊命名、類的命名、文件的組織、共用模塊的提取、代碼的複用、可讀性、擴展性、維護性。它們看起來只是一些簡單的小動做，卻須要你看得更遠，避免未來出問題須要付出更大的代價，甚至被迫整個項目重構，可謂，功在當代，利在千秋~

既然要對CSS進行設計，那麼確定是它自己存在一些問題或者缺陷，其中，一個最明顯的就是，它的任何一個規則，都是全局性的聲明，會對引入它的頁面當中全部相關元素起做用，無論那是否是你想要的。而獨立及可組合的模塊是一個可維護系統的關鍵所在。下面，咱們就從多個層面來探討一下，到底該怎樣寫CSS，纔是更科學的。

從需求出發

分
咱們剛開始學習寫字的時候，是不會去考慮，寫出來的某句話好很差，文章結構合適不合適，由於咱們是意識不到的。寫代碼也同樣，剛開始，咱們只是去定義規則，能用對了屬性，語法正確，把頁面實現出來了，就好。慢慢地，就會發現，頁面也是有結構的，咱們按照頁面的結構去組織代碼，會不會更好？好比，分紅頭部、導航、側邊欄、banner區、主內容區、底部等。

然而這樣貌似仍是不夠，由於還有一些東西，複用度是很高的，又很差把它歸爲任何一個固有模塊，好比：麪包屑、分頁、彈窗等，它們不適合被放到某一個固有模塊的代碼中，就能夠單獨的分出一段專屬的css和js，或許，這就是組件化的由來~

拆
在分了以後，咱們的代碼看起來已經比以前好不少了，組織清晰，維護性大幅提升，可是，好像仍是不夠，咱們會發現另一些東西，很細小，但複用度也很高，它們一樣不適合被放到模塊中去，好比，邊框、背景、圖標、字體、邊距、佈局方式等等。若是咱們在每一個須要它們的地方，都定義一次，它們會被重複不少次，顯然，這背離好的實踐，會形成代碼冗餘和維護困難。因此，咱們須要「拆」。拆過以後會怎樣？咱們想在哪裏用能夠直接加，須要改的時候統一改。

排
通過了「分」、「拆」，咱們的代碼結構已經十分清晰，各個內容模塊，功能模塊，UI模塊都乖巧的等待召喚，那麼還差什麼？是的，還差有序的組織，分類清晰以後，還須要排列有序，從不一樣緯度去考量，咱們總能精益求精。舉個栗子，咱們可能會看到像這樣：

@import 「mod_reset.css」;
@import 「ico_sprite.css」;
@import 「mod_btns.css」;
@import 「header.css」;
@import 「mod_tab.css」;
@import 「footer.css」;

咱們將不一樣的部分按照必定的順序去擺放，能讓咱們的代碼看起來更加有序，易於維護，同時，有利於進行繼承或層疊覆蓋。不要小看這一步，看似無關緊要，實際要求比較高的統籌規劃能力，能夠減小冗餘代碼和快速定位問題位置等。

從結論出發

除了需求當中一些通用部分，另一些也是須要注意，但不會被正式定義的東西，它們來源於咱們的實踐經驗，好比：

層級嵌套不要太深

稍微瞭解一些瀏覽器渲染原理的都知道，它在解析CSS規則的時候，是從右向左，一層層的去遍歷尋找，若是層級太多，必然增長了渲染時間，影響渲染速度。另外，若是選擇器層級過多，也就間接反應了，你的HTML結構可能寫得不夠簡潔。

那麼具體多少層合適？通常建議是不超過4層，但話又說回來，超過4層會怎樣嗎？不會有多明顯的影響，除非你寫到很恐怖的數量，或者項目極其龐雜，可能能看出來影響，其實從咱們平常需求來看，4層之內足能夠解決絕大多數問題，故而，是合理的。

避免使用元素選擇器

出於兩點考慮：

第一點，和上一段提到的相關，在HTML中，有不少經常使用的高頻元素，好比，div、p、span、a、ul等，若是，你在多層選擇器的最內層使用了元素選擇器，那麼，在開始尋找時，瀏覽器就會遍歷HTML中的全部該元素，顯然，這是沒有必要的。

第二點，咱們的需求和代碼結構都是存在着潛在變化的，今天寫好了一個頁面，明天可能就要再加進去一個按鈕，再加進去一句話，再加進去一個圖標。咱們寫好的一個結構，也隨時可能被複用到別的結構中去，因此，若是，你使用了元素選擇器去定死某個東西，不管是新加進來的東西，仍是被複用的東西加到別的結構裏去，都極有可能產生樣式的衝突，這個時候，你又不得不寫多餘的樣式進行覆蓋修正，或者從新定義類。

因此，出於以上考慮，在具體的代碼模塊中，儘可能不要使用元素選擇器，使用元素選擇器的前提是，你徹底的肯定，不會致使出現問題。注意，我用的限定範圍是「具體的代碼模塊」，那麼用於定義通用規則的樣式，是能夠的，也是推薦使用的，好比，reset。也能夠是別的地方，這就須要咱們自行考量。

避免使用羣組選擇器

從現有模式出發

OOCSS——Object Oriented CSS
接觸過計算機的應該都知道，OOP——Object Oriented Programming，若是你是第一次接觸OOCSS，你會很困惑，難道是「面向對象的CSS」嗎？它不是一本真正的編程語言啊，如何面向對象？

OOCSS，最先被說起，是在2009年，它的兩大原則是：

separating structure from skin and container from content.

直譯過來就是，結構和皮膚分離，容器和內容分離。

即不要把結構和皮膚以及內容進行強耦合，而是相互獨立，所要達到的目標是更易複用和組合，能夠選擇使用，選擇引用等。

詳細瞭解連接：https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

SMACSS——Scalable and Modular Architecture for CSS

從實踐上說，OOCSS給出了一種值得借鑑的思想，但在代碼的組織方面，它並未給出具體的實施方法，從這一點上來講，SMACSS更進一步。

它的核心是：

一、Base（基礎）
基礎的樣式，就是一些須要最早定義好，針對於某一類元素的通用固定樣式。

二、Layout（佈局）
佈局樣式，是跟頁面總體結構相關，譬如，列表，主內容，側邊欄的位置、寬高、佈局方式等。

三、Module（模塊）
模塊樣式，就是咱們在對頁面進行拆的過程當中，所抽取分類的模塊，這類的樣式分別寫到一塊兒。

四、State（狀態）
頁面中的某些元素會須要響應不一樣的狀態，好比，可用、不可用、已用、過時、警告等等。將這類樣式能夠組織到一塊兒。

五、Theme（主題）
主題是指版面整個的顏色、風格之類，通常網站不會有頻繁的較大的改動，給咱們印象比較深的是QQ空間，其餘應用的不是不少，因此，這個通常不會用到，但有這樣一個意識是好的，須要用到的時候，就知道該怎樣規劃。

有了以上5點分類策略，咱們的代碼組織起來，思路就會很清晰，會安排的頗有序，另外的好處是，能夠解決命名難和混亂，之因此有這個問題，主因即是咱們不知道以怎樣的標準去定義元素的所屬和特色，有了分類以後，咱們不會很隨意和混亂的去命名，有了依據，就能更輕鬆，也不易衝突。

詳細瞭解連接：https://smacss.com/

BEM

嚴格說來，BEM不是一套有骨有肉的模式，也不只僅侷限你在CSS的層面去規劃，它是一種怎樣去組織、編寫代碼的思想，並且，看似簡單的它，對前端界的影響倒是巨大的。

它的核心以下：

Block（塊）、Element（元素）、Modifier（修飾符）

它幫助咱們定義頁面中每一部分的級別屬性，從某種意義上說，也是一種「拆」。

詳細能夠到官網去查閱。地址：https://en.bem.info/