首頁 > 文章 > web前端 > 關於CSS程式設計的OOCSS和SMACSS設計模式的介紹

關於CSS程式設計的OOCSS和SMACSS設計模式的介紹

不言原創: 2018-06-28 10:47:351192瀏覽

這篇文章主要介紹了淺談CSS程式設計的OOCSS和SMACSS設計模式,作者分析了這兩種設計CSS的不同思路,需要的朋友可以參考下

真心覺得寫出CSS 並不難，但是要寫出可維護的CSS 比其他程式語言還難。所幸已經有許多大師級的人物，提出許多設計模式和思維，藉由站在巨人的肩膀上可以讓事情事半功倍。這篇文章就來談談 OOCSS、SMACSS 和撰寫 CSS 時應該注意的規格。

（本文的範例用的是SCSS 語法）
OOCSS

#OOCSS 不是什麼新技術，只是一種撰寫CSS 的設計模式，或者可以說是一種「道德規範」，大致上我覺得重點只有兩個：

減少對HTML 結構的依賴
增加CSS class 重複性的使用

#減少對HTML 結構的依賴

<nav class="nav--main">   
  <ul>   
    <li><a>.........</a></li>   
    <li><a>.........</a></li>   
    <li><a>.........</a></li>   
  </ul>   
</nav>

一般的導覽列寫入法，結構應該會像上面的HTML 範例一樣，如果要對那些3499910bf9dac5ae3c52d5ede7383485 標籤定義樣式，CSS 的寫法可能寫成.nav--main ul li a {}，這種寫法先不管效能上的問題，可以看出來過度地依賴元素標籤的結構，有可能之後HTML 結構改變，這個CSS 就必須跟著重構，造成維護上多餘的成本。

若從這個例子來考慮，原則上3499910bf9dac5ae3c52d5ede7383485 都一定會接在25edfb22a4f469ecb59f1190150159c6 標籤的後面，一個25edfb22a4f469ecb59f1190150159c6 只會有一個3499910bf9dac5ae3c52d5ede7383485，通常不會獨立存在，那就可以寫成.nav--main a {}，會是比較好的寫法，甚至是直接給3499910bf9dac5ae3c52d5ede7383485 加上class nav--main_item。後者是 OOCSS 所提倡的用法。

這樣的寫法，一來效能理論上比較好（我沒辦法驗證），二來層次比較單純。
增加 CSS class 的重複使用

在 OOCSS 的觀念中，強調重複使用 class，而應該避免使用 id 作為 CSS 的選擇器。這種想法就是像
OOP
盡量抽離重複的程式碼，例如以下這個例子，這是兩個按鈕的CSS 樣式屬性：

.button {   
  display: inline-block;   
  padding: 6px 12px;   
  color: hsla(0, 100%, 100%, 1);   
  &.button-default { background: hsla(180, 1%, 28%, 1); }   
  &.button-primary { background: hsla(208, 56%, 53%, 1); }   
}

上面的CSS 將兩種不同樣式的button，抽離出重複的部份，並且定義在同個class
上。因此，要使用這樣的樣式，HTML 的寫法可能會長這個樣子：

<a class="button button-default">   
<a class="button button-primary">

先用button 宣告此為按鈕的樣式，再用button-default 或button -primary 作為按鈕底色的區別。這麼做可以維護成本變得比較低，例如：想要改網站上所有按鈕的大小，就只要修改 .button 的 padding 而已。
SMACSS

我對 SMACSS 的理解還不是很深入，或許把 Scalable and Modular Architecture for CSS 看完後會有更深一曾的理解。目前對SMACSS 的概念僅限於它對CSS 不同的業務邏輯所做的劃分方式：

但我認為原本的設計不是很妥當，因此我自己做了一些改良：
Base

Base 是設定標籤元素的預設值，例如瀏覽器的reset 可以寫在這裡，如果用的是Compass，只要@include global-reset 就好。這裡只會對標籤元素本身做設定，不會出現任何class 或
id，但是可以有屬性選擇器或是偽類：

html {}   
input[type=text] {}   
a:hover {}

Layout

Layout 是指整個網站的「大架構」的外觀，而非.button 這種小元件的class。網站通常會有一些主要的大區塊，可能是 header 或 footer，Layout 就是用來定義這些「大架構」的 CSS。如果有做 Responsive Web Design 或是用 Grid System，也是把規則寫在 Layout 這裡。

以下這是一個範例：

#header { margin: 30px 0; }   
#articles-wrapper { ......; }   
.sidebar {   
  &.sidebar--rightright { ......; }   
  &.sidebar-left { ......; }   
}

通常只有一個選擇器，一個 id、或一個 class。
Module

