OOCSS——概念篇
2019獨角獸企業重金招聘Python工程師標準>>>
“Object Oriented”直譯就是面向對象，對于這個詞，大家并不陌生，但是加上一個CSS也就是說Object Oriented CSS，對于這個還是第一次見過，被叫作OOCSS(面向對象的ＣＳＳ)，其實這個東西早在2008年被提出，有些同學也在自己的項目中用過了。但有很多同學并不清楚，就拿我來說，我一開始還以為OOCSS是一個新語言或者是CSS框架，其實都不是，他只不過是一種新的寫法。那么下面就通過“什么是OOCSS”,“OOCSS理論”等幾個部分和大家一起來學習OOCSS。
一、什么是面向對象的CSS(OOCSS)
“面向對象的編程”的概念，開發商之間普遍存在的，他成為任何現代編程語言的一種基本形式，數據的抽象化、模塊化和繼承等特點在編寫代碼中得到了大規模的應用。面向對象的CSS是一種容易重用的一種CSS規則，也是OOP的概念，從而降低了頁面的加載時間，提高了網面的性能。這里關鍵的一點就是如何在頁面中識別，創建和模塊化可重用的對象，并在頁面中任何需要的地方重用，并擴展其附加功能。在這里我們所說的對象其實很簡單，就是指基本的HTML標簽和CSS樣式規則?，F在最關鍵的，也是最具有挑戰性的一點就是確定“對象”，并給這個對象創建CSS樣式規則。
這樣一來，大家對OOCSS心中就有一個清晰的概念性存在了，其實OOCSS不是一個框架，也不是一種技術，更不是一種新的語言，他只不過是一種方法，一種書寫方法，換句話說OOCSS其核心就是用最簡單的方式編寫最整潔，最于凈的CSS代碼，從而使代碼更具重用性，可維護性和可擴展性。您可能在平時寫代碼時使用了這個概念，只不過可能不知道這個術語罷了，下面大家先來看一個實例，比如說，我們有一個容器是頁面page的1/4寬，有一個藍色的背景，1px灰色的邊框，10px的左右邊距，5px的上邊距，10px的下邊距，以前對于這樣一個樣式，我們常常給這個容器創建一個類，并把這些樣式全部加上，如
<div class="size1of4"></div>把相應的樣式加在這個容器上
.size1of4 {background: blue;border: 1px solid #ccc;margin: 5px 10px 10px;width: 25%;}然而使用oocss的話，我們不這樣做，我把為這個容器創建更多的類，并且每個樣式對應一個類，這樣是為了后面可以重復使用這些組件的樣式，避免重復寫相同的樣式，就拿這個實例來說，我們給這個容器增加下面的類：bgBlue,solidGray,mts,mlm,mrm,mbm，如：
<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>樣式拆分到每一個組件上
.size1of4 {width: 25%;}.bgBlue {background:blue}.solidGray {border: 1px solid #ccc}.mts {margin-top: 5px}.mrm {margin-right: 10px}.mbm {margin-bottom: 10px}.mlm {margin-left: 10px}二、面向對象的CSS理論
引用OOCSS之父Nicole Sullivan話來說， 面向對象的CSS有兩個原則：
那么如何才能充分表現出OOCSS這兩個原理呢？
獨立的結構和樣式就是把布局樣式和設計樣式獨立出來。實現這一點最好的方式就是使用網格布局系統，比如說960s、YUI Grids、Blueprint CSS、YAML、1140Grids、Columnal或者是你自己創建的布局。當然你也可以不使用網格系統，你只要定義頁面上的主要對像的結構就行了。
獨立的容器和內容所指的是把內容從容器中分離出來，換過句話說任何對象（容器），應該適應接受任何形式的內容。
綜合上述，OOCSS最關鍵的一點就是：提高他的靈活性和可重用性。這個也是OOCSS最重要的一點。
三、使用面向對象的CSS的理由
我們為什么要使用OOCSS來編寫我們的樣式呢？理由很簡單，OOCSS編寫樣式其中給我們帶來一個最大的好處：將我們的CSS樣式更具有重用性，另外也使用我們的樣式變得更小；第三個好處就是我們可以容易的改變一個網站的設計。
四、如何使用面向對象的CSS
以下幾點是創建OOCSS的關鍵部分
那么究竟要如何來編寫OOCSS?了解了OOCSS一些基礎后，我們就通過實踐來編寫OOCSS。下面就開始吧：
1、創建一個組件庫（Create a component library）
在創建OOCSS第一步需要做的就是創建一個組件庫，這也是創建OOCSS最煩鎖的過程，所發時間也是最長的一個過程，但同時也是最關鍵的一個過程。因為你要去尋找哪些組件是可以重用的，然后給這些組件創建一個對應的HTML標簽，并創建各自UI所需要的樣式風格，例如一個博客中，有一個"meta data(作者發布時間相關信息)"將在一個頁面不同地方出現，如下圖所示：
經過觀察和思考，你發現上圖中三個"meta data"雖然位置在不同地，并且UI風格不一樣，但他們都有一個共同點，就是HTML結構可以是一樣的。這樣一來，你就可以選擇一個標記，作為HTML的基礎結構，如：
Base Markup
<p class=”metadata”><a>Author name</a>commented on<a>21-02-2010</a>@</p>Base Css
.metadata{font-size:1.2em; text-align:left; margin:10px 0;}這樣我們就把“meta data”單獨獨立出來了，使用了一個相同的HTML模板，并且有一個一樣的樣式，不管他在頁面什么位置出現，都會是一樣的結構一樣的樣式。但是從上圖我們明顯可以看到，有多個組件在變化，說簡單點就是"meta data"估頁面不同地方，樣式不一樣，解決這樣的我們都是使用css來處理。后面我們會進一步介紹如何來解決這樣的不同樣式效果。
在這里只是想通過這樣的實例來告訴大家，我們可以通過之種方式，找出所有可重用的組件，并給這個組件創建HTML和CSS樣式規則。我們甚至可以創建一個單獨的CSS組件庫，可以細化到margin,padding，border等，然后在拼合到一起。
2、獨立的容器和內容，并且避免樣式來依賴位置
獨立的容器和內容，并且避免樣式依賴位置也是用面向對象的方法創建CSS的基本要求之一，這里的核心思想是，把容器和內容獨立出來，這樣的好處是，內從插入到任何容器中都可以。但在頁面制作中，常常碰到一個組件出同在不 的容器中，也出現在頁面的不同位置之處。對于這樣的現象，前端工程師一般都會通過其父元素容器給特定的組件設置不同的樣式規則。
承接前面的實例，我們把“meta-data”放在不同的容器中，并給這個容器指定相應的類名或id名，如：
HTML Markup
/*post中的meta-data*/<div class="post"><p class=”metadata”><a>Author name</a>commented on<a>21-02-2010</a>@</p></div>/*comment中的meta-data*/<div class="comment"><p class=”metadata”><a>Author name</a>commented on<a>21-02-2010</a>@</p></div>/*userinfo中的meta-data*/<div class="userInfo"><p class=”metadata”><a>Author name</a>commented on<a>21-02-2010</a>@</p></div>CSS規則
.post .metadata {css code}.comment .metadata {css code}.userInfo .metadata {css code}在面向對象的CSS中，不提倡這種做法，也就是說OOCSS的做法主張避免這種類型的處理方法。OOCSS主張是通過在基礎組件中添加更多的類，從而擴展基礎組件的CSS規則，這也就是我們前面所說的OOCSS的擴展性。?下在我們一起看看如何擴展類。
3、獨立的結構和樣式規則(Separate structure and skin)
在創建一個組件庫（Create a component library）一節中我們特別強調過，如何創建一個可重用的組件，并且說了可重用性的組件的重要性創建基礎的結構(HTML)和創建基礎的類名。當我們按前面所介紹的創建好了這樣的一個基礎對象，有一點我們需要特別的注意：在給這個剛創建的對象寫樣式時，需要把樣式和其結構獨立出來。換句話說，定義一個組件庫中定義一個基礎類，我們不應該給樣式創建類似于“border,width,height,background”等樣式規則，不然在不同容器中使用就會發生杯具。在上面的實例基礎上看這個問題：
下面這個是基礎類上創建的樣式
.metadata{font-size:1.2em; text-align:left; margin:10px 0;}如果在基礎類上添加更多的樣式，如：
.metadata{font-size:1.2em; margin:10px 0; /*在基礎組件上新加的樣式*/width:500px; background-color:#efefef; color:#fff;}這樣一來杯具的事情就發生了，前面創建的基礎組件“meta data”就成了一個特定的組件了，在其他的容器中就難以重用了，從而失去了我們最開始使用OOCSS的宗旨了，那需要如何解決這樣的沖突呢？接著看下面：
4、使用類名來擴展基礎對象（Extend base objects using class names）
在“獨立容器和內容”一節中，我們討論過，為了讓基礎對象可重用，我們在不同的地方將其放入不同的容器中，從而通過上下文選擇器的使用，讓基礎對象達到重用的作用。雖然這樣表面上達到了重用性，但對于OOCSS來說并不是最理想的方法，那么為了避免上下文選擇器的使用，將基礎對象從他們的父容器中獨立分解出來，從而將整個基礎對象達到真正的可重用生，從而讓基礎對象在不同容器中實現不同的變化。實現這一點我們需要怎么做呢？為了解決這個問題，并不是像前面的一樣，將基礎對象插入一個父容器中，而是將基礎對象進行擴展，根據上下文，通過更多的類名，讓基礎對象在不同位置實現不同的效果，從而實現了我們前面所說的重用性。簡單點說就是通過對基礎對象擴展類名，從而達到基礎對象的可重用性。沿著前面的實例，我們看看如何進行修改。
將前面不理想的結構修改一下，如：
/*post中的meta-data*/<p class=”metadata postMetaData”><a>Author name</a>commented on<a>21-02-2010</a>@</p>/*comment中的meta-data*/<p class=”metadata commentMetaData”><a>Author name</a>commented on<a>21-02-2010</a>@</p>/*userinfo中的meta-data*/<p class=”metadata useInfoMetaData”><a>Author name</a>commented on<a>21-02-2010</a>@</p>分別在post,comment,userinfo三個地方的基礎對象meta data的基礎上擴展了一個相對應的類名，如：postMetaData,commentMetaData,userInfoMetaData。那么我們在來看其樣式規則的變化：
.metadata{font-size:1.2em; margin:10px 0;}.commentMetaData{font-size:1em; margin:0 0 10px 0; color:#063070; }.postMetaData{ color:#063070; }.useInfoMetaData{ color:#fff; }這是一個非常簡單的實例演示，我們利用一個博客中的"meta data"用為原型，針對創建OOCSS的幾個要點一步一步介紹如何創建這樣的一個meta data對象，主要是讓大家理解面像對象的CSS概念和如何更好的創建一個ＯＯＣＳＳ的原型。
5、堅持以語義來定義類的名稱
在制作一個高規?；蛘哒f大型的web項目，對于如何給元素命名將是一個挑戰性的工作，要在一定的語義環境下確保有語義的類名或者ID名，交且可以重復使用這些有語義的名稱，我想大家都非常的頭痛，特別是一些新同學。另外隨著OOCSS中對基礎對象的擴展，讓大家更容易跳進了創建“表像類名”的陷井中。比如大家平時中常定義的類名：leftCol,midCol,bottom,top,bigText,redText,borderText等；這樣的類名是不能重復使用的，在OOCSS中對基礎對象提高他的擴展性也帶來相當大的障礙。所以始終堅持以邏輯和語義來給元素定義類名才是王道。比如說我們給web頁面中的錯誤信息塊（紅色背景文本塊），我們不應定義類名為“redText”,定義為"warning"將更有語義化，更具有重用性。
五、面向對象的CSS的優點和缺點
我們中國人所說的萬物都是相生相克的，OOCSS也是一樣的，有其優點也有他的缺點存在。
OOCSS的缺點
OOCSS的優點
上面簡單的介紹了OOCSS的一些概念性知識，并通過一個實例簡單介紹啊一下OOCSS的基礎對象是怎么創建的，讓大家在腦海中對OOCSS有一個感性的認識，后面我會介紹OOCSS的其它相關知識，比如說其幾個核心內容：Template,Grids,Module和Content，當然還有更細的東西，這些都可以根據您自己的項目來決定。如果您對這個東西感興趣，可以觀注本站有關于這方面的更新。
轉載于:https://my.oschina.net/happysha/blog/83588
總結
以上是生活随笔為你收集整理的OOCSS——概念篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CentOS 6.3安装(详细图解教程)
- 下一篇： DPM2012保护sharepoint场