什么是設(shè)計(jì)模式灰粮？
　　曾有人調(diào)侃，設(shè)計(jì)模式是工程師用于跟別人顯擺的忍坷，顯得高大上粘舟；也曾有人這么說(shuō)，不是設(shè)計(jì)模式?jīng)]用佩研，是你還沒(méi)有到能懂它柑肴，會(huì)用它的時(shí)候。
　　先來(lái)看一下比較官方的解釋：“設(shè)計(jì)模式（Design pattern）是一套被反復(fù)使用旬薯、多數(shù)人知曉的晰骑、經(jīng)過(guò)分類的、代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)袍暴。使用設(shè)計(jì)模式是為了可重用代碼些侍、讓代碼更容易被他人理解、保證代碼可靠性政模。 毫無(wú)疑問(wèn)岗宣，設(shè)計(jì)模式于己于他人于系統(tǒng)都是多贏的；設(shè)計(jì)模式使代碼編制真正工程化淋样；設(shè)計(jì)模式是軟件工程的基石脈絡(luò)耗式，如同大廈的結(jié)構(gòu)一樣〕煤铮”
　　今天我們來(lái)聊聊CSS的設(shè)計(jì)模式刊咳。
　　設(shè)計(jì)模式，這個(gè)詞匯我們常見(jiàn)儡司，幾乎所有的編程語(yǔ)言都會(huì)有幾套娱挨，但深入研究的人不多，原因如下：
　　1捕犬、似乎沒(méi)有太大必要性去強(qiáng)調(diào)它跷坝，有問(wèn)題了改一下或者按團(tuán)隊(duì)規(guī)范來(lái)就行酵镜；
　　2、不去使用一些既有的模式也無(wú)傷大雅柴钻；
　　3淮韭、不少人所接觸的業(yè)務(wù)量級(jí)還沒(méi)有達(dá)到需要規(guī)劃和組織的程度，光寫布局贴届，寫特效靠粪，照顧兼容，就夠喝一壺的了毫蚓，沒(méi)有意識(shí)去思考一些方法論的問(wèn)題占键。
　　當(dāng)然，這三者都是我經(jīng)歷過(guò)的元潘，相信你也是~
　　我們都會(huì)長(zhǎng)大捞慌，都會(huì)慢慢的做更多、更大柬批、更復(fù)雜的項(xiàng)目啸澡，這個(gè)時(shí)候，就需要自上而下氮帐，全流程的去思考一些問(wèn)題嗅虏。后臺(tái)不說(shuō)，只講前端上沐，比如：風(fēng)格的制定皮服、色調(diào)、模塊参咙、布局方式龄广、交互方式、邏輯等等蕴侧，如果再加上團(tuán)隊(duì)合作择同，若再?zèng)]有一個(gè)規(guī)劃的話，要不了多久净宵，那些看起來(lái)沒(méi)問(wèn)題的代碼敲才，就會(huì)暴露出各種問(wèn)題，模塊命名择葡、類的命名紧武、文件的組織、共用模塊的提取敏储、代碼的復(fù)用阻星、可讀性、擴(kuò)展性已添、維護(hù)性妥箕。它們看起來(lái)只是一些簡(jiǎn)單的小動(dòng)作番舆，卻需要你看得更遠(yuǎn)，避免將來(lái)出問(wèn)題需要付出更大的代價(jià)矾踱，甚至被迫整個(gè)項(xiàng)目重構(gòu)，可謂疏哗，功在當(dāng)代呛讲，利在千秋~
　　既然要對(duì)CSS進(jìn)行設(shè)計(jì)，那么肯定是它本身存在一些問(wèn)題或者缺陷返奉，其中贝搁，一個(gè)最明顯的就是，它的任何一個(gè)規(guī)則芽偏，都是全局性的聲明雷逆，會(huì)對(duì)引入它的頁(yè)面當(dāng)中所有相關(guān)元素起作用，不管那是不是你想要的污尉。而獨(dú)立及可組合的模塊是一個(gè)可維護(hù)系統(tǒng)的關(guān)鍵所在膀哲。下面，我們就從多個(gè)層面來(lái)探討一下被碗，到底該怎樣寫CSS某宪，才是更科學(xué)的。
　　從需求出發(fā)

