## css優先級 & 設計模式 >[info] 設計模式（Design pattern）是一套被反復使用、多數人知曉的、經過分類的、代碼設計經驗的總結。使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 毫無疑問，設計模式于己于他人于系統都是多贏的；設計模式使代碼編制真正工程化；設計模式是軟件工程的基石脈絡，如同大廈的結構一樣。 　 >web開發中花在前端的時間是后端的很多倍，而前端無非就是交互和界面，這些都離不開css，所以其實除了花在js上面的時間外，還有很大一部分的時間是花在了css上了。 這里也道出了為什么前端比后端費時的原因，現在的前端已經不是以前那樣簡單了，后端簡單的項目吃老本完全無壓力，但是前端則不同了，現在是看臉的時代了，前端現在正處于更新換代，飛速發展的時代。  好了，讓我們來 聊一聊css設計 模式 架構，ID，class div 規范 命名 語義 ，預處理器 前端架構…… > 印象中css具有下面這些性質，當然不一定對，只是印象中而已。 ~~~ css特性： 相同優先級的后面覆蓋前面的。 如果前面優先級高，后面的也覆蓋不了前面的。 生效時間不是在緊跟其后的DOM，而是整個頁面加載完畢后的時間。 定義一般最好不要超過三級。 必須保證語義性強，可讀性強。 層級關系合理。 優先級：ID>class>元素 定義越明確，優先級越高。 比如： path: div>p>a div p a {color: red} div a {color: #000} 鏈接顏色最后還是紅色 其實這也與下面的 “選擇器的特殊值”有關系的 3 > 2 正確理解：這個時候是選擇器直接作用于同一元素上，這是優先級的問題。 ~~~ 除了“選擇器的特殊值”還要注意一個問題，關聯性： ``` path: div>p>span>a a { color: red; } div p span { color: #333; } 鏈接還是紅色，說明再高“選擇器的特殊值”，沒有關聯性也沒用。必須先看關聯性。關聯性優先或者說關聯性大于一切“選擇器特殊值”。 認錯：上面說錯了，是自己理解錯了，根本不存在什么 關聯性 什么的，這是繼承的問題，color是可以被繼承的，上面的理解完全是錯的，作用力不在它身上何來的效果呢，只是單純的繼承性問題而已。 ``` >[danger] 實際上我說的關聯性是說錯了，應該是 [繼承](http://www.cnblogs.com/shishixiaozi/p/5730407.html) 問題。**只有選擇器直接作用于同一元素時才有優先級問題，否則只是繼承問題而已。** （我說的關聯性其實就是下面的優先級問題） 行內定義優先級最高。 參見： [看這一篇就夠了,css選擇器知識匯總](https://www.w3cschool.cn/css/css-selector.html) [css樣式就得這么寫(css參考樣式集合)](https://www.w3cschool.cn/css/css-style.html) * * * * * ### 擴展： **css設計分析** css雖然簡單，甚至算不上是一門語言，隨便怎么寫都可以，但正因為其靈活簡單，導致了在大型項目中書寫規范，整體設計上存在困難，不規范，很容易造成沖突，兼容性，高耦合等問題，所以此時css被提升到設計得層面上了。 下面分析css的特點，和幾鐘書寫的方式： ~~~ - 1. 直接根據元素寫，如：div {} - 2. 根據元素屬性寫，如：input[type="text"]:disabled { background-color: #dddddd; } - 3. 根據類名寫，如：.nav {} - 4. 根據ID寫，如：#site-logo {} ~~~ 元素和類名混用，嵌套等需要注意，在一個組件中，可能是類名和元素名混用，此時需要注意了，用元素名的話就必須使用規定的元素。總之css的書寫很靈活，實際中要靈活運用，很多時候運用一些語義性強的標簽也會有好處，比如strong天然的表示加粗，h表示標題，p為段落，span常用內聯元素，要靈活運用，結合使用才能達到最好的設計。要設計使用好不是那么簡單的。 >[danger] 由于css書寫靈活，它并不能算作是一門語言，但是維護一份好的樣式并不容易，開發人員擁有很大的自由，寫法多樣，多種方式相互組合，嵌套，還有在網頁中的復雜的具體情況（甚至根據書寫的結構還跟html文檔結構緊密相關），所以導致設計css越來越變得具有挑戰性。 這是css的四種基本寫法，然后還有下面幾種情況： - 層級嵌套（包含上面四種寫法的相互嵌套情況） - 優先級，由于css存在覆蓋問題，并且優先級和覆蓋問題相互關聯（見上面關于優先級的討論），所以往往情況會很復雜。 >[danger] 只要能單獨拿出來使用的組件就不能有嵌套，哪怕類名長一點（用`-`分割），凡是嵌套的則一定是一個整體不可分的組件。一個組件如果拆開（樣式/功能）破了不能用了，那么就是你就破壞了一個完整的組件。頁面中各個組件應該可以相互組合，互不影響，標簽，類名語義應該明確，越小的組件通用性越強，如表單輸入框。 **頁面中所有的元素都可以用組件的思維抽象出來。** 與程序開發一樣css設計也分架構，可分為這幾種css： - 通用初始化瀏覽器的css 這一般都是根據元素直接寫的 - 自定義/常用css相當于類庫，如: .f12, .m-t等常用的 - 皮膚，一般是用類選擇器 - 常用組件，少量通用的業務邏輯組件css，比如bootstrap中的組件，表單元素，按鈕 btn btn-default btn-lg 等等。 - 帶有業務/邏輯屬性的組件，這類組件在后臺中較少，但是前臺頁面個性化的頁面中比較多。 * * * * * >[danger] css應該盡量減少無用的嵌套，只要保證語義明確就可以了。比如header就直接寫，不用寫到容器里面去，不必要的css嵌套關系會使得樣式和頁面結構過度的耦合了，不利于css的靈活，和維護。（由于頁面結構往往很復雜，但是書寫css時不必固執的保持復雜冗長的嵌套結構，只需保證結構清晰簡單，語義明確即可。） ### 項目CSS風格設計 每個項目/企業都有它的風格，根據風格應該從一開始立項就統一品牌風格，色調，設計，比如品牌、形象顏色，鏈接等，按鈕等，主要色調，次要色調等。 比如天貓以前是那種深紅，現在整體全部改成了淺紅，還帶一點粉色，這樣顯得更加年輕活潑，也更加突出了天貓的品牌定位“理想生活上天貓”。以前是“上天貓就購了”，深紅突出的是天貓的高品質定位，而現在天貓品質定位階段已經完成，需要轉向國際化，多元化，需要突出更加年輕，大眾的定位，所以品牌形象的色調也改了。 下面來規劃下： - 形象風格 - 主色調：科技類偏藍，食品類偏綠等 - 這個形象可以使用三種色調，比例為 5 : 3 : 2 - 鏈接顏色 - 主色調中的一種，或者靠近主色調 - 文字顏色 - 標題顏色，文字顏色，小描述淺色等等 - 按鈕顏色 - 按鈕顏色（包括不同狀態的），文字顏色，表框顏色等等 - 背景顏色 - 大塊的純白色，淺色的文字背景等等 …… 更多的組件細節 >[danger] 其實這些并不多，也不麻煩，這樣設計的好處是整體有一個規范，后面的工作不會偏離項目整體的風格，能很好的體現出設計的靈魂，是的整體協調。 * * * * * ### 思考  >[danger] 由于css的[優先級](http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php)，[繼承](http://www.cnblogs.com/shishixiaozi/p/5730407.html)，覆蓋的天然特性，如果沒有組織的去寫，“東一西一榔頭”最后都是破天窗的漏洞污染，而利用層級關系，去組織結構就相當于命名空間了，這樣就不會出現屬性被污染的情況，但是這樣的弊端就是嵌套過深，或者難以把控層級關系和結構，維護麻煩，并且不利于重用，所以重用和靈活性是個矛盾體，css太過靈活，把握好這個度不是件容易的事。 一般來說，屬性命名方法更好復用，一般局用通用性，語義性命名業務邏輯成分較重，可能每個頁面都不一樣，還有一類有時可能加上位置等，logo-r這樣的，其實位置算是屬性，因為不是沒有業務成分，所以這是二者的結合使用。不管什么時候，起一個好的名字還真是不容易啊，尤其在css設計這里，關系到很多問題，從css里面基本能夠看出頁面的結構，并且大規模網站還要考慮更多的架構等問題，css也是需要架構的。 * * * * * ### 參考資料： - [抽象與具體](http://www.hmoore.net/xiak/php-node/247193) - [CSS 元素選擇器](http://www.w3school.com.cn/css/css_selector_type.asp) - [HTML DIV+CSS 命名規范大全？](https://www.zhihu.com/question/38773260) - [DIV+CSS規范命名大全集合](http://www.divcss5.com/jiqiao/j4.shtml) - [知識點滴 Div+CSS命名規范大全](http://blog.csdn.net/BaiHuaXiu123/article/details/52714374) - [網站命名規范大全CSS規范38](http://3y.uu456.com/bp_4ps6616qc94yj364r8wo_1.html) - [規范 - NEC : 更好的CSS樣式解決方案](http://nec.netease.com/standard) - [CSS規范 - 命名規則--（來自網易）](http://www.cnblogs.com/LoveOrHate/p/4448704.html) - [程序員英語單詞冊](http://www.hmoore.net/haixu926611/study-english) - [如何規范 CSS 的命名和書寫？](https://www.zhihu.com/question/19586885) - [前端人員必看CSS命名規范](https://www.douban.com/note/499976405/?type=like) - [Div+CSS命名規范（前端web開發命名規范） - lephy的個人頁面](https://my.oschina.net/leipeng/blog/215563) - [作為前端，應該知道的CSS命名規范](http://www.tuicool.com/articles/MbQ3qeV) - [常用html、CSS、javascript前端命名規范 - youfeng - 博客園](http://www.cnblogs.com/youfeng365/p/5846683.html) - [class命名規范](http://www.qdfuns.com/notes/30263/96678d9e13659a087f502ef044be839c.html) - [前端CSS命名規范大全](http://www.360doc.com/content/15/0519/08/10504424_471619710.shtml) - [前端小知識點--class命名規范](http://www.jianshu.com/p/eebed7f038bc) - [CSS樣式怎樣命名才規范，css命名規則大全](http://jingyan.baidu.com/article/a3aad71ac77985b1fb00960f.html) - [命名 CSS 的類或 id 時單詞間如何連接？](https://www.zhihu.com/question/19748433) - [網頁制作web前端工程師入門須知【新手必看】](https://www.douban.com/group/topic/90672880/) - [Css選擇器命名規則](https://www.qianduan.net/css-selectors-naming-2/) - [CSS 中 id 與 class 命名規則及編碼的 6 個最佳習慣](http://blog.csdn.net/holmes89757/article/details/51701120) - [沒那么難，談CSS的設計模式](http://kb.cnblogs.com/page/551422/) * * * * * - [CSS選擇器的權重與優先規則](http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php)  **討論選擇器的權重時不要忘記考慮瀏覽器自身的默認樣式表也有權重哦：**  可見瀏覽器默認的樣式權重是： ``` a:-webkit-any-link { color: -webkit-link; text-decoration: underline; cursor: auto; } 其實就相當于 a{} ``` 而上面已經說過 關聯性優先 的原則。 ``` .div .p .a { color: #333; } .div .a { color: #000; } ``` **只有關聯性一致時才可以談 選擇器的權重。** >[danger] 實際上我說的關聯性是說錯了，應該是 [繼承](http://www.cnblogs.com/shishixiaozi/p/5730407.html) 問題。 * * * * * <span style="color:red">**CSS媒體查詢并沒有什么優先級，它沒有任何特殊性，照常遵循普通的同級覆蓋原則，所以一般自適應代碼都放在最后。**</span> * * * * * - [CSS中為什么overflow:hidden能清除浮動(float)的影響？原理是什么？](https://www.zhihu.com/question/30938856) - [精簡高效的CSS命名準則/方法](http://www.zhangxinxu.com/wordpress/2010/09/精簡高效的css命名準則方法/) - [我是如何對網站CSS進行架構的](http://www.zhangxinxu.com/wordpress/2010/07/我是如何對網站css進行架構的/) - [面向屬性的CSS命名](http://www.cnblogs.com/lyzg/p/5561001.html) - [css中屬性值繼承小解](http://www.cnblogs.com/shishixiaozi/p/5730407.html) > 表述不夠準確，應當是默認沒有自動繼承的屬性，因為也可以自定義屬性為繼承。所以并不是某些屬性不能被繼承，而是默認不會被自動繼承，只不過有一些屬性是默認自動繼承的而已。其實這和元素的屬性缺省值有關，與其說自動繼承，不如說是元素的該屬性的默認缺省值為 繼承，而那些默認沒有自動繼承的屬性的缺省值 不為 繼承，而是為 最初。可見屬性的缺省值并不都是相同的，對于這點想必很多人一直都沒有意識到。 > > 不是不能繼承，而是這些屬性的默認缺失值不為 `inherit` ，但還是可以設置為 `inherit` 的 > > 最初的 initial、繼承 inherit、默認值（缺省值） 三者具有不同的意義。 - [如何看待 CSS 中 BEM 的命名方式？](https://www.zhihu.com/question/21935157) - [如何理解 Web 語義化？](https://www.zhihu.com/question/20455165) - [前端人員必看CSS命名規范](https://www.douban.com/note/499976405/?type=like) - [HTML DIV+CSS 命名規范大全？](https://www.zhihu.com/question/38773260) - [HTML標簽全稱對照](https://www.toutiao.com/i6452118053206360590/) - [HTML編碼規范 - (WEB前端命名規范)](http://blog.csdn.net/dong_pt/article/details/50948033) - [什么鬼，又不知道怎么命名class了](http://www.w3cplus.com/css/css-class-name.html) - [全棧 - 20 Web 基礎 網頁的血肉 CSS](https://juejin.im/post/58c7a09444d904006809b213) - [如何編寫高效的 CSS 選擇符](http://hejx.space/2017/04/24/高效CSS選擇器/) - [如何理解 CSS 類名語義化？](https://www.zhihu.com/question/21943416) - [一勞永逸的搞定 flex 布局 - 掘金](https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb) - [CSS in JS 簡介](http://www.ruanyifeng.com/blog/2017/04/css_in_js.html) - [OOCSS——概念篇_OOCSS 教程_w3cplus](http://www.w3cplus.com/css/oocss-concept) - [px、dp、dip、dpi、sp 等到底有什么聯系區別？產生的根源和設計時的影響如何？是否屏幕密度的決定原因？](https://www.zhihu.com/question/19625584) - [整理CSSStyleSheet相關的屬性 - web前端學習筆記 - SegmentFault](https://segmentfault.com/a/1190000004355197?_ea=580742) [前端設計，不得不知的CSS優先級及我們的建議](https://www.toutiao.com/a6453772040796111373/?tt_from=weixin&utm_campaign=client_share&app=news_article&utm_source=weixin&iid=12619555732&utm_medium=toutiao_android&wxshare_count=1) [css優先級計算規則 - wangmeijian - 博客園](http://www.cnblogs.com/wangmeijian/p/4207433.html#tt_daymode=1) [Vue: scoped 樣式與 CSS Module 對比](https://mp.weixin.qq.com/s/FoDei2gy0Mtqy608FOxGwQ) ***** update time: 2017-12-1 02:00:12