什么是設(shè)計(jì)模式计露？

　　曾有人調(diào)侃博脑，設(shè)計(jì)模式是工程師用于跟別人顯擺的，顯得高大上票罐；也曾有人這么說叉趣，不是設(shè)計(jì)模式?jīng)]用，是你還沒有到能懂它该押，會(huì)用它的時(shí)候疗杉。

　　先來看一下比較官方的解釋：“設(shè)計(jì)模式（Design pattern）是一套被反復(fù)使用、多數(shù)人知曉的蚕礼、經(jīng)過分類的烟具、代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)。使用設(shè)計(jì)模式是為了可重用代碼奠蹬、讓代碼更容易被他人理解朝聋、保證代碼可靠性。 毫無疑問囤躁，設(shè)計(jì)模式于己于他人于系統(tǒng)都是多贏的冀痕；設(shè)計(jì)模式使代碼編制真正工程化；設(shè)計(jì)模式是軟件工程的基石脈絡(luò)狸演，如同大廈的結(jié)構(gòu)一樣言蛇。”

　　今天我們來聊聊CSS的設(shè)計(jì)模式宵距。

　　設(shè)計(jì)模式腊尚，這個(gè)詞匯我們常見，幾乎所有的編程語言都會(huì)有幾套消玄，但深入研究的人不多跟伏，原因如下：

　　1丢胚、似乎沒有太大必要性去強(qiáng)調(diào)它，有問題了改一下或者按團(tuán)隊(duì)規(guī)范來就行受扳；

　　2携龟、不去使用一些既有的模式也無傷大雅；

　　3勘高、不少人所接觸的業(yè)務(wù)量級(jí)還沒有達(dá)到需要規(guī)劃和組織的程度峡蟋，光寫布局，寫特效华望，照顧兼容蕊蝗，就夠喝一壺的了，沒有意識(shí)去思考一些方法論的問題赖舟。

　　當(dāng)然蓬戚，這三者都是我經(jīng)歷過的，相信你也是~

　　我們都會(huì)長(zhǎng)大宾抓，都會(huì)慢慢的做更多子漩、更大、更復(fù)雜的項(xiàng)目石洗，這個(gè)時(shí)候幢泼，就需要自上而下，全流程的去思考一些問題讲衫。后臺(tái)不說缕棵，只講前端，比如：風(fēng)格的制定涉兽、色調(diào)招驴、模塊、布局方式花椭、交互方式忽匈、邏輯等等，如果再加上團(tuán)隊(duì)合作矿辽，若再?zèng)]有一個(gè)規(guī)劃的話丹允，要不了多久，那些看起來沒問題的代碼袋倔，就會(huì)暴露出各種問題雕蔽，模塊命名、類的命名宾娜、文件的組織批狐、共用模塊的提取、代碼的復(fù)用、可讀性嚣艇、擴(kuò)展性承冰、維護(hù)性。它們看起來只是一些簡(jiǎn)單的小動(dòng)作食零，卻需要你看得更遠(yuǎn)困乒，避免將來出問題需要付出更大的代價(jià)，甚至被迫整個(gè)項(xiàng)目重構(gòu)贰谣，可謂娜搂，功在當(dāng)代，利在千秋~

　　既然要對(duì)CSS進(jìn)行設(shè)計(jì)吱抚，那么肯定是它本身存在一些問題或者缺陷百宇，其中，一個(gè)最明顯的就是秘豹，它的任何一個(gè)規(guī)則携御，都是全局性的聲明，會(huì)對(duì)引入它的頁面當(dāng)中所有相關(guān)元素起作用憋肖，不管那是不是你想要的因痛。而獨(dú)立及可組合的模塊是一個(gè)可維護(hù)系統(tǒng)的關(guān)鍵所在。下面岸更，我們就從多個(gè)層面來探討一下，到底該怎樣寫CSS膊升，才是更科學(xué)的怎炊。

　　從需求出發(fā)