原本的 SMACSS 對 Module 的設計我覺得不是很好，所以我硬是將 Module
拆分出一個 Partial。

這裡的Module 顧名思義，就是可以在其他地方被重複使用，如果要找更明確的例子，我想就像Twitter Bootstrap 的Components
一樣，或者像前面OOCSS 所舉例的.button這種會被重複使用的元件模組。

模組不需要用任何的 prefix，因為 Module 就是設計來可以重複應用在不同的 page 上。
Partial

Partial 跟 Latout 不同，也跟 Module 不同，他比 Layout 的範圍小，可能是
header 底下的某個子元素。他不像 Module，他是特定單一領域下特別的設定。

.nav--main {   
  a { ......; }   
}

通常會將 Partial 的名稱加在子 class 作為 prefix，例如 .nav--main 底下的
.nav--main_item。至於為什麼要用這麼奇怪的命名方式呢？這等等在 CSS 規範部分會說明介紹。
State

State 负责定义元素不同的状态下，所呈现的样式。但是并非指一个元素的 :hover 或 :active 下的状态。举例来说，一个导航栏分页，目前所在页面的分页需要加上 .active
的属性表示目前位置是在这个分页，HTML 会长这样：

<nav class="nav--main">   
  <ul>   
    <li><a>.........</a></li>   
    <li class="active"><a>.........</a></li>   
    <li><a>.........</a></li>   
  </ul>   
</nav>

因此可以替 .nav--main 增加 .active 这样的子 class：

.nav--main {   
  // others…;   
  .active {   
    background: darken($background-color, 16%);   
  }   
}

有时候为了让阅读更贴近语义，会用比较友善的命名方式，以此段的范例来说，.is-active 就比 .active 来得好读。
Theme

Theme 是画面上所有「主视觉」的定义，例如 border-color、background-image 或是 font-family 等相关的 Typography 设定。为什么说是「主视觉」？因为有些元件模组仍然是留在 Module 去定义，Theme 就像 Layout 一样负责「大架构」上的视觉样式。

编者注感谢 Only1Word 指出，theme 在 SMACSS 中更类似皮肤。
CSS 规范

这里整理的是我觉得一定要知道的，其他还有很多规范可以转到文末的参考资源连结，那篇文章有介绍更多的细节。
BEM

BEM 即 Block、Element、Modifier 的缩写，这是一种 class 的命名技巧。如果整个 project 只有自己一个人做，那当然是不太可能出现 class 重复的问题，但是如果同时多个 F2E 一起写同个部分的 CSS，就很容易出现共用 class 的问题，因此有了 BEM 这样的命名技巧。

将 Block 区块作为起始开头，像前面 SMACSS 介绍的 Partial 就可以拿来作为 Block 的 prefix 名称；Element 则是 Block 下的元素；Modifier 则是这个元素的属性。

不同 Block 和 Element 用 __ 两个底线区隔开来，不同的 Modifier 则用 -- 两个 dash 区隔。至于 - 一个 dash 则表示这个 class 不依赖任何 Block 或 Element，是个独立的存在，例如：.page-container 或 .article-wrapper。

这里有个范例：

.sidebar {   
  .sidebar--left__section {   
    .sidebar--left__section--header {}   
    .sidebar--left__section--footer {}   
  }   
}

Javascript Hook

透过 CSS class 来作为 Javascript 选取 DOM 节点的方式，就是 Javascript Hook。用 jQuery 可以常常看到这样的写法：$('.nav--main a')，可是当 CSS 跟 Javascript 搅在一起反而造成两边维护上的不便，当改了 CSS 时 Javascript 也要跟著改。

所以用 HTML 的属性去选取 DOM 节点会更好，如果非要用 CSS 的 class 那也可以多写一个 js- 的 prefix，以表示这个节点有被 Javascript 使用，例如：

<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>   
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>   
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>

PS. HTML 里两个 class 之间用两个空格，会比一个空格看起来好阅读。
合理的选择器

class 无所谓是否语意化的问题；你应该关注它们是否合理，不要刻意强调 class
名称要符合语意，而要注重使用的合理性与未来性。

有时候为了表示更明确，在使用 CSS 的选择器时，要表示某的 class 是搭配某个标签元素使用，会写成这样：

ol.breadcrumb{}   
p.intro{}   
ul.image-thumbs{}

但是上面这个写法效能不是很好，同样的目的但可以减少多余的修饰，试试改用下面这种写法，将标签名称用注解标示起来，维护上有相同的效果，但是浏览器处理的速度会比较快：

/*ol*/.breadcrumb{}   
/*p*/.intro{}   
/*ul*/.image-thumbs{}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

關於CSS程式設計的OOCSS和SMACSS設計模式的介紹

相關文章