css規範

時間 2019-11-29

標籤 css 規範欄目 CSS 简体版

原文原文鏈接

高質量的CSScss

應用CSS的能力應該分紅兩個部分：一部分是CSS的API，重點是如何用CSS控制頁面內的元素的樣式；另外一部分是CSS框架，重點是如何對CSS進行組織。html

組織CSS前端

1、組織劃分java

1）、對CSS的組織見仁見智，能夠按功能劃分：將控制字體的CSS集中在font.css文件裏，將控制顏色的CSS集中的在color.css文件裏，將控制佈局的CSS放在layout.css文件裏。程序員

2）、按區塊劃分：將頭部的CSS放在head.css裏，底部放在font.css裏，側邊欄放在sidebar.css裏，主體放在main.css裏。web

3）、按職能劃分，base.css+common.css+page.css。將網站內的全部樣式，按照職能分紅base,common,page。任何一個網頁的最終表現都是由這三者共同完成，這三者不是並列結構，是層疊結構。編程

2、base層瀏覽器

這一層位於三者的最底層，提供CSS reset功能和粒度最小的通用類—原子類。這一層會被全部頁面引用，是頁面樣式所需依賴的最底層。這一層與UI設計師無關，不管何種風格的設計均可以應用它，因此base層要力求精簡和通用。若是將用CSS控制頁面樣式比喻建房子，這一層的核心職能就是爲房子打好地基（CSS reset）,並將建房用的磚塊（原子類）準備充足。由於全部的房子都要打地基，也都須要磚塊，因此base層具備高度可移植性，不一樣的設計風格的網站均可以使用同一個base層。由於這一層的內容不多。因此能夠簡單的放在一個文件裏，例如base.css。base層相對穩定，基本上不須要維護框架

3、common層編輯器

這一層位於中間，提供組件極的CSS類。提到組件，就讓人想起模塊化，」模塊化」能夠從樣式和行爲兩個層面來考慮，與common層相關的樣式的模塊化。咱們能夠講頁面內的元素拆分紅一小塊一小塊功能和樣式相對獨立的「模塊」，這些「模塊」有些是不多重複的，有些會大量重複，咱們能夠將大量重複的「模塊」視爲一個組件，咱們從頁面裏儘量提取出來，放在common層裏，common層就至關於MVC模式中M(Model,模型)。爲了保證重用性和靈活性，M須要儘量將內部實現封裝，對可能會常常變化的部分提供靈活的接口，

Common層就像建房時用到的門窗，小元件，好比玻璃，門板，鑰匙孔，門窗能夠總體移動、增減，但門窗自己的構造是相對穩定的。房子的門窗就比如這個網站選用的UI組件。門窗最好與整個房子的保持一致，一樣，網站最好讓UI組件的風格保持相同，UI組件是網站中的單位，在網站內部能夠高度重用，但不一樣的網站可能會有不一樣的UI組件，因此common是網站級，不一樣的網站有不一樣的common層，同一個網站只有一個common層，可是網站規模很大也能夠進行拆分，common_form.css,common_imageList.css，common層最好一個負責，統一管理。

第一個技巧：模塊與模塊之間儘可能不要包含想聽的部分，若是有相同的部分，應將它們提取出來，拆分紅一個獨立的模塊

第二個技巧：模塊應在保證數量儘量少的原則下，作到儘量簡單，以提升重用性。

4、page層

網站高度重用的模塊，咱們把她們視爲組件，放在common層；非高度重用的模塊，能夠把它們放在page層，page層位於最高層，提供頁面級的樣式。一樣，page層就比如是房間內的裝飾畫，不一樣的房間張貼的裝飾畫各不相同，它不像磚塊，全部的房子都相同，也不像門窗，同一個房間裏都相同，它對重用性沒有要求，可根據各個房間佈置的須要任意張貼，這個page層也能夠分離出來,page1.css，page2.css，page3.css。但可能會產生大量的css文件，有些page的css很是小，帶來維護上的麻煩，若是網站不夠大，建議把page層的代碼放在一個page.css文件裏，根據頁面配上註釋，分塊書寫，便於維護..

5、總結：base層基本上不須要維護，common層修改的幅度不會很大，一般一我的負責維護，到Page層，代碼可能由不少人開發，如何避免衝突是個須要注意的問題，一般咱們經過命名規則來避免衝突。