　　分

　　我們剛開始學(xué)習(xí)寫字的時(shí)候，是不會(huì)去考慮廓译，寫出來的某句話好不好评肆，文章結(jié)構(gòu)合適不合適，因?yàn)槲覀兪且庾R(shí)不到的非区。寫代碼也一樣瓜挽，剛開始，我們只是去定義規(guī)則征绸，能用對(duì)了屬性久橙，語法正確，把頁面實(shí)現(xiàn)出來了管怠，就好淆衷。慢慢地，就會(huì)發(fā)現(xiàn)最蕾，頁面也是有結(jié)構(gòu)的淘讥，我們按照頁面的結(jié)構(gòu)去組織代碼厂僧，會(huì)不會(huì)更好怜校？比如佳头，分成頭部鹰贵、導(dǎo)航、側(cè)邊欄康嘉、banner區(qū)碉输、主內(nèi)容區(qū)、底部等凄鼻。

　　然而這樣貌似還是不夠腊瑟，因?yàn)檫€有一些東西，復(fù)用度是很高的块蚌，又不好把它歸為任何一個(gè)固有模塊闰非，比如：面包屑、分頁峭范、彈窗等财松，它們不適合被放到某一個(gè)固有模塊的代碼中，就可以單獨(dú)的分出一段專屬的css和js纱控，或許辆毡，這就是組件化的由來~

　　拆

　　在分了之后，我們的代碼看起來已經(jīng)比之前好很多了甜害，組織清晰舶掖，維護(hù)性大幅提高，但是尔店，好像還是不夠眨攘，我們會(huì)發(fā)現(xiàn)另外一些東西，很細(xì)小嚣州，但復(fù)用度也很高鲫售，它們同樣不適合被放到模塊中去，比如该肴，邊框情竹、背景、圖標(biāo)匀哄、字體秦效、邊距、布局方式等等拱雏。如果我們?cè)诿總€(gè)需要它們的地方棉安，都定義一次，它們會(huì)被重復(fù)很多次铸抑，顯然贡耽，這背離好的實(shí)踐，會(huì)造成代碼冗余和維護(hù)困難。所以蒲赂，我們需要“拆”阱冶。拆過之后會(huì)怎樣？我們想在哪里用可以直接加滥嘴，需要改的時(shí)候統(tǒng)一改木蹬。

　　排

　　經(jīng)過了“分”、“拆”若皱，我們的代碼結(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";

　　我們將不同的部分按照一定的順序去擺放生棍，能讓我們的代碼看起來更加有序，易于維護(hù)媳谁，同時(shí)足绅，有利于進(jìn)行繼承或?qū)盈B覆蓋。不要小看這一步韩脑，看似可有可無，實(shí)際要求比較高的統(tǒng)籌規(guī)劃能力粹污，可以減少冗余代碼和快速定位問題位置等段多。

　　除此之外，我們依然可以有其他的方法來幫助我們進(jìn)行區(qū)分代碼范圍壮吩，比如：

　　1进苍、在文件頭部建立一個(gè)簡(jiǎn)要的目錄

　　2、使用區(qū)塊注釋

　　在注釋中鸭叙，應(yīng)該盡量詳細(xì)的寫清楚該段代碼的目的觉啊，狀態(tài)切換，調(diào)整原因沈贝，交互邏輯等等杠人，這樣不僅利于自己的維護(hù)，更加利于別人接手維護(hù)你的代碼。

　　從結(jié)論出發(fā)

　　除了需求當(dāng)中一些通用部分嗡善，另外一些也是需要注意辑莫，但不會(huì)被正式定義的東西，它們來源于我們的實(shí)踐經(jīng)驗(yàn)罩引，比如：

　　層級(jí)嵌套不要太深