分
　　我們剛開(kāi)始學(xué)習(xí)寫字的時(shí)候锐朴，是不會(huì)去考慮兴喂，寫出來(lái)的某句話好不好，文章結(jié)構(gòu)合適不合適焚志，因?yàn)槲覀兪且庾R(shí)不到的衣迷。寫代碼也一樣，剛開(kāi)始酱酬，我們只是去定義規(guī)則壶谒，能用對(duì)了屬性，語(yǔ)法正確膳沽，把頁(yè)面實(shí)現(xiàn)出來(lái)了佃迄，就好。慢慢地，就會(huì)發(fā)現(xiàn)流纹，頁(yè)面也是有結(jié)構(gòu)的利职，我們按照頁(yè)面的結(jié)構(gòu)去組織代碼，會(huì)不會(huì)更好普碎？比如，分成頭部录平、導(dǎo)航麻车、側(cè)邊欄缀皱、banner區(qū)、主內(nèi)容區(qū)动猬、底部等啤斗。
　　然而這樣貌似還是不夠，因?yàn)檫€有一些東西赁咙，復(fù)用度是很高的钮莲，又不好把它歸為任何一個(gè)固有模塊，比如：面包屑彼水、分頁(yè)崔拥、彈窗等，它們不適合被放到某一個(gè)固有模塊的代碼中凤覆，就可以單獨(dú)的分出一段專屬的css和js链瓦，或許，這就是組件化的由來(lái)~

拆
　　在分了之后盯桦，我們的代碼看起來(lái)已經(jīng)比之前好很多了慈俯，組織清晰，維護(hù)性大幅提高拥峦，但是肥卡，好像還是不夠，我們會(huì)發(fā)現(xiàn)另外一些東西事镣，很細(xì)小步鉴，但復(fù)用度也很高，它們同樣不適合被放到模塊中去璃哟，比如氛琢，邊框、背景随闪、圖標(biāo)阳似、字體、邊距铐伴、布局方式等等撮奏。如果我們?cè)诿總€(gè)需要它們的地方，都定義一次当宴，它們會(huì)被重復(fù)很多次畜吊，顯然，這背離好的實(shí)踐户矢，會(huì)造成代碼冗余和維護(hù)困難玲献。所以，我們需要“拆”。拆過(guò)之后會(huì)怎樣捌年？我們想在哪里用可以直接加瓢娜，需要改的時(shí)候統(tǒng)一改。

排
　　經(jīng)過(guò)了“分”礼预、“拆”眠砾，我們的代碼結(jié)構(gòu)已經(jīng)十分清晰，各個(gè)內(nèi)容模塊托酸，功能模塊褒颈，UI模塊都乖巧的等待召喚，那么還差什么获高？是的，還差有序的組織吻育，分類清晰之后念秧，還需要排列有序，從不同緯度去考量布疼，我們總能精益求精摊趾。舉個(gè)栗子，我們可能會(huì)看到像這樣：
@import "mod_reset.css";@import "ico_sprite.css";@import "mod_btns.css";@import "header.css";@import "mod_tab.css";@import "footer.css";
　　我們將不同的部分按照一定的順序去擺放游两，能讓我們的代碼看起來(lái)更加有序砾层，易于維護(hù)，同時(shí)贱案，有利于進(jìn)行繼承或?qū)盈B覆蓋肛炮。不要小看這一步，看似可有可無(wú)宝踪，實(shí)際要求比較高的統(tǒng)籌規(guī)劃能力侨糟，可以減少冗余代碼和快速定位問(wèn)題位置等。
　　除此之外瘩燥，我們依然可以有其他的方法來(lái)幫助我們進(jìn)行區(qū)分代碼范圍秕重，比如：
　　1、在文件頭部建立一個(gè)簡(jiǎn)要的目錄

層級(jí)嵌套不要太深
　　稍微了解一些瀏覽器渲染原理的都知道，它在解析CSS規(guī)則的時(shí)候碘勉，是從右向左巷挥，一層層的去遍歷尋找，如果層級(jí)太多验靡，必然增加了渲染時(shí)間倍宾，影響渲染速度。另外胜嗓，如果選擇器層級(jí)過(guò)多高职，也就間接反應(yīng)了，你的HTML結(jié)構(gòu)可能寫得不夠簡(jiǎn)潔辞州。
　　那么具體多少層合適怔锌？一般建議是不超過(guò)4層，但話又說(shuō)回來(lái)变过，超過(guò)4層會(huì)怎樣嗎埃元？不會(huì)有多明顯的影響，除非你寫到很恐怖的數(shù)量媚狰，或者項(xiàng)目極其龐雜岛杀，可能能看出來(lái)影響，其實(shí)從我們?nèi)粘Ｐ枨髞?lái)看崭孤，4層以內(nèi)足可以解決絕大多數(shù)問(wèn)題类嗤，故而，是合理的辨宠。

