面向對象的CSS

時間 2019-11-11

原文原文鏈接

原文

　　簡書原文：https://www.jianshu.com/p/cb5e9f56ddcccss

大綱

　　一、面向對象的CSS(OOCSS)概念
　　二、面向對象的CSS的做用
　　三、面向對象的CSS的注意事項
　　四、面向對象的CSS的使用實例html

一、面向對象的CSS(OOCSS)概念

　　面向對象的CSS將頁面可重用元素抽象成一個類，用Class加以描述，而與其對應的HTML便可當作是此類的一個實例。
　　面向對象的CSS的出現是由於當存在大型項目的時候，會有不少的CSS樣式出現，這樣就會不少的CSS樣式代碼存在，爲了讓這些代碼更加的簡潔，就出現了面向對象的CSS。佈局

二、面向對象的CSS的做用

　　一、增強代碼複用以便方便維護
　　二、減小CSS體積
　　三、提高渲染效率
　　四、組件庫思想、柵格佈局可共用、減小選擇器、方便擴展
　　五、面向對象的CSS最大的好處是能夠隨時進行相關內容的擴展和重寫htm

三、面向對象的CSS的注意事項

　　一、不要直接定義子節點，應把共性聲明放到父類（這樣只是具備共性聲明的就能夠省略了）
　　二、結構和皮膚相分離（定義結構的和定義顏色的分開修飾）（這樣作的好處是以後對網頁的修改的時候，能夠保持網頁的佈局不動，而只是起到換膚的做用）
　　三、容器和內容相分離
　　四、抽象出可重用的元素，建好組件庫，在組件庫內尋找可用的元素組裝成頁面
　　五、往你想要擴展的對象自己增長class而不是他的父節點
　　六、對象應保持獨立性
　　七、避免使用ID選擇器，權重過高，沒法重用（ID通常是爲了JS服務的）
　　八、避免位置相關的樣式
　　九、保證選擇器相同的權重
　　十、類名簡短清晰語義化,OOCSS的名字並不影響HTML語義化對象

四、面向對象的CSS的使用實例

/*
    未運用OOCSS的思想前的代碼
*/
#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
/*
    使用OOCSS以後的代碼：將skin抽出
*/
.button {
  width: 200px;
  height: 50px;
}

.box {
  width: 400px;
  overflow: hidden;
}

.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}