　　稍微了解一些瀏覽器渲染原理的都知道各吨，它在解析CSS規(guī)則的時(shí)候，是從右向左袁铐，一層層的去遍歷尋找揭蜒，如果層級(jí)太多，必然增加了渲染時(shí)間剔桨，影響渲染速度屉更。另外，如果選擇器層級(jí)過多领炫，也就間接反應(yīng)了偶垮，你的HTML結(jié)構(gòu)可能寫得不夠簡(jiǎn)潔。

　　那么具體多少層合適帝洪？一般建議是不超過4層似舵，但話又說回來，超過4層會(huì)怎樣嗎葱峡？不會(huì)有多明顯的影響砚哗，除非你寫到很恐怖的數(shù)量，或者項(xiàng)目極其龐雜砰奕，可能能看出來影響蛛芥，其實(shí)從我們?nèi)粘Ｐ枨髞砜矗?層以內(nèi)足可以解決絕大多數(shù)問題，故而军援，是合理的仅淑。

　　避免使用元素選擇器

　　出于兩點(diǎn)考慮：

　　第一點(diǎn)，和上一段提到的相關(guān)胸哥，在HTML中涯竟，有很多常用的高頻元素，比如空厌，div庐船、p、span嘲更、a筐钟、ul等。如果赋朦，你在多層選擇器的最內(nèi)層使用了元素選擇器篓冲，那么李破，在開始尋找時(shí)，瀏覽器就會(huì)遍歷HTML中的所有該元素纹因，顯然喷屋，這是沒有必要的。

　　第二點(diǎn)瞭恰，我們的需求和代碼結(jié)構(gòu)都是存在著潛在變化的屯曹，今天寫好了一個(gè)頁面，明天可能就要再加進(jìn)去一個(gè)按鈕惊畏，再加進(jìn)去一句話恶耽，再加進(jìn)去一個(gè)圖標(biāo)。我們寫好的一個(gè)結(jié)構(gòu)颜启，也隨時(shí)可能被復(fù)用到別的結(jié)構(gòu)中去偷俭。所以，如果缰盏，你使用了元素選擇器去定死某個(gè)東西涌萤，不論是新加進(jìn)來的東西，還是被復(fù)用的東西加到別的結(jié)構(gòu)里去口猜，都極有可能產(chǎn)生樣式的沖突负溪，這個(gè)時(shí)候，你又不得不寫多余的樣式進(jìn)行覆蓋修正济炎，或者重新定義類川抡。

　　所以，出于以上考慮须尚，在具體的代碼模塊中崖堤，盡量不要使用元素選擇器，使用元素選擇器的前提是耐床，你完全的確定密幔，不會(huì)導(dǎo)致出現(xiàn)問題。注意撩轰，我用的限定范圍是“具體的代碼模塊”老玛，那么用于定義通用規(guī)則的樣式，是可以的钧敞，也是推薦使用的，比如麸粮，reset溉苛。也可以是別的地方，這就需要我們自行考量弄诲。

　　避免使用群組選擇器

　　群組選擇器會(huì)有什么問題愚战？直接上圖吧娇唯。

　　圖中這種情況不多見，此處只是舉個(gè)例子寂玲，這里寫了三組選擇器塔插，用來定義不同地方的同一種樣式，其明顯的缺陷是拓哟，如果有第四個(gè)地方需要使用到想许，你不得不再往里加一組選擇器，如果有10個(gè)不同的地方断序，你就寫10個(gè)流纹？這對(duì)于維護(hù)來說，是很痛苦的违诗，聰明的我們漱凝，怎能被如此繁復(fù)又不必要的勞動(dòng)所困擾，故而诸迟，墻裂不推薦此種做法茸炒，完全可以提取出來一個(gè)公用類，定義統(tǒng)一樣式阵苇，然后壁公，哪里需要放哪里，復(fù)用和維護(hù)都會(huì)更加方便慎玖。

