Css設計心法教學-SMACSS、OOCSS、BEM
前言： 其實網路上已經有很多文章在介紹 SMACS 、OOCSS、BEM，而這篇文章存在的目的，就是以一個新手的角度來試著理解這三大架構如何幫助我們管理CSS。 OK，在開始介紹前，我們必須了解到這些設計方法存在的目的是 為了方便管理Css 所衍伸出來的。而所謂好的CSS撰寫該包含哪些特性呢? 這邊引用Kuro 大大之前分享- 漫談 CSS 架構方法 中提到的幾點概念 良好Css架構應包含 1.預測-Predictable 2.複用-Reusable 3.維護-Maintainable 4.延展-Scalable 先記住這幾項原則後，我們來分別簡略介紹這三大設計法則 OOCSS ( Object OrIEnted CSS) 設計基本原則有兩大點： 結構與樣式分離(Reusable) 內容與容器分離(Scalable) 結構與樣式分離 參考卡斯柏老師圖解 說明： 結構可以看成button中的width、height、padding等基本結構;樣式則可以看成外觀表現上如：border、background-color 案例： --從下面程式碼，我們可以發現button、box有部分css內容是重複的，這樣撰寫的話會造成日後若要調整顏色、外框粗細等樣式不便。此外，重複的css也造成檔案肥大。 #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-g...