[筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS) @地瓜大的飛翔旅程

章節連結

課程對應章節
內容

OOCSS

範例
Sass 實戰全攻略系列文章

Sass/CSS 的設計模式，對於使用者來說，你可以把它想做是一種歸納管理 CSS 的思維。除了前一篇文章提到的 Smacss 外，OOCSS 提出另外一種收納 CSS 的方法：將容器、樣式、內容和結構都予以分離。

課程對應章節

Course 44 ～ Course 47 (全部一共有 72 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/ueo7bm2

內容

OOCSS

樣式互相組合，彼此之間不會衝突
容器(排版布局) 和內容樣式分離，這樣可以方便搬動
內容、樣式、常用工具(如清除浮動、隱藏文字……等)，彼此之間不要綁死，而是分門別類組合的話，運用起來會更靈活

範例

/*容器示範*/
.container
.nav
.col-md-9
.col-md-3
/*內容示範*/
.pagination
.tab-active
.list-group

/*自製 Grid，以 https://960.gs/demo.html 為例*/
.container_12{
  margin: 0 auto;
  width:960px;
}
.grid_1{
  display:inline;
  float:left;
  margin: 0 10px;
}
.container_12 .grid_1{
  width:60px;
}
.clear{
  clear:both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/*容器示範*/

.container

.nav

.col-md-9

.col-md-3

/*內容示範*/

.pagination

.tab-active

.list-group

/*自製 Grid，以 https://960.gs/demo.html 為例*/

.container_12{

margin: 0 auto;

width:960px;

}

.grid_1{

display:inline;

float:left;

margin: 0 10px;

}

.container_12 .grid_1{

width:60px;

}

.clear{

clear:both;

display: block;

overflow: hidden;

visibility: hidden;

width: 0;

height: 0;

}

Sass 實戰全攻略系列文章

[筆記] Sass 實戰全攻略 – 11 – 自製格線系統

[筆記] Sass 實戰全攻略 – 10 – 設計模式和規範

[筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式

[筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒

[筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)

[筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題

[筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法

[筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護

[筆記] Sass 實戰全攻略 – 2 – 變數的運用

[筆記] Sass 實戰全攻略 – 1 – 簡介

按讚加入粉絲團

課程對應章節

內容

OOCSS

範例

Sass 實戰全攻略系列文章

延伸閱讀