　　當(dāng)然贮尖，你可能會(huì)說，我在寫第一個(gè)的時(shí)候趁怔，不會(huì)知道后面還有那么多湿硝，有沒有必要提取是不知道的，是的润努，所以关斜，需要你根據(jù)經(jīng)驗(yàn)去判斷，也需要在項(xiàng)目推進(jìn)過程中铺浇，適時(shí)的對(duì)代碼進(jìn)行整理和重構(gòu)痢畜。

　　文件引入的數(shù)量和順序

　　對(duì)于剛接觸網(wǎng)頁的朋友來說，這兩點(diǎn)也是容易忽視的鳍侣，因?yàn)樗鼈兛雌饋頉]什么大影響丁稀，多幾次請(qǐng)求，樣式是否已經(jīng)加載倚聚，都沒那么容易把人逼瘋线衫。但是出于對(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ā)

　　通用和語義

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è)特定樣式屬于哪一類评疗，它在頁面的整體范圍內(nèi)的作用。在大型項(xiàng)目中茵烈，它更可能有在多個(gè)文件中被打破的樣式百匆。在這種情況下，命名約定也可以更容易地找到一個(gè)樣式屬于哪個(gè)文件的文件呜投。

　　很多時(shí)候加匈，我們需要一個(gè)東西被定義為通用的，以便復(fù)用仑荐，比如：模塊標(biāo)題雕拼、按鈕、提示文字粘招、圖標(biāo)等啥寇，最開始的時(shí)候，我們習(xí)慣去看視覺稿的內(nèi)容洒扎，是“新聞”辑甜，我們就定義“news”，是“關(guān)于”袍冷，我們就定義“about”磷醋，是紅色的按鈕，我們就定義“red-btn”等胡诗，這樣會(huì)導(dǎo)致一個(gè)問題邓线，如果有另外一個(gè)跟新聞列表差不多的樣式和結(jié)構(gòu)，但不是新聞煌恢，怎么辦骇陈？繼續(xù)使用“news”顯然不合適，這就告訴我們瑰抵，不能把目光局限于內(nèi)容缩歪，需要內(nèi)容和結(jié)構(gòu)分離。

　　不能用“news”了谍憔，那用什么呢匪蝙？abc？123习贫？這樣總不會(huì)沖突了吧逛球，萬事大吉~其實(shí)，這是走了另一個(gè)極端苫昌，這樣雖然在很大程度上避免了和別的模塊沖突颤绕，但其本身的可讀性就被大大降低了，別人祟身，甚至你自己過一段時(shí)間都會(huì)忘記它是什么奥务，對(duì)于團(tuán)隊(duì)合作是很不利的。至于需要用什么樣的命名方式袜硫，需要你根據(jù)項(xiàng)目的整體來進(jìn)行規(guī)劃氯葬，適合根據(jù)什么特點(diǎn)來區(qū)分與之不同的結(jié)構(gòu)，又能讓人比較容易的在名稱和結(jié)構(gòu)之間建立聯(lián)系婉陷，比如所屬類別帚称、功能、頁面等秽澳。

　　團(tuán)隊(duì)和個(gè)人

　　一個(gè)團(tuán)隊(duì)當(dāng)中闯睹，大家的經(jīng)歷不同，編碼水平和習(xí)慣也不同担神，這樣就會(huì)造成楼吃，一個(gè)人一個(gè)寫法，你用中劃線妄讯，我用下劃線孩锡；我用英文全拼，你用簡(jiǎn)寫捞挥，等等浮创。這些雖然沒有什么對(duì)錯(cuò)之分，但對(duì)于團(tuán)隊(duì)成員之間的協(xié)作造成了不小的障礙砌函，別人必須花時(shí)間去適應(yīng)和讀懂你是怎樣組織和定義的斩披，這就無形之中提高了成本。

　　所以讹俊，就有了“團(tuán)隊(duì)規(guī)范”存在的必要垦沉，規(guī)范除了一些寫法上的規(guī)定，讓我們的代碼更加統(tǒng)一仍劈、清晰厕倍、可讀性更強(qiáng)、辨識(shí)度更高贩疙。還可以提取一些最佳實(shí)踐和復(fù)用模塊等讹弯，對(duì)于團(tuán)隊(duì)里每個(gè)人來說况既，都是有好處的。

