在瞭解完 OOCSS 後，可以看看主流框架是不是有帶入其中之概念，接下來會介紹兩篇 PureCSS 與 Bootstrap，這兩者的簡單架構概念讓大家參考參考。

Pure CSS 算是很老牌的 CSS 框架，到目前使用者已少了許多，但架構到現在都很是非常直得學習，不需倚靠太多的工具，就能夠將 CSS 可用性發揮到最高，如果有朋友說要參考 CSS 的架構，相當值得學習的就是 PureCSS 及 Bootstrap。

架構簡介

Pure CSS 分為以下模組，每個模組都是獨立的 CSS 檔案，並沒有透過 Sass 或 Less 進行編譯，所以可以依據自己需求載入需要的模組。

• Base
• Buttons
• Forms (Responsive)
• Forms (Non-Responsive)
• Grids (Responsive)
• Menus (Responsive)
• Menus (Non-Responsive)
• Tables

除此之外，他只有透過 grunt 這個工具將檔案串接在一起，並沒有做額外的編譯；如果需要做修改，由於沒有太複雜的編譯流程，對不熟悉編譯工具的開發者來說也是相當容易的。

另外還有 COMBO 版本，是已經合併以上全部的模組，官方有提供兩種 COMBO，分為有 RWD 、無 RWD 兩個版本。

樣式架構

Pure CSS 的樣式架構是我最喜歡的部份，他用相當精簡的 CSS Code 來呈現一個模組，到底有多神就使用 Button 模組來做介紹。

Button 原始碼連結：
https://unpkg.com/purecss@0.6.0/build/buttons.css

這是非壓縮版的原始碼，全部的按鈕行數不到 100 行(不壓縮，且包含註解)，在這些行數下也包含了不同的狀態。

一般載入的狀態：
http://codepen.io/Wcc723/pen/MbGmdm

範例中，我們在載入 CSS 後，只要參考文件就能夠將樣式呈現出來，所以就以上的兩個按鈕，只要各一行 HTML 就能解決了。

<a class="pure-button" href="#">A Pure Button</a>
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>

Pure CSS 自訂樣式 - Pure CSS 巧妙地使用 透明度 在處理元件的樣式，就以按鈕來說可以用以下方法來調整：

1. 複寫原有的樣式
2. 設定元件色彩，透過原有的透明度樣式來呈現按鈕狀態

自定義樣式：
http://codepen.io/Wcc723/pen/LbmLGM/

Pure CSS 修改樣式、新增樣式的範例如上，每個樣式都僅需一個 CSS selector 就能搞定，而且不需要編譯。

/* 複寫樣式 */
.pure-button {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

/* 設定元件色彩來自定義樣式 */
.pure-button-accent {
  color: white;
  background: #FF5E45;
}

這種透過透明度的方法在切換樣式能將 CSS 所需的程式碼降低非常多，而這也是 結構與樣式 分離的最佳案例。
在最新版的 Bootstrap v4 中的 Navbar 也有用相同的技巧在切換色彩，有興趣的朋友可以參考以下連結。

Bootstrap Navbar color theme: http://v4-alpha.getbootstrap.com/components/navbar/#color-schemes

結語

在現在 Sass、PostCSS 盛行的情況下，在製作多種樣式時都是透過工具去做運算，Pure CSS 僅提供 CSS 並運用 CSS 的特性讓其他開發者也能輕易自訂樣式，這也是我喜歡 Pure CSS 的部分。

完整圖文版可看：https://wcc723.github.io/css/2016/12/07/framework-pure-css/