css理論有哪些

這篇文章主要講解了“css理論有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css理論有哪些”吧！

　　OOCSS、SMACSS及BEM都是有關(guān)css的方法論(準(zhǔn)確地說，其中BEM應(yīng)該是一個完整的前端開發(fā)理論，不僅限于css)，可作為實現(xiàn)優(yōu)秀css架構(gòu)(css architecture)的指南。

　　css易于理解，但應(yīng)用和維護(hù)并不簡單。在各種開發(fā)情景下，css都可能成為一個問題點。因此，我們編寫和組織css應(yīng)認(rèn)真、用心。

　　OOCSS

　　OOCSS (Object Oriented CSS)，字面意思是面向?qū)ο蟮腃SS，是由Nicole Sullivan提出的css理論，其主要的兩個原則是：

　　Separate structure and skin(分離結(jié)構(gòu)和主題) Separate container and content(分離容器和內(nèi)容)

　　用一個例子來說明。請看下面這樣的圖文排列：

　　本作的主角，帝國北部地方貴族施瓦澤男爵的養(yǎng)子，也是托爾茲士官學(xué)校特科班“Ⅶ組”的成員。

　　.media{

1. <p><font size="3">　　padding: 10px;</font></p>

2. <p><font size="3">　　}</font></p>

3. <p><font size="3">　　.media:after{</font></p>

4. <p><font size="3">　　display: table;</font></p>

5. <p><font size="3">　　clear: both;</font></p>

6. <p><font size="3">　　content: " ";</font></p>

7. <p><font size="3">　　}</font></p>

8. <p><font size="3">　　.media-image-container{</font></p>

9. <p><font size="3">　　float: left;</font></p>

10. <p><font size="3">　　margin-right: 10px;</font></p>

11. <p><font size="3">　　}</font></p>

12. <p><font size="3">　　.media-image{</font></p>

13. <p><font size="3">　　display: block;</font></p>

14. <p><font size="3">　　}</font></p>

15. <p><font size="3">　　.media-body{</font></p>

16. <p><font size="3">　　overflow: hidden;</font></p>

17. <p><font size="3">　　}</font></p>

18. <p><font size="3">　　.media-shadow{</font></p>

19. <p><font size="3">　　box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);</font></p>

20. <p><font size="3">　　}</font></p>

　　上面這段代碼用media表示了這種圖文排列的頁面元素。如果把構(gòu)成它的html、css及javascript(如果有)看做一個整體，那就相當(dāng)于這是一個元件，或者說對象(object)。它可以在站點的任何地方被重用。
　　這樣是如何體現(xiàn)OOCSS的兩個原則的呢?
　　Separate structure and skin
　　分離結(jié)構(gòu)和主題是在于將一些視覺樣式效果(例如background、color)作為單獨的“主題”來應(yīng)用。在上面的例子中的陰影效果，沒有被直接寫在media的樣式規(guī)則內(nèi)，而是被單獨寫在了一個名為media-shadow的class中。因此，它成為了可選擇、可拆分的主題。如果不需要對應(yīng)主題，什么也不要加，如果需要，加上對應(yīng)的class，就是這樣的思路。
　　Separate container and content
　　分離容器和內(nèi)容要求使頁面元素不依賴于其所處位置。在上面的例子中，css的選擇符都很短，無繼承選擇符(例如.header .media { })，所以，這個圖文排列的元件，可以在任何地方使用，且會有一致的外觀。
　　如果需要在特定的地方讓這個元件看起來不一樣一些，繼續(xù)為這個元件增加class，將“不一樣的部分”作為可配置的選項。元件的外觀仍不依賴其所處位置。

　　操作指南
　　可以看出，OOCSS風(fēng)格的css可以描述為兩點：
　　增加class 不使用繼承選擇符
　　OOCSS追求元件的復(fù)用，其class命名比較抽象，一般不體現(xiàn)具體內(nèi)容。

　　SMACSS
　　SMACSS (Scalable & Modular Architecture for CSS)，是由Jonathan Snook提出的css理論。其主要原則有3條：
　　Categorizing CSS Rules(為css分類) Naming Rules(命名規(guī)則) Minimizing the Depth of Applicability(最小化適配深度)
　　這些原則分別是什么意思呢?
　　Categorizing CSS Rules
　　這一點是SMACSS的核心。SMACSS認(rèn)為css有5個類別，分別是：
　　Base Layout(Major Components) Module(Minor Components) State Theme
　　Base Rules， 基礎(chǔ)樣式，描述的是任何場合下，頁面元素的默認(rèn)外觀。它的定義不會用到class和ID。css reset也屬于此類。
　　Layout Rules， 布局樣式。它和后面的Module Rules一同，描述的是頁面中的各類具體元素。元素是有層次級別之分的，Layout Rules屬于較高的一層，它可以作為層級較低的Module Rules元素的容器。左右分欄、柵格系統(tǒng)等都屬于布局樣式。
　　Module Rules， 模塊樣式。它可以是一個產(chǎn)品列表，一個導(dǎo)航條。一般來說，Module Rules定義的元素放置于前面說的Layout Rules元素之內(nèi)。模塊是獨立的，可以在各種場合重用。
　　State Rules， 狀態(tài)樣式，描述的是任一元素在特定狀態(tài)下的外觀。例如，一個消息框可能有success和error兩種狀態(tài)，導(dǎo)航條中的任一項都可能有current狀態(tài)。
　　繼續(xù)OOCSS中的例子，下面新增的讓元素不顯示的is-hidden就屬于State Rules：
　　...

1. <p><font size="3">　　復(fù)制代碼</font></p>