　　當(dāng)然组民，對(duì)于人來說棒仍，最難的，莫過于調(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ì)的談過CSS預(yù)處理器仪壮，我曾經(jīng)對(duì)它也是排斥的憨颠，因?yàn)閷W(xué)習(xí)成本，因?yàn)橛X得應(yīng)用起來沒有必要睛驳±有模可是一旦你決定去學(xué)習(xí)使用它，就會(huì)覺得不是那樣乏沸，預(yù)處理器在向你介紹它自己的時(shí)候淫茵，就有特意強(qiáng)調(diào)過，它的語法是和CSS完全兼容的蹬跃，也就是說匙瘪，你在LESS或者SASS文件中，直接寫CSS代碼是沒有問題的蝶缀。除此之外丹喻，它能給我們提供很多便利，比如定義統(tǒng)一的變量翁都；使用嵌套而不用一直重復(fù)著寫一些選擇器碍论；可以提取公共的代碼塊然后很方便的復(fù)用等等。

　　故而柄慰，當(dāng)我們已經(jīng)把CSS組織和書寫得很好了之后鳍悠，預(yù)處理器，就是再次為我們插上一雙翅膀坐搔，能更靈活和高效的編碼藏研。

　　從現(xiàn)有模式出發(fā)

　　再來簡(jiǎn)單看看一些廣為流傳的模式。（ps：先后順序與排名概行、好壞無關(guān)）

　　一蠢挡、OOCSS——Object Oriented CSS

　　接觸過計(jì)算機(jī)的應(yīng)該都知道，OOP——Object Oriented Programming，如果你是第一次接觸OOCSS业踏，你會(huì)很困惑禽炬，難道是“面向?qū)ο蟮腃SS”嗎？它不是一本真正的編程語言啊勤家，如何面向?qū)ο螅?/p>

　　OOCSS瞎抛，最早被提及，是在2009年却紧，它的兩大原則是：

　　separating structure from skin and container from content.

　　直譯過來就是，結(jié)構(gòu)和皮膚分離胎撤，容器和內(nèi)容分離晓殊。

　　即不要把結(jié)構(gòu)和皮膚以及內(nèi)容進(jìn)行強(qiáng)耦合，而是相互獨(dú)立伤提，所要達(dá)到的目標(biāo)是更易復(fù)用和組合巫俺，可以選擇使用，選擇引用等肿男。

　　詳細(xì)了解鏈接：https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

　　二介汹、SMACSS——Scalable and Modular Architecture for CSS

　　從實(shí)踐上說，OOCSS給出了一種值得借鑒的思想舶沛，但在代碼的組織方面嘹承，它并未給出具體的實(shí)施方法，從這一點(diǎn)上來說如庭，SMACSS更進(jìn)一步叹卷。

　　它的核心是：

　　1、Base（基礎(chǔ)）

　　基礎(chǔ)的樣式坪它，就是一些需要最先定義好骤竹，針對(duì)于某一類元素的通用固定樣式。

　　2往毡、Layout（布局）

　　布局樣式蒙揣，是跟頁面整體結(jié)構(gòu)相關(guān)，譬如开瞭，列表懒震，主內(nèi)容，側(cè)邊欄的位置惩阶、寬高挎狸、布局方式等。

　　3断楷、Module（模塊）

　　模塊樣式锨匆，就是我們?cè)趯?duì)頁面進(jìn)行拆的過程中，所抽取分類的模塊，這類的樣式分別寫到一起恐锣。

　　4茅主、State（狀態(tài)）

　　頁面中的某些元素會(huì)需要響應(yīng)不同的狀態(tài)，比如土榴，可用诀姚、不可用、已用玷禽、過期赫段、警告等等。將這類樣式可以組織到一起矢赁。