CSS的命名

CSS的命名推薦使用英語，不要使用漢語拼音。頭部用head,底部用foot，主體用main，導航用nav，菜單用menu，若是程序員非要用拼音也不是不行，但爲了方便閱讀和理解，提升可維護性，我推薦用這樣的命名方式，也爲了咱們的英語可以獲得提升，擴大詞彙量，能夠閱讀國際的一手資料。

當一個容器須要兩個單詞來表達，好比一個關於時間的無序列表取名爲timelist，time和list，但他們連在一塊兒，很難一眼認出來，可讀性很差，若是命名須要用到兩個或兩個以上的單詞，一般作法，兩種

、駱駝命名法，例如，timeList，dropMenu，subNavMenu

、劃線命名法

、中劃線，例如drop-menu、sub-nav-menu

、下劃線，例如drop_menu、sub_nav_menu

、推薦，兩種方式組合

駱駝命名法用於區別不一樣單詞，劃線用於代表從屬關係，好比一個列表，ul的名字是timeList，而後這個列表的最後一個是不一樣於其餘的樣式，好比下劃線不須要，那麼有些人用timeList:last僞類實現，可是若是存在瀏覽器的兼容，不兼容僞類的時候，那麼咱們就能夠在最後li給他一個.last，那麼.last是個過於簡單且經常使用的命名，編寫代碼要時刻保持「團隊合做」意識，將衝突降到最低，若是工程師A過於依賴子選擇符，那麼使CSS中大量存在，.timeList .last，.nameList .last，.ageList .last等選擇符的層疊，產生意料以外的影響，除了.list，還有.first，.item等，爲了將風險降到最低，咱們最後一個用.timeListLastItem,爲了表示從屬關係，能夠改進爲.timeList-lastItem，這樣寫就可以表示這個lastItem是timeList列表下面的最後一列，這樣能夠進一步提升CSS命名的可讀性，不只能夠從命名中清楚看出各個單詞，還能瞭解到從屬關係，很明顯.timeList-lastItem是timeList下面的lastItem。既然劃線用於代表從屬關係，那麼不推薦.timeListLastItem或者.tiem-list-first-item這些方式。

、common層由一我的負責，那麼只須要考慮page層發生衝突的問題，解決page層發生衝突的問題加前綴。好比工程師A有一個時間列表.timeList,工程師B也有一個時間列表，也取名爲.timeList，工程師A沒有注意到工程師B的代碼，就致使代碼的衝突那麼在寫page層的時候，好比吳貞囡,wzn-timeList，密迎明寫成mym-timeList那麼各自的page層都加上本身的前綴，加了惟一前綴以後，工程師A和工程B均可以專心於本身負責的代碼，不用擔憂衝突問題。這個引伸出來的一個問題就是命名可能比較長，好比nav-item-select，wzn-timeList-lastItem-img，這個命名長，可是能夠帶來很好的可讀性，能夠避免多人合做的衝突，就算會增長Page層的代碼量，但權衡二者，長命名影響的只是css純文件，比起IMG，flash,等並非很大，這個帶來的壞處在可接受範圍內，好處就很明顯

、總結，用Java的面向對象來解釋，base,common至關於public公有屬性，page至關於private私有屬性。

掛多個class仍是新建一個class—多用組合，少用繼承

方案一：

<style>

.numberList1{ border:1px solid #ccc; padding:10px; }

.numberList1 li{ height:20px; line-height:20px; font-size:12px; }

.numberList2{ border:1px solid #ccc; padding:10px; }

.numberList2 li{ height:20px; line-height:20px; font-size:16px; }

.numberList3{ border:1px solid #ccc; padding:10px; }

.numberList3 li{ height:20px; line-height:20px; font-size:12px; color:red; }

</style>

<body>

</ul>

</ul>

</ul>

</body>

方案一實現了想要的結果，可是它很是冗餘「.numberList1」，「.numberList2」，「.numberList3」的CSS設置相同，「.numberList1 li」，「.numberList2 li」，「.numberList3 li」有一部分CSS一致，咱們對它進行改進

方案二

<style>

.numberList1,.numberList2,.numberList3{ border:1px solid #ccc; padding:10px; }

.numberLsit1 li,.numberList2 li,.numberList3 li{ height:20px; line-height:20px; font-size:12px;}

.numberList2 li{ font-size:16px; }

.numberList3 li{ color:red; }

</style>

<body>

</ul>

</ul>

</ul>

</body>

方案二，還有另一種思路，方案三

<style>

.font12{ font-size:12px; }

.font16{ font-size:16px; }

.cred{ color:red; }

.numberList{ border:1px solid #ccc; padding:10px;}

.numberList li{ heighr:20px; line-height:20px; }

</style>

<body>

</ul>

</ul>

</ul>

</body>

總結：方案一將圖中的三個模塊視爲徹底不一樣的模塊，彼此獨立，分別是.numberList1,numberList2,.numberList3，並對他們設置了樣式，缺點是代碼冗餘，方案二跟方案一的思路相同，仍將三個模塊視爲獨立的個體，只是使用css技巧將三個類提取出來，去除代碼的冗餘，方案三換了一種思路，提取更小的粒度更小的類，經過類的組合實現設計

從這裏看，方案二的調用簡單，一個模塊只要掛一個類，方案三調用稍麻煩，但也有效的控制了冗餘，代碼精簡，看起來，方案二，方案三都不錯，可是我如今，要三個ul種再加一個ul，字體16，紅色，邊框，邊距同上

<style>

.numberList1,.numberList2,.numberList3.numberList4{ border:1px solid #ccc; padding:10px; }

.numberLsit1 li,.numberList2 li,.numberList3 li,.numberList4 li{ height:20px; line-height:20px; font-size:12px;}

.numberList2 li,.numberList4 li{ font-size:16px; }

.numberList3 li,.numberList4 li{ color:red; }

</style>

<body>

</ul>

</ul>

</ul>

</ul>

</body>

按照方案三的思路

<style>

.font12{ font-size:12px; }

.font16{ font-size:16px; }

.cred{ color:red; }

.numberList{ border:1px solid #ccc; padding:10px;}

.numberList li{ heighr:20px; line-height:20px; }

</style>

<body>

</ul>

</ul>

</ul>

</ul>

</body>

按照方案三的思路，咱們無需擴展新的類，只需在html標籤的class裏將以前定義的類從新組合就行了

多用組合，少用繼承（面向對象編程中，一個很重要的原則）

由於前面有java的菜鳥基礎，在面向對象編程裏，也有相似的狀況，繼承與組合，繼承是將一個複雜且包含變化的類，拆分紅幾個複雜但穩定的自雷，首先明確一個抽象的父類，父類有這幾乎全部的方法和屬性，子類繼承父類，根據需求，添加新的方法和屬性，覆蓋掉與父類有變化的方法和屬性，但使用繼承的話，任何一個小的變化都須要從新定義一個類，很容易引發類的爆炸式增加，產生一大堆細微不一樣的自雷，

組合的思路是將一個複雜的類分紅容易產生變化和相對穩定的部分拆分出去，每一種可能的變化設計成一個個單獨的類，這樣，講一個複雜的類拆分紅了幾個簡單的類，類之間沒有繼承關係，這遵循了面向對象的「單一原則」，這寫容易變化的類，實現了類的組合，用組合的方式，能夠大大減小類的數量

方案三借鑑了編程領域類的組合的思想，如果能靈活運用這點能夠大大的減小類的數量，一方面減小代碼量，一方面提升了可維護性，另外一方面使類的職責單一，彈性更強，增長了類的重用性，提升了開發效率。

掛多個class會不會讓HTML標籤看起來臃腫

這樣作當然很差看，但它帶來的好處是不容忽視的，掛多個class，html標籤看起來不過輕盈，yahoo的前端開發，阿里的前端開發，攜程的前端開發也喜歡掛多個class的方式

低權重原則—避免濫用子選擇器（選擇符：標籤，class,id）

1、

<style>

span { font-size:40px; }

.test{ color:red; }

</style>

123456789既能夠獲得」font-size:40px」的樣式，又能夠獲得color:red的樣式，若是兩個不一樣的選擇符設置的樣式有衝突，又會如何

<style>

span { font-size:40px; color:green; }

.test{ color:red; }

</style>

123456789的顏色會是什麼呢？是對」span」設置成綠色的仍是紅色的，這就涉及到CSS選擇符的權重問題了。

CSS的選擇符是有權重的，當不一樣選擇符的樣式設置有衝突時，會採用權重高的選擇符設置的樣式，html標籤的權重是1，class的權重是10，id的權重是100

因此得出，span的權重是1，」.test」的權重是10，因此「123456789」的顏色是紅色

2、

<style>

span { font-size:40px; }

.test1{ color:red; }

.test2{ color:green; }

</style>

span標籤同時掛了test1,test2兩個class，它們的權重都是10，那麼123456789的權重又是哪一個呢？

若是css選擇符權重相同，那麼樣式遵循就近原則，哪一個選擇符最後定義，就採用哪一個選擇符的樣式，那麼此處爲綠色，這個掛class的前後順序沒有關係，text1 test2和test2 test1沒有區別

CSS權重是個很容易疏忽的問題，但事實上若是不太注意選擇符權重，常會出現意想不到的麻煩

3、

如今須要將「很重要」三個字設置爲紅色，咱們應該怎麼作？

方案一：

<style>

#test{ font-size:14px; }

#test span{ color:red; }

</style>

<p id=」test」>css選擇符權重<span>很重要</span></p>

方案二：

<style>

#test{ font-size:14px; }

.font{ color:red; }

</style>

<p id=」test」>css選擇符權重<span class=」font」>很重要</span></p>

不少工程師推薦使用方案一，由於使用子選擇器避免新增class，讓html代碼更簡潔，這麼考慮是有道理的，但若是如今有變化了，須要添加新的文字進來

<style>

#test{ font-size:14px; }

#test span{ color:red; }

</style>

<p id=」test」>css選擇符權重<span>很重要</span>，咱們要當心處理</p>

要求咱們將「當心處理」這幾個字設置爲綠色，咱們能夠這麼作，

<style>

#test{ font-size:14px; }

#test span{ color:red; }

.font{ color:green; }

</style>

<p id=」test」>css選擇符權重<span>很重要</span>，咱們要<span class=」font」>當心處理</span></p>

本覺得當心處理會變成綠色，但它卻被選擇符權重更高的，#test span設置成了紅色，子選擇器無心中影響到了咱們新添加的代碼，若是想達到預期

<style>

#test{ font-size:14px; }

#test span{ color:red; } //100+1=101

#test .font{ color:green; } //100+10=110

</style>

<p id=」test」>css選擇符權重<span>很重要</span>，咱們要<span class=」font」>當心處理</span></p>

而使用方案二，會如何

<style>

#test{ font-size:14px; }

.font1{ color:red; }

.font2{ color:green; }

</style>

<p id=」test」>css選擇符權重<span class=」font1」>很重要</span>，咱們要<span class=」font2」>當心處理</span></p>

咱們新掛上class，就能夠順利的完成樣式設置

爲了保證樣式容易被覆蓋，提升可維護性，CSS選擇符需保證儘量低。

少使用子選擇器，就須要多添加class，在web盛行的初期（前幾年），不少工程師認爲多添加class是很差的，若是能使用子選擇器就應儘可能使用，使用大量的class叫作」多class症」，在通過大量實踐後，我不認爲多class會有太大壞處，相反，與使用子選擇器相比，新增class反而更有利於維護

CSS編碼風格

多行式仍是一行式

.test{

width:100px;

height:50px;

color:#ccc;

}

.demo{

background-color:green;

font-size:20px;

}

.test{width:100px; height:50px; color:#ccc;}

.demo{background-color:green;font-size:20px;}

、多行式的編碼風格可讀性強，缺點是容易css文件行數過多，編輯樣式時，須要來回拖動文本編輯器的滾動條，影響開發速度

、過多的空白，增大CSS文件的大小

、一行式的編碼風格在可讀性方面稍差一點，但能夠有效減少CSS文件的行數，有利於提升開發速度，同時也能夠減少CSS文件的大小

、隨着前端調試工具的強大，好比火狐，谷歌自帶的樣式檢測工具，已經不須要仔細閱讀CSS文件了，一行式編碼風格逐步取代多行式的編碼風格，成爲主流，推薦一行式

2、同一個網頁，相同的id只能出現一次，不可重複，class能夠任意出現屢次，id權重是100，class權重是10,js原生提供getElementById,不提供getElenmentByClass,id不能重用，使用id會限制網頁的發展，好比，設計某個模塊只出現過一次，咱們使用id，沒問題，但需求變了，一樣的模塊再增長一個，問題就出現了，由於使用Id，不能重用，因此，通常狀況下，儘可能使用class,少用id