淺談CSS編程的OOCSS和SMACSS設(shè)計(jì)模式方式
2024-04-24 分類： 網(wǎng)站建設(shè)
寫出 CSS 并不難，但是要寫出可被維護(hù)的 CSS 比其他程式語言都還難。所幸已經(jīng)有許多大師級(jí)的人物，提出許多設(shè)計(jì)模式和思維，借住于站在巨人的肩膀上可以讓事情事半功倍。這篇文章就來說說 OOCSS、SMACSS 和撰寫 CSS 時(shí)應(yīng)該注意的規(guī)范。
（本文的例子用的是 SCSS 語法） OOCSS
OOCSS 不是什么新技術(shù)，只是一種撰寫 CSS 的設(shè)計(jì)模式，或者可以說是一種「道德規(guī)范」，大致上我覺得重點(diǎn)只有兩個(gè)：
減少對 HTML 結(jié)構(gòu)的依賴 增加 CSS class 重復(fù)性的使用 減少對 HTML 結(jié)構(gòu)的依賴 CSS Code復(fù)制內(nèi)容到剪貼板 一般的導(dǎo)航欄寫法，結(jié)構(gòu)應(yīng)該會(huì)像上面的 HTML 范例一樣，如果要對那些 標(biāo)簽定義樣式，CSS 的寫法可能寫成.nav--main ul li a {}，這種寫法先不管效能上的問題，可以看出來過度地依賴元素標(biāo)簽的結(jié)構(gòu)，有可能之后 HTML 結(jié)構(gòu)改變，這個(gè) CSS 就必須跟著重構(gòu)，造成維護(hù)上多余的成本。
若從這個(gè)例子來考量，原則上 都一定會(huì)接在 標(biāo)簽的后面，一個(gè) 只會(huì)有一個(gè) ，通常不會(huì)獨(dú)立存在，那就可以寫成 .nav--main a {}，會(huì)是比較好的寫法，甚至是直接給 加上 class nav--main_item。后者是 OOCSS 所提倡的用法。
這樣的寫法，一來效能理論上比較好（我沒辦法驗(yàn)證），二來層次比較單純。 增加 CSS class 的重復(fù)使用
在 OOCSS 的觀念中，強(qiáng)調(diào)重復(fù)使用 class，而應(yīng)該避免使用 id 作為 CSS 的選擇器。這種想法就是像 OOP 盡量抽離重復(fù)的程式碼，例如以下這個(gè)例子，這是兩種按鈕的 CSS 樣式屬性： CSS Code復(fù)制內(nèi)容到剪貼板 .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，抽離出重復(fù)的部份，并且定義在同個(gè) class 上。因此，要使用這樣的樣式，HTML 的寫法可能長這個(gè)樣子： CSS Code復(fù)制內(nèi)容到剪貼板 先用 button 宣告此為一個(gè)按鈕的樣式，再用 button-default 或 button-primary 作為按鈕底色的區(qū)別。這么做可以維護(hù)成本變得比較低，例如：想要改網(wǎng)站上所有按鈕的大小，就只要修改 .button 的 padding 而已。 SMACSS 目前對 SMACSS 的概念僅限于它對 CSS 不同的業(yè)務(wù)邏輯所做的劃分方式：
但我認(rèn)為原本的設(shè)計(jì)不是很妥當(dāng)，因此我自己做了一些改良： Base
Base 就是設(shè)定標(biāo)簽元素的預(yù)設(shè)值，例如瀏覽器的 reset 可以寫在這里，如果用的是 Compass，只要 @include global-reset 即可。這里只會(huì)對標(biāo)簽元素本身做設(shè)定，不會(huì)出現(xiàn)任何 class 或 id，但是可以有屬性選擇器或是偽類： CSS Code復(fù)制內(nèi)容到剪貼板 html {} input[type=text] {} a:hover {} Layout
Layout 是指整個(gè)網(wǎng)站的「大架構(gòu)」的外觀，而非 .button 這種小元件的 class。網(wǎng)站通常會(huì)有一些主要的大區(qū)塊，可能是 header 或 footer，Layout 就是用來定義這些「大架構(gòu)」的 CSS。如果有做 Responsive Web Design 或是用 Grid System，也是把規(guī)則寫在 Layout 這里。
以下這是個(gè)范例： CSS Code復(fù)制內(nèi)容到剪貼板 #header { margin: 30px 0; } #articles-wrapper { ......; } .sidebar { &.sidebar--rightright { ......; } &.sidebar-left { ......; } } 通常只有一個(gè)選擇器，一個(gè) id、或一個(gè) class。 Module
原本的 SMACSS 對 Module 的設(shè)計(jì)我覺得不是很好，所以我硬是將 Module 拆分出一個(gè) Partial。
這里的 Module 顧名思義，就是可以在其他地方被重復(fù)使用，如果要找更明確的例子，我想就像 Twitter Bootstrap 的Components 一樣，或者像前面 OOCSS 所舉例的 .button 這種會(huì)被重復(fù)使用的元件模組。
模組不需要用任何的 prefix，因?yàn)?Module 就是設(shè)計(jì)來可以重復(fù)應(yīng)用在不同的 page 上。 Partial
Partial 跟 Latout 不同，也跟 Module 不同，他比 Layout 的范圍小，可能是 header 底下的某個(gè)子元素。他不像 Module，他是特定單一領(lǐng)域下特別的設(shè)定。 CSS Code復(fù)制內(nèi)容到剪貼板 .nav--main { a { ......; } } 通常會(huì)將 Partial 的名稱加在子 class 作為 prefix，例如 .nav--main 底下的 .nav--main_item。至于為什么要用這么奇怪的命名方式？這等等在 CSS 規(guī)范部分會(huì)說明介紹。 State
State 負(fù)責(zé)定義元素不同的狀態(tài)下，所呈現(xiàn)的樣式。但是并非指一個(gè)元素的 :hover 或 :active 下的狀態(tài)。舉例來說，一個(gè)導(dǎo)航欄分頁，目前所在頁面的分頁需要加上 .active 的屬性表示目前位置是在這個(gè)分頁，HTML 會(huì)長這樣： CSS Code復(fù)制內(nèi)容到剪貼板 因此可以替 .nav--main 增加 .active 這樣的子 class：
CSS Code復(fù)制內(nèi)容到剪貼板 .nav--main { // others…; .active { background: darken($background-color, 16%); } } 有時(shí)候?yàn)榱俗岄喿x更貼近語義，會(huì)用比較友善的命名方式，以此段的范例來說，.is-active 就比 .active 來得好讀。 Theme
Theme 是畫面上所有「主視覺」的定義，例如 border-color、background-image 或是 font-family 等相關(guān)的 Typography 設(shè)定。為什么說是「主視覺」？因?yàn)橛行┰＝M仍然是留在 Module 去定義，Theme 就像 Layout 一樣負(fù)責(zé)「大架構(gòu)」上的視覺樣式。
編者注 感謝 Only1Word 指出，theme 在 SMACSS 中更類似皮膚。 CSS 規(guī)范
這里整理的是我覺得一定要知道的，其他還有很多規(guī)范可以轉(zhuǎn)到文末的參考資源連結(jié)，那篇文章有介紹更多的細(xì)節(jié)。 BEM
BEM 即 Block、Element、Modifier 的縮寫，這是一種 class 的命名技巧。如果整個(gè) project 只有自己一個(gè)人做，那當(dāng)然是不太可能出現(xiàn) class 重復(fù)的問題，但是如果同時(shí)多個(gè) F2E 一起寫同個(gè)部分的 CSS，就很容易出現(xiàn)共用 class 的問題，因此有了 BEM 這樣的命名技巧。
將 Block 區(qū)塊作為起始開頭，像前面 SMACSS 介紹的 Partial 就可以拿來作為 Block 的 prefix 名稱；Element 則是 Block 下的元素；Modifier 則是這個(gè)元素的屬性。
不同 Block 和 Element 用 __ 兩個(gè)底線區(qū)隔開來，不同的 Modifier 則用 -- 兩個(gè) dash 區(qū)隔。至于 - 一個(gè) dash 則表示這個(gè) class 不依賴任何 Block 或 Element，是個(gè)獨(dú)立的存在，例如：.page-container 或 .article-wrapper。
這里有個(gè)范例： CSS Code復(fù)制內(nèi)容到剪貼板 .sidebar { .sidebar--left__section { .sidebar--left__section--header {} .sidebar--left__section--footer {} } } Javascript Hook
透過 CSS class 來作為 Javascript 選取 DOM 節(jié)點(diǎn)的方式，就是 Javascript Hook。用 jQuery 可以常?？吹竭@樣的寫法：$('.nav--main a')，可是當(dāng) CSS 跟 Javascript 攪在一起反而造成兩邊維護(hù)上的不便，當(dāng)改了 CSS 時(shí) Javascript 也要跟著改。
所以用 HTML 的屬性去選取 DOM 節(jié)點(diǎn)會(huì)更好，如果非要用 CSS 的 class 那也可以多寫一個(gè) js- 的 prefix，以表示這個(gè)節(jié)點(diǎn)有被 Javascript 使用，例如： CSS Code復(fù)制內(nèi)容到剪貼板.........
.........
.........
PS. HTML 里兩個(gè) class 之間用兩個(gè)空格，會(huì)比一個(gè)空格看起來好閱讀。
合理的選擇器
class 無所謂是否語意化的問題；你應(yīng)該關(guān)注它們是否合理，不要刻意強(qiáng)調(diào) class 名稱要符合語意，而要注重使用的合理性與未來性。
有時(shí)候?yàn)榱吮硎靖鞔_，在使用 CSS 的選擇器時(shí)，要表示某的 class 是搭配某個(gè)標(biāo)簽元素使用，會(huì)寫成這樣： CSS Code復(fù)制內(nèi)容到剪貼板 ol.breadcrumb{} p.intro{} ul.image-thumbs{} 但是上面這個(gè)寫法效能不是很好，同樣的目的但可以減少多余的修飾，試試改用下面這種寫法，將標(biāo)簽名稱用注解標(biāo)示起來，維護(hù)上有相同的效果，但是瀏覽器處理的速度會(huì)比較快：
CSS Code復(fù)制內(nèi)容到剪貼板 /*ol*/.breadcrumb{} /*p*/.intro{} /*ul*/.image-thumbs{} 本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
（本文的例子用的是 SCSS 語法） OOCSS
OOCSS 不是什么新技術(shù)，只是一種撰寫 CSS 的設(shè)計(jì)模式，或者可以說是一種「道德規(guī)范」，大致上我覺得重點(diǎn)只有兩個(gè)：
減少對 HTML 結(jié)構(gòu)的依賴 增加 CSS class 重復(fù)性的使用 減少對 HTML 結(jié)構(gòu)的依賴 CSS Code復(fù)制內(nèi)容到剪貼板 一般的導(dǎo)航欄寫法，結(jié)構(gòu)應(yīng)該會(huì)像上面的 HTML 范例一樣，如果要對那些 標(biāo)簽定義樣式，CSS 的寫法可能寫成.nav--main ul li a {}，這種寫法先不管效能上的問題，可以看出來過度地依賴元素標(biāo)簽的結(jié)構(gòu)，有可能之后 HTML 結(jié)構(gòu)改變，這個(gè) CSS 就必須跟著重構(gòu)，造成維護(hù)上多余的成本。
若從這個(gè)例子來考量，原則上 都一定會(huì)接在
這樣的寫法，一來效能理論上比較好（我沒辦法驗(yàn)證），二來層次比較單純。 增加 CSS class 的重復(fù)使用
在 OOCSS 的觀念中，強(qiáng)調(diào)重復(fù)使用 class，而應(yīng)該避免使用 id 作為 CSS 的選擇器。這種想法就是像 OOP 盡量抽離重復(fù)的程式碼，例如以下這個(gè)例子，這是兩種按鈕的 CSS 樣式屬性： CSS Code復(fù)制內(nèi)容到剪貼板 .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，抽離出重復(fù)的部份，并且定義在同個(gè) class 上。因此，要使用這樣的樣式，HTML 的寫法可能長這個(gè)樣子： CSS Code復(fù)制內(nèi)容到剪貼板 先用 button 宣告此為一個(gè)按鈕的樣式，再用 button-default 或 button-primary 作為按鈕底色的區(qū)別。這么做可以維護(hù)成本變得比較低，例如：想要改網(wǎng)站上所有按鈕的大小，就只要修改 .button 的 padding 而已。 SMACSS 目前對 SMACSS 的概念僅限于它對 CSS 不同的業(yè)務(wù)邏輯所做的劃分方式：
但我認(rèn)為原本的設(shè)計(jì)不是很妥當(dāng)，因此我自己做了一些改良： Base
Base 就是設(shè)定標(biāo)簽元素的預(yù)設(shè)值，例如瀏覽器的 reset 可以寫在這里，如果用的是 Compass，只要 @include global-reset 即可。這里只會(huì)對標(biāo)簽元素本身做設(shè)定，不會(huì)出現(xiàn)任何 class 或 id，但是可以有屬性選擇器或是偽類： CSS Code復(fù)制內(nèi)容到剪貼板 html {} input[type=text] {} a:hover {} Layout
Layout 是指整個(gè)網(wǎng)站的「大架構(gòu)」的外觀，而非 .button 這種小元件的 class。網(wǎng)站通常會(huì)有一些主要的大區(qū)塊，可能是 header 或 footer，Layout 就是用來定義這些「大架構(gòu)」的 CSS。如果有做 Responsive Web Design 或是用 Grid System，也是把規(guī)則寫在 Layout 這里。
以下這是個(gè)范例： CSS Code復(fù)制內(nèi)容到剪貼板 #header { margin: 30px 0; } #articles-wrapper { ......; } .sidebar { &.sidebar--rightright { ......; } &.sidebar-left { ......; } } 通常只有一個(gè)選擇器，一個(gè) id、或一個(gè) class。 Module
原本的 SMACSS 對 Module 的設(shè)計(jì)我覺得不是很好，所以我硬是將 Module 拆分出一個(gè) Partial。
這里的 Module 顧名思義，就是可以在其他地方被重復(fù)使用，如果要找更明確的例子，我想就像 Twitter Bootstrap 的Components 一樣，或者像前面 OOCSS 所舉例的 .button 這種會(huì)被重復(fù)使用的元件模組。
模組不需要用任何的 prefix，因?yàn)?Module 就是設(shè)計(jì)來可以重復(fù)應(yīng)用在不同的 page 上。 Partial
Partial 跟 Latout 不同，也跟 Module 不同，他比 Layout 的范圍小，可能是 header 底下的某個(gè)子元素。他不像 Module，他是特定單一領(lǐng)域下特別的設(shè)定。 CSS Code復(fù)制內(nèi)容到剪貼板 .nav--main { a { ......; } } 通常會(huì)將 Partial 的名稱加在子 class 作為 prefix，例如 .nav--main 底下的 .nav--main_item。至于為什么要用這么奇怪的命名方式？這等等在 CSS 規(guī)范部分會(huì)說明介紹。 State
State 負(fù)責(zé)定義元素不同的狀態(tài)下，所呈現(xiàn)的樣式。但是并非指一個(gè)元素的 :hover 或 :active 下的狀態(tài)。舉例來說，一個(gè)導(dǎo)航欄分頁，目前所在頁面的分頁需要加上 .active 的屬性表示目前位置是在這個(gè)分頁，HTML 會(huì)長這樣： CSS Code復(fù)制內(nèi)容到剪貼板 因此可以替 .nav--main 增加 .active 這樣的子 class：
CSS Code復(fù)制內(nèi)容到剪貼板 .nav--main { // others…; .active { background: darken($background-color, 16%); } } 有時(shí)候?yàn)榱俗岄喿x更貼近語義，會(huì)用比較友善的命名方式，以此段的范例來說，.is-active 就比 .active 來得好讀。 Theme
Theme 是畫面上所有「主視覺」的定義，例如 border-color、background-image 或是 font-family 等相關(guān)的 Typography 設(shè)定。為什么說是「主視覺」？因?yàn)橛行┰＝M仍然是留在 Module 去定義，Theme 就像 Layout 一樣負(fù)責(zé)「大架構(gòu)」上的視覺樣式。
編者注 感謝 Only1Word 指出，theme 在 SMACSS 中更類似皮膚。 CSS 規(guī)范
這里整理的是我覺得一定要知道的，其他還有很多規(guī)范可以轉(zhuǎn)到文末的參考資源連結(jié)，那篇文章有介紹更多的細(xì)節(jié)。 BEM
BEM 即 Block、Element、Modifier 的縮寫，這是一種 class 的命名技巧。如果整個(gè) project 只有自己一個(gè)人做，那當(dāng)然是不太可能出現(xiàn) class 重復(fù)的問題，但是如果同時(shí)多個(gè) F2E 一起寫同個(gè)部分的 CSS，就很容易出現(xiàn)共用 class 的問題，因此有了 BEM 這樣的命名技巧。
將 Block 區(qū)塊作為起始開頭，像前面 SMACSS 介紹的 Partial 就可以拿來作為 Block 的 prefix 名稱；Element 則是 Block 下的元素；Modifier 則是這個(gè)元素的屬性。
不同 Block 和 Element 用 __ 兩個(gè)底線區(qū)隔開來，不同的 Modifier 則用 -- 兩個(gè) dash 區(qū)隔。至于 - 一個(gè) dash 則表示這個(gè) class 不依賴任何 Block 或 Element，是個(gè)獨(dú)立的存在，例如：.page-container 或 .article-wrapper。
這里有個(gè)范例： CSS Code復(fù)制內(nèi)容到剪貼板 .sidebar { .sidebar--left__section { .sidebar--left__section--header {} .sidebar--left__section--footer {} } } Javascript Hook
透過 CSS class 來作為 Javascript 選取 DOM 節(jié)點(diǎn)的方式，就是 Javascript Hook。用 jQuery 可以常?？吹竭@樣的寫法：$('.nav--main a')，可是當(dāng) CSS 跟 Javascript 攪在一起反而造成兩邊維護(hù)上的不便，當(dāng)改了 CSS 時(shí) Javascript 也要跟著改。
所以用 HTML 的屬性去選取 DOM 節(jié)點(diǎn)會(huì)更好，如果非要用 CSS 的 class 那也可以多寫一個(gè) js- 的 prefix，以表示這個(gè)節(jié)點(diǎn)有被 Javascript 使用，例如： CSS Code復(fù)制內(nèi)容到剪貼板
class 無所謂是否語意化的問題；你應(yīng)該關(guān)注它們是否合理，不要刻意強(qiáng)調(diào) class 名稱要符合語意，而要注重使用的合理性與未來性。
有時(shí)候?yàn)榱吮硎靖鞔_，在使用 CSS 的選擇器時(shí)，要表示某的 class 是搭配某個(gè)標(biāo)簽元素使用，會(huì)寫成這樣： CSS Code復(fù)制內(nèi)容到剪貼板 ol.breadcrumb{} p.intro{} ul.image-thumbs{} 但是上面這個(gè)寫法效能不是很好，同樣的目的但可以減少多余的修飾，試試改用下面這種寫法，將標(biāo)簽名稱用注解標(biāo)示起來，維護(hù)上有相同的效果，但是瀏覽器處理的速度會(huì)比較快：
CSS Code復(fù)制內(nèi)容到剪貼板 /*ol*/.breadcrumb{} /*p*/.intro{} /*ul*/.image-thumbs{} 本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
標(biāo)題名稱：淺談CSS編程的OOCSS和SMACSS設(shè)計(jì)模式方式
當(dāng)前網(wǎng)址：http://m.rwnh.cn/news42/324992.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站營銷
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 網(wǎng)址優(yōu)化對網(wǎng)站十分重要 2024-04-24
- 構(gòu)筑企業(yè)微中心好的官網(wǎng)對企業(yè)起著決定性作用 2024-04-24
- 企業(yè)為什么利用網(wǎng)上分銷系統(tǒng)建立商城 2024-04-23
- 游戲服務(wù)器維護(hù)需要掌握的技術(shù)和注意事項(xiàng) 2024-04-23
- 網(wǎng)站標(biāo)志的設(shè)計(jì)有哪些技巧？ 2024-04-23
- 成都建設(shè)網(wǎng)站需要準(zhǔn)備哪些信息 2024-04-23
- 成都網(wǎng)站制作公司分享網(wǎng)站頁面分欄的排版樣式 2024-04-23
- 化妝品代加工廠網(wǎng)絡(luò)推廣_營銷策劃_全網(wǎng)推廣_軟文推廣_問答推廣如何進(jìn)行？ 2024-04-24
- 建設(shè)企業(yè)網(wǎng)站的作用大嗎? 2024-04-24
- 分析常用網(wǎng)絡(luò)推廣的八種方法 2024-04-23
- 蕪湖網(wǎng)站設(shè)計(jì)需要做哪些步驟 2024-04-23
- 買網(wǎng)站要注意的三個(gè)問題空 2024-04-23
- 網(wǎng)頁設(shè)計(jì)制作有哪些好用的技巧(一) 2024-04-23
- 如何利用色彩搭配讓企業(yè)網(wǎng)站設(shè)計(jì)保持新鮮感？ 2024-04-23
- 成都網(wǎng)絡(luò)公司制作網(wǎng)站前要確認(rèn)好哪些問題 2024-04-23
- 定制微信小程序有什么好處？ 2024-04-23
- 成都網(wǎng)站建設(shè)優(yōu)化推廣需要注意的小知識(shí)！ 2024-04-23
- 公司網(wǎng)頁制作的目的是為了實(shí)現(xiàn)哪幾個(gè)方面的目標(biāo) 2024-04-23
- 有效的網(wǎng)站制作溝通是建立在雙方信任之上 2024-04-23