　　5糯笙、Theme（主題）

　　主題是指版面整個(gè)的顏色、風(fēng)格之類撩银，一般網(wǎng)站不會(huì)有頻繁的較大的改動(dòng)给涕，給我們印象比較深的是QQ空間，其他應(yīng)用的不是很多额获，所以够庙，這個(gè)一般不會(huì)用到，但有這樣一個(gè)意識(shí)是好的抄邀，需要用到的時(shí)候耘眨，就知道該怎樣規(guī)劃。

　　有了以上5點(diǎn)分類策略撤摸，我們的代碼組織起來毅桃，思路就會(huì)很清晰，會(huì)安排的很有序准夷，另外的好處是钥飞，可以解決命名難和混亂，之所以有這個(gè)問題衫嵌，主因便是我們不知道以怎樣的標(biāo)準(zhǔn)去定義元素的所屬和特點(diǎn)读宙，有了分類之后，我們不會(huì)很隨意和混亂的去命名楔绞，有了依據(jù)结闸，就能更輕松，也不易沖突酒朵。

　　詳細(xì)了解鏈接：https://smacss.com/

　　三桦锄、Meta CSS

　　原子類，也可以稱之為“無語義”類蔫耽，像這樣：

　　它的特點(diǎn)是什么结耀？樣式和結(jié)構(gòu)、內(nèi)容無關(guān)，預(yù)先定義好這么一組規(guī)則图甜，在需要的地方加上即可碍粥，我相信每個(gè)人第一次看到這種寫法的時(shí)候，都會(huì)想：還能這樣寫昂谝恪嚼摩？！是的矿瘦，總有一些人枕面，一些新的思想和方法會(huì)涌現(xiàn)出來，它就是其中之一缚去，當(dāng)然膊畴，并不是在稱贊其本身有多么好，而是說這種現(xiàn)象和過程是好的病游，它本身經(jīng)常被人吐槽，比如：“這樣寫和直接內(nèi)聯(lián)有區(qū)別嗎稠通？”衬衬、“如果要調(diào)整樣式，就要去改HTML改橘，維護(hù)更加麻煩滋尉，也有違樣式和結(jié)構(gòu)分離的初衷”等等，其實(shí)我個(gè)人也是不贊成上面這種寫法的飞主，如果你要把這些抽離出來狮惜，那么還有什么抽不出來的呢？而且這些屬性碌识，在項(xiàng)目之間碾篡，頁面之間，模塊之間筏餐，并沒有太大的通用性开泽，把這些抽出來，只不過是稍微懶省勁兒些魁瞪，但為了照顧到更多情況穆律，你必須寫入冗余代碼，是得不償失的导俘。

　　雖然它有缺點(diǎn)峦耘，我個(gè)人贊成另外的一些東西分出來，比如：浮動(dòng)（float）旅薄、文本布局（text-align）辅髓、Flexbox布局等，這些是沒有那么多可能性的值，而且使用頻繁利朵，復(fù)用方便律想，改動(dòng)較少，除此之外绍弟，你還可以提取另外一些公共的小顆粒類技即，比如按鈕的種類，文字顏色的種類等樟遣，這些和CSS本身無關(guān)而叼，和項(xiàng)目相關(guān)，這就是借鑒其思想豹悬，而不是直接拿來用葵陵。

　　四、BEM

　　嚴(yán)格說來瞻佛，BEM不是一套有骨有肉的模式脱篙，也不僅僅局限你在CSS的層面去規(guī)劃，它是一種怎樣去組織伤柄、編寫代碼的思想绊困，而且，看似簡(jiǎn)單的它适刀，對(duì)前端界的影響卻是巨大的秤朗。

　　它的核心如下：

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

　　它幫助我們定義頁面中每一部分的級(jí)別屬性取视，從某種意義上說，也是一種“拆”常挚。命名規(guī)則如下：