避免使用元素選擇器
　　出于兩點(diǎn)考慮：

第一點(diǎn)土浸，和上一段提到的相關(guān)，在HTML中彭羹，有很多常用的高頻元素黄伊，比如，div派殷、p还最、span、a毡惜、ul等拓轻。如果，你在多層選擇器的最內(nèi)層使用了元素選擇器经伙，那么扶叉，在開(kāi)始尋找時(shí)勿锅，瀏覽器就會(huì)遍歷HTML中的所有該元素，顯然枣氧，這是沒(méi)有必要的溢十。

第二點(diǎn)，我們的需求和代碼結(jié)構(gòu)都是存在著潛在變化的达吞，今天寫好了一個(gè)頁(yè)面张弛，明天可能就要再加進(jìn)去一個(gè)按鈕，再加進(jìn)去一句話酪劫，再加進(jìn)去一個(gè)圖標(biāo)吞鸭。我們寫好的一個(gè)結(jié)構(gòu)，也隨時(shí)可能被復(fù)用到別的結(jié)構(gòu)中去覆糟。所以刻剥，如果，你使用了元素選擇器去定死某個(gè)東西滩字，不論是新加進(jìn)來(lái)的東西造虏，還是被復(fù)用的東西加到別的結(jié)構(gòu)里去，都極有可能產(chǎn)生樣式的沖突踢械，這個(gè)時(shí)候酗电，你又不得不寫多余的樣式進(jìn)行覆蓋修正魄藕，或者重新定義類内列。
　　所以，出于以上考慮背率，在具體的代碼模塊中话瞧，盡量不要使用元素選擇器，使用元素選擇器的前提是寝姿，你完全的確定交排，不會(huì)導(dǎo)致出現(xiàn)問(wèn)題。注意饵筑，我用的限定范圍是“具體的代碼模塊”埃篓，那么用于定義通用規(guī)則的樣式，是可以的根资，也是推薦使用的架专，比如，reset玄帕。也可以是別的地方部脚，這就需要我們自行考量。

避免使用群組選擇器
　　群組選擇器會(huì)有什么問(wèn)題裤纹？直接上圖吧委刘。

文件引入的數(shù)量和順序
　　對(duì)于剛接觸網(wǎng)頁(yè)的朋友來(lái)說(shuō)寓娩，這兩點(diǎn)也是容易忽視的，因?yàn)樗鼈兛雌饋?lái)沒(méi)什么大影響呼渣，多幾次請(qǐng)求棘伴，樣式是否已經(jīng)加載，都沒(méi)那么容易把人逼瘋徙邻。但是出于對(duì)用戶體驗(yàn)的極致追求排嫌，我們還是希望文件請(qǐng)求次數(shù)盡量少，內(nèi)容的顯示有個(gè)優(yōu)先順序缰犁，文件加載有個(gè)先后順序淳地。這樣怖糊，在實(shí)在難以縮減文件大小的時(shí)候，讓用戶先看到更重要的颇象，正常展示的內(nèi)容伍伤。
　　以上只是幾點(diǎn)舉例，更多實(shí)戰(zhàn)結(jié)論遣钳，大家可以多讀相關(guān)的博文或者書籍扰魂，都會(huì)有前輩們的經(jīng)驗(yàn)之談。
　　從矛盾出發(fā)

通用和語(yǔ)義

Naming convention is beneficial for immediately understanding which category a particular style belongs to and its role within the overall scope of the page. On large projects, it is more likely to have styles broken up across multiple files. In these cases, naming convention also makes it easier to find which file a style belongs to.

命名規(guī)則有助于立即理解一個(gè)特定樣式屬于哪一類蕴茴，它在頁(yè)面的整體范圍內(nèi)的作用劝评。在大型項(xiàng)目中，它更可能有在多個(gè)文件中被打破的樣式倦淀。在這種情況下蒋畜，命名約定也可以更容易地找到一個(gè)樣式屬于哪個(gè)文件的文件。
　　很多時(shí)候撞叽，我們需要一個(gè)東西被定義為通用的姻成，以便復(fù)用，比如：模塊標(biāo)題愿棋、按鈕科展、提示文字、圖標(biāo)等糠雨，最開(kāi)始的時(shí)候才睹，我們習(xí)慣去看視覺(jué)稿的內(nèi)容，是“新聞”见秤，我們就定義“news”砂竖，是“關(guān)于”真椿，我們就定義“about”鹃答，是紅色的按鈕，我們就定義“red-btn”等突硝，這樣會(huì)導(dǎo)致一個(gè)問(wèn)題测摔，如果有另外一個(gè)跟新聞列表差不多的樣式和結(jié)構(gòu)，但不是新聞解恰，怎么辦锋八？繼續(xù)使用“news”顯然不合適，這就告訴我們护盈，不能把目光局限于內(nèi)容挟纱，需要內(nèi)容和結(jié)構(gòu)分離。
　　不能用“news”了腐宋，那用什么呢紊服？abc檀轨？123？這樣總不會(huì)沖突了吧欺嗤，萬(wàn)事大吉~其實(shí)参萄，這是走了另一個(gè)極端，這樣雖然在很大程度上避免了和別的模塊沖突煎饼，但其本身的可讀性就被大大降低了讹挎，別人，甚至你自己過(guò)一段時(shí)間都會(huì)忘記它是什么吆玖，對(duì)于團(tuán)隊(duì)合作是很不利的筒溃。至于需要用什么樣的命名方式，需要你根據(jù)項(xiàng)目的整體來(lái)進(jìn)行規(guī)劃沾乘，適合根據(jù)什么特點(diǎn)來(lái)區(qū)分與之不同的結(jié)構(gòu)铡羡，又能讓人比較容易的在名稱和結(jié)構(gòu)之間建立聯(lián)系，比如所屬類別意鲸、功能烦周、頁(yè)面等。

團(tuán)隊(duì)和個(gè)人
　　一個(gè)團(tuán)隊(duì)當(dāng)中怎顾，大家的經(jīng)歷不同读慎，編碼水平和習(xí)慣也不同，這樣就會(huì)造成槐雾，一個(gè)人一個(gè)寫法夭委，你用中劃線，我用下劃線募强；我用英文全拼株灸，你用簡(jiǎn)寫，等等擎值。這些雖然沒(méi)有什么對(duì)錯(cuò)之分慌烧，但對(duì)于團(tuán)隊(duì)成員之間的協(xié)作造成了不小的障礙，別人必須花時(shí)間去適應(yīng)和讀懂你是怎樣組織和定義的鸠儿，這就無(wú)形之中提高了成本屹蚊。
　　所以，就有了“團(tuán)隊(duì)規(guī)范”存在的必要进每，規(guī)范除了一些寫法上的規(guī)定汹粤，讓我們的代碼更加統(tǒng)一、清晰田晚、可讀性更強(qiáng)嘱兼、辨識(shí)度更高。還可以提取一些最佳實(shí)踐和復(fù)用模塊等贤徒，對(duì)于團(tuán)隊(duì)里每個(gè)人來(lái)說(shuō)芹壕，都是有好處的胃惜。
　　當(dāng)然，對(duì)于人來(lái)說(shuō)哪雕，最難的船殉，莫過(guò)于調(diào)整既有的習(xí)慣，這就會(huì)有進(jìn)入一個(gè)團(tuán)隊(duì)之后“轉(zhuǎn)型”的陣痛斯嚎，其實(shí)這種痛也是成長(zhǎng)的痛利虫，你會(huì)學(xué)習(xí)到更好的編碼方式，更好的實(shí)踐方法堡僻，會(huì)從項(xiàng)目或者團(tuán)隊(duì)的整體去考量一件事的價(jià)值和意義糠惫。

CSS和預(yù)處理器
　　前面我有文章詳細(xì)的談過(guò)CSS預(yù)處理器，我曾經(jīng)對(duì)它也是排斥的钉疫，因?yàn)閷W(xué)習(xí)成本硼讽，因?yàn)橛X(jué)得應(yīng)用起來(lái)沒(méi)有必要∩螅可是一旦你決定去學(xué)習(xí)使用它固阁，就會(huì)覺(jué)得不是那樣，預(yù)處理器在向你介紹它自己的時(shí)候城菊，就有特意強(qiáng)調(diào)過(guò)备燃，它的語(yǔ)法是和CSS完全兼容的，也就是說(shuō)凌唬，你在LESS或者SASS文件中并齐，直接寫CSS代碼是沒(méi)有問(wèn)題的。除此之外客税，它能給我們提供很多便利况褪，比如定義統(tǒng)一的變量；使用嵌套而不用一直重復(fù)著寫一些選擇器更耻；可以提取公共的代碼塊然后很方便的復(fù)用等等测垛。
　　故而，當(dāng)我們已經(jīng)把CSS組織和書寫得很好了之后酥夭，預(yù)處理器赐纱，就是再次為我們插上一雙翅膀脊奋，能更靈活和高效的編碼熬北。
　　從現(xiàn)有模式出發(fā)
　　再來(lái)簡(jiǎn)單看看一些廣為流傳的模式。（ps：先后順序與排名诚隙、好壞無(wú)關(guān)）

一讶隐、OOCSS——Object Oriented CSS
　　接觸過(guò)計(jì)算機(jī)的應(yīng)該都知道，OOP——Object Oriented Programming久又，如果你是第一次接觸OOCSS巫延，你會(huì)很困惑效五，難道是“面向?qū)ο蟮腃SS”嗎？它不是一本真正的編程語(yǔ)言啊炉峰，如何面向?qū)ο螅?br> 　　OOCSS畏妖，最早被提及，是在2009年疼阔，它的兩大原則是：
　　separating structure from skin and container from content.
　　直譯過(guò)來(lái)就是戒劫，結(jié)構(gòu)和皮膚分離，容器和內(nèi)容分離婆廊。
　　即不要把結(jié)構(gòu)和皮膚以及內(nèi)容進(jìn)行強(qiáng)耦合迅细，而是相互獨(dú)立，所要達(dá)到的目標(biāo)是更易復(fù)用和組合淘邻，可以選擇使用茵典，選擇引用等。
　
二宾舅、SMACSS——Scalable and Modular Architecture for CSS
　　從實(shí)踐上說(shuō)统阿，OOCSS給出了一種值得借鑒的思想，但在代碼的組織方面筹我，它并未給出具體的實(shí)施方法砂吞，從這一點(diǎn)上來(lái)說(shuō)，SMACSS更進(jìn)一步崎溃。
　　它的核心是：
　　1蜻直、Base（基礎(chǔ)）
　　基礎(chǔ)的樣式，就是一些需要最先定義好袁串，針對(duì)于某一類元素的通用固定樣式概而。
　　2、Layout（布局）
　　布局樣式囱修，是跟頁(yè)面整體結(jié)構(gòu)相關(guān)赎瑰，譬如，列表破镰，主內(nèi)容餐曼，側(cè)邊欄的位置、寬高鲜漩、布局方式等源譬。
　　3、Module（模塊）
　　模塊樣式孕似，就是我們?cè)趯?duì)頁(yè)面進(jìn)行拆的過(guò)程中踩娘，所抽取分類的模塊，這類的樣式分別寫到一起喉祭。
　　4养渴、State（狀態(tài)）
　　頁(yè)面中的某些元素會(huì)需要響應(yīng)不同的狀態(tài)雷绢，比如，可用理卑、不可用翘紊、已用、過(guò)期藐唠、警告等等霞溪。將這類樣式可以組織到一起。
　　5中捆、Theme（主題）
　　主題是指版面整個(gè)的顏色鸯匹、風(fēng)格之類，一般網(wǎng)站不會(huì)有頻繁的較大的改動(dòng)泄伪，給我們印象比較深的是QQ空間殴蓬，其他應(yīng)用的不是很多，所以蟋滴，這個(gè)一般不會(huì)用到染厅，但有這樣一個(gè)意識(shí)是好的，需要用到的時(shí)候津函，就知道該怎樣規(guī)劃肖粮。
　　有了以上5點(diǎn)分類策略，我們的代碼組織起來(lái)尔苦，思路就會(huì)很清晰涩馆，會(huì)安排的很有序，另外的好處是允坚，可以解決命名難和混亂魂那，之所以有這個(gè)問(wèn)題，主因便是我們不知道以怎樣的標(biāo)準(zhǔn)去定義元素的所屬和特點(diǎn)稠项，有了分類之后涯雅，我們不會(huì)很隨意和混亂的去命名，有了依據(jù)展运，就能更輕松活逆，也不易沖突。
　∞质ぁ（web前端學(xué)習(xí)交流群：328058344 禁止閑聊蔗候，非喜勿進(jìn)！）

三挤土、Meta CSS
　　原子類琴庵，也可以稱之為“無(wú)語(yǔ)義”類，像這樣：