2. <p><font size="3">　　.is-hidden{</font></p>

3. <p><font size="3">　　display: none;</font></p>

4. <p><font size="3">　　}</font></p>

　　Theme Rules， 主題樣式，描述了頁面主題外觀，一般是指顏色、背景圖。Theme Rules可以修改前面4個類別的樣式，且應(yīng)和前面4個類別分離開來(便于切換，也就是“換膚”)。SMACSS的Theme Rules不要求使用單獨的class命名，也就是說，你可以在Module Rules中定義.mod { }然后在Theme Rules中也用.mod { }來定義需要修改的部分。

　　Naming Rules
　　Naming Rules是說在想class等的命名時，考慮用命名體現(xiàn)樣式對應(yīng)的類別。
　　按照前面5種的劃分，Layout Rules用l-或layout-這樣的前綴，例如：.l-header、.l-sidebar。
　　Module Rules用模塊本身的命名，例如圖文排列的.media、.media-image。
　　State Rules用is-前綴，例如：.is-active、.is-hidden。
　　Theme Rules如果作為單獨class，用theme-前綴，例如.theme-a-background、.theme-a-shadow。
　　Base Rules不會用到class和ID，是以標(biāo)簽選擇符為主的樣式，例如p、a，無需命名。
　　命名規(guī)則不需要嚴(yán)格遵守，可以根據(jù)實際情況和自身喜好做其他的約定。記錄自己的約定(寫文檔)，然后遵守，就是可行的。
　　Minimizing the Depth of Applicability
　　字面翻譯是最小化適配深度。通過一個簡單的描述來說明：
　　/* depth 1 */

1. <p><font size="3">　　.sidebar ul h4 { }</font></p>

2. <p><font size="3">　　/* depth 2 */</font></p>

3. <p><font size="3">　　.sub-title { }</font></p>

　　上下兩端css的區(qū)別在于html和css的耦合度。可以想到，由于上面的樣式規(guī)則使用了繼承選擇符，因此對于html的結(jié)構(gòu)實際是有一定依賴的。如果把h4元素搬到另一個位置，就有可能不再具有這些樣式。對應(yīng)的，下面的樣式規(guī)則只有一個選擇符，因此不依賴于特定html結(jié)構(gòu)，只要為元素添加class，就可以獲得對應(yīng)樣式。

　　當(dāng)然，繼承選擇符是有用的，它可以減少因相同命名引發(fā)的樣式?jīng)_突(常發(fā)生于多人協(xié)作開發(fā))。但是，我們不應(yīng)過度使用，在不造成樣式?jīng)_突的允許范圍之內(nèi)，盡可能使用短的、不限定html結(jié)構(gòu)的選擇符。這就是SMACSS的最小化適配深度的意義。

　　看起來，這一點和OOCSS的分離容器和內(nèi)容的原則非常相似。

　　主要目標(biāo)

　　SMACSS著力于實現(xiàn)兩個主要目標(biāo)：

　　更語義化的html和css 降低對特定html結(jié)構(gòu)的依賴 BEM

　　BEM，即Block， Element， Modifier，是由Yandex(俄羅斯最著名的互聯(lián)網(wǎng)企業(yè))的開發(fā)團(tuán)隊提出的前端開發(fā)理論。BEM通過Block、Element、Modifier來描述頁面。

　　Block是頁面中獨立存在的區(qū)塊，可以在不同場合下被重用。每個頁面都可以看做是多個Block組成。
　　
　　Element是構(gòu)成Block的元素，只有在對應(yīng)Block內(nèi)部才具有意義，是依賴于Block的存在。

　　Modifier是描述Block或Element的屬性或狀態(tài)。同一Block或Element可以有多個Modifier。
　　這三部分結(jié)合在一起，可以體現(xiàn)在class命名上，從而為開發(fā)者提供更友好、更有意義的css組織方式。其形式是：
　　.block { }

1. <p><font size="3">　　.block_modifier { }</font></p>

2. <p><font size="3">　　.block__element { }</font></p>

3. <p><font size="3">　　.block__element_modifier { }</font></p>

　　再回到前面OOCSS的那個圖文排列的例子，對應(yīng)用BEM的寫法的話就是：
　　本作的主角，帝國北部地方貴族施瓦澤男爵的養(yǎng)子，也是托爾茲士官學(xué)校特科班“Ⅶ組”的成員。
　　這樣的寫法的好處是，在class命名上以約定的形式攜帶了更多有用信息。在多人合作的時候，新接手這個項目的人，也可以很容易從class命名上分辨出來，哪些部分是Block，哪些是對應(yīng)的Element，哪些是Modifier，并進(jìn)一步推斷出哪部分html可以獨立使用。

　　BEM是完整的前端開發(fā)理論，這里只是提到了它采用的css的class命名規(guī)則?？梢钥闯?，BEM的命名規(guī)則可以使代碼更易于維護(hù)。
　　這些理論真的可以應(yīng)用嗎?
　　是的，而且有用。但是，請不要過于樂觀，任一種理論都只是對解決css編寫、維護(hù)問題的一種嘗試，及其經(jīng)驗總結(jié)。就實際具體的項目來說，你可能仍然會遇到困惑。這些理論最重要的是提供了一種思路(即使它們也提供開發(fā)模式的代碼庫)，你可能不直接應(yīng)用它們，但應(yīng)該通過它們認(rèn)識到，在寫代碼之前，需要多一些思考。
　　不直接編寫css而是采用less、sass等預(yù)編譯器，也同樣需要合理的代碼編寫和組織方式，因為可以從編譯后得到的css來分析，所以原則是相通的。

感謝各位的閱讀，以上就是“css理論有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css理論有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！