　　它的出現(xiàn)作谭，曾給不少人帶來啟發(fā)，但是也有另一部分人仍然抱著挑剔的態(tài)度奄毡，譬如：

　　1丢早、風(fēng)格不統(tǒng)一，顯得代碼不夠整潔美觀

　　2秧倾、可能會(huì)導(dǎo)致類名過長(zhǎng)

　　還是前面說的怨酝，你可以不去直接用它，但要清楚它的優(yōu)點(diǎn)：能夠使得我們僅通過類名就知道哪些代碼是屬于一個(gè)模塊內(nèi)那先，以及在模塊中所起的作用农猬。然后借鑒之。

　　當(dāng)然售淡，BEM集聚了很多人的心血斤葱，也得到了很多的贊譽(yù)慷垮，其中就包括OOCSS的作者。所以揍堕，它肯定不是這么簡(jiǎn)單料身。它還會(huì)告訴你，怎樣配合著js來寫衩茸，你的文件怎樣組織更好芹血，項(xiàng)目該怎么構(gòu)建等。詳細(xì)可以到官網(wǎng)去查閱楞慈。地址：https://en.bem.info/

　　從實(shí)際出發(fā)幔烛，決定結(jié)果的人是你

　　到底怎樣使用設(shè)計(jì)模式？

　　雖然已經(jīng)有成熟的設(shè)計(jì)模式囊蓝，但在實(shí)際當(dāng)中饿悬，你可能覺得哪個(gè)跟自己的項(xiàng)目都不能完全吻合，或者你要去為了使用它們而調(diào)整聚霜，成本很高狡恬。其實(shí)，我們不需要去迎合模式蝎宇，要讓模式為我所用傲宜，你需要去了解它們背后的原理，要知道它們用什么方式解決了什么問題夫啊，然后借鑒之，用它的方式解決我們的問題辆憔，就好撇眯，這樣就不需要作難要不要用，也不需要糾結(jié)選哪個(gè)虱咧，不是簡(jiǎn)單的說哪個(gè)好熊榛，哪個(gè)不好，總有我們能夠用得上它的地方腕巡。海納百川玄坦，集百家眾長(zhǎng)。

　　我個(gè)人一直以來所堅(jiān)持的另一個(gè)觀點(diǎn)就是绘沉，前端開發(fā)的三駕馬車——html煎楣、css、js车伞，不要择懂，也不能孤立的去談那樣好或者這樣好，我們極少會(huì)有只用一次的代碼或者模塊另玖，也不會(huì)只寫一種語言困曙，三駕馬車都是在一起協(xié)作的表伦，都是會(huì)有復(fù)用、擴(kuò)展和團(tuán)隊(duì)合作多方面的因素在里面慷丽。故而蹦哼，不能抱著這樣的想法：我現(xiàn)在就在做這個(gè)，它就是唯一的要糊，就是固定的纲熏，沒問題。其實(shí)很多問題都是潛在的杨耙，要帶著發(fā)展眼光去看待赤套。項(xiàng)目的文件之間，項(xiàng)目之間珊膜，團(tuán)隊(duì)成員之間容握，不論你的分工是哪塊，都要考慮到前后的影響和可能給合作帶來的不便车柠。

　　怎樣才是最佳實(shí)踐剔氏？有“實(shí)踐”，才有“最佳”竹祷，脫離實(shí)際情況談最佳谈跛，就是空中樓閣。那么塑陵，最好的模式感憾，不是哪個(gè)經(jīng)典的模式，而是在項(xiàng)目進(jìn)行中令花，不斷的磨合調(diào)整而出的阻桅。故而，不需要再懼怕看起來不明覺厲的設(shè)計(jì)模式兼都，也不需要因?yàn)樽约哼€不懂設(shè)計(jì)模式而郁悶嫂沉，它就是人們總結(jié)出來的實(shí)戰(zhàn)方法，你也可以有自己的模式~

歡迎加入技術(shù)QQ群：364595326