摘要:所幸已經(jīng)有許多大師級(jí)的人物,提出許多設(shè)計(jì)模式和思維,借由站在巨人的肩膀上可以讓事情事半功倍。增加的重復(fù)使用在的觀念中,強(qiáng)調(diào)重復(fù)使用,而應(yīng)該避免使用作為的選擇器。負(fù)責(zé)定義元素不同的狀態(tài)下,所呈現(xiàn)的樣式。
真心覺(jué)得寫(xiě)出 CSS 并不難,但是要寫(xiě)出可被維護(hù)的 CSS 比其他程式語(yǔ)言都還難。所幸已經(jīng)有許多大師級(jí)的人物,提出許多設(shè)計(jì)模式和思維,借由站在巨人的肩膀上可以讓事情事半功倍。這篇文章就來(lái)說(shuō)說(shuō) OOCSS、SMACSS 和撰寫(xiě) CSS 時(shí)應(yīng)該注意的規(guī)范。
(本文的例子用的是 SCSS 語(yǔ)法)
OOCSSOOCSS 不是什么新技術(shù),只是一種撰寫(xiě) CSS 的設(shè)計(jì)模式,或者可以說(shuō)是一種「道德規(guī)范」,大致上我覺(jué)得重點(diǎn)只有兩個(gè):
減少對(duì) HTML 結(jié)構(gòu)的依賴
增加 CSS class 重復(fù)性的使用
減少對(duì) HTML 結(jié)構(gòu)的依賴一般的導(dǎo)航欄寫(xiě)法,結(jié)構(gòu)應(yīng)該會(huì)像上面的 HTML 范例一樣,如果要對(duì)那些 標(biāo)簽定義樣式,CSS 的寫(xiě)法可能寫(xiě)成 .nav--main ul li a {},這種寫(xiě)法先不管效能上的問(wèn)題,可以看出來(lái)過(guò)度地依賴元素標(biāo)簽的結(jié)構(gòu),有可能之后 HTML 結(jié)構(gòu)改變,這個(gè) CSS 就必須跟著重構(gòu),造成維護(hù)上多余的成本。
若從這個(gè)例子來(lái)考量,原則上 都一定會(huì)接在 標(biāo)簽的后面,一個(gè) 只會(huì)有一個(gè) ,通常不會(huì)獨(dú)立存在,那就可以寫(xiě)成 .nav--main a {},會(huì)是比較好的寫(xiě)法,甚至是直接給 加上 class nav--main_item。后者是 OOCSS 所提倡的用法。
這樣的寫(xiě)法,一來(lái)效能理論上比較好(我沒(méi)辦法驗(yàn)證),二來(lái)層次比較單純。
增加 CSS class 的重復(fù)使用在 OOCSS 的觀念中,強(qiáng)調(diào)重復(fù)使用 class,而應(yīng)該避免使用 id 作為 CSS 的選擇器。這種想法就是像
OOP
盡量抽離重復(fù)的程式碼,例如以下這個(gè)例子,這是兩種按鈕的 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,抽離出重復(fù)的部份,并且定義在同個(gè) class
上。因此,要使用這樣的樣式,HTML 的寫(xiě)法可能長(zhǎng)這個(gè)樣子:
先用 button 宣告此為一個(gè)按鈕的樣式,再用 button-default 或 button-primary 作為按鈕底色的區(qū)別。這么做可以維護(hù)成本變得比較低,例如:想要改網(wǎng)站上所有按鈕的大小,就只要修改 .button 的 padding 而已。
SMACSS我對(duì) SMACSS 的理解還不是很深入,或許把 Scalable and Modular Architecture for CSS 看完后會(huì)有更深一曾的理解。目前對(duì) SMACSS 的概念僅限于它對(duì) CSS 不同的業(yè)務(wù)邏輯所做的劃分方式:
但我認(rèn)為原本的設(shè)計(jì)不是很妥當(dāng),因此我自己做了一些改良:
BaseBase 就是設(shè)定標(biāo)簽元素的預(yù)設(shè)值,例如瀏覽器的 reset 可以寫(xiě)在這里,如果用的是 Compass,只要 @include global-reset 即可。這里只會(huì)對(duì)標(biāo)簽元素本身做設(shè)定,不會(huì)出現(xiàn)任何 class 或
id,但是可以有屬性選擇器或是偽類:
html {} input[type=text] {} a:hover {}Layout
Layout 是指整個(gè)網(wǎng)站的「大架構(gòu)」的外觀,而非 .button 這種小元件的 class。網(wǎng)站通常會(huì)有一些主要的大區(qū)塊,可能是 header 或 footer,Layout 就是用來(lái)定義這些「大架構(gòu)」的 CSS。如果有做 Responsive Web Design 或是用 Grid System,也是把規(guī)則寫(xiě)在 Layout 這里。
以下這是個(gè)范例:
#header { margin: 30px 0; } #articles-wrapper { ......; } .sidebar { &.sidebar--right { ......; } &.sidebar-left { ......; } }
通常只有一個(gè)選擇器,一個(gè) id、或一個(gè) class。
Module原本的 SMACSS 對(duì) Module 的設(shè)計(jì)我覺(jué)得不是很好,所以我硬是將 Module
拆分出一個(gè) Partial。
這里的 Module 顧名思義,就是可以在其他地方被重復(fù)使用,如果要找更明確的例子,我想就像 Twitter Bootstrap 的 Components
一樣,或者像前面 OOCSS 所舉例的 .button 這種會(huì)被重復(fù)使用的元件模組。
模組不需要用任何的 prefix,因?yàn)?Module 就是設(shè)計(jì)來(lái)可以重復(fù)應(yīng)用在不同的 page 上。
PartialPartial 跟 Latout 不同,也跟 Module 不同,他比 Layout 的范圍小,可能是
header 底下的某個(gè)子元素。他不像 Module,他是特定單一領(lǐng)域下特別的設(shè)定。
.nav--main { a { ......; } }
通常會(huì)將 Partial 的名稱加在子 class 作為 prefix,例如 .nav--main 底下的
.nav--main_item。至于為什么要用這么奇怪的命名方式?這等等在 CSS 規(guī)范部分會(huì)說(shuō)明介紹。
State 負(fù)責(zé)定義元素不同的狀態(tài)下,所呈現(xiàn)的樣式。但是并非指一個(gè)元素的 :hover 或 :active 下的狀態(tài)。舉例來(lái)說(shuō),一個(gè)導(dǎo)航欄分頁(yè),目前所在頁(yè)面的分頁(yè)需要加上 .active
的屬性表示目前位置是在這個(gè)分頁(yè),HTML 會(huì)長(zhǎng)這樣:
因此可以替 .nav--main 增加 .active 這樣的子 class:
.nav--main { // others…; .active { background: darken($background-color, 16%); } }
有時(shí)候?yàn)榱俗岄喿x更貼近語(yǔ)義,會(huì)用比較友善的命名方式,以此段的范例來(lái)說(shuō),.is-active 就比 .active 來(lái)得好讀。
ThemeTheme 是畫(huà)面上所有「主視覺(jué)」的定義,例如 border-color、background-image 或是 font-family 等相關(guān)的 Typography 設(shè)定。為什么說(shuō)是「主視覺(jué)」?因?yàn)橛行┰=M仍然是留在 Module 去定義,Theme 就像 Layout 一樣負(fù)責(zé)「大架構(gòu)」上的視覺(jué)樣式。
編者注 感謝 Only1Word 指出,theme 在 SMACSS 中更類似皮膚。
CSS 規(guī)范這里整理的是我覺(jué)得一定要知道的,其他還有很多規(guī)范可以轉(zhuǎn)到文末的參考資源連結(jié),那篇文章有介紹更多的細(xì)節(jié)。
BEMBEM 即 Block、Element、Modifier 的縮寫(xiě),這是一種 class 的命名技巧。如果整個(gè) project 只有自己一個(gè)人做,那當(dāng)然是不太可能出現(xiàn) class 重復(fù)的問(wèn)題,但是如果同時(shí)多個(gè) F2E 一起寫(xiě)同個(gè)部分的 CSS,就很容易出現(xiàn)共用 class 的問(wèn)題,因此有了 BEM 這樣的命名技巧。
將 Block 區(qū)塊作為起始開(kāi)頭,像前面 SMACSS 介紹的 Partial 就可以拿來(lái)作為 Block 的 prefix 名稱;Element 則是 Block 下的元素;Modifier 則是這個(gè)元素的屬性。
不同 Block 和 Element 用 __ 兩個(gè)底線區(qū)隔開(kāi)來(lái),不同的 Modifier 則用 -- 兩個(gè) dash 區(qū)隔。至于 - 一個(gè) dash 則表示這個(gè) class 不依賴任何 Block 或 Element,是個(gè)獨(dú)立的存在,例如:.page-container 或 .article-wrapper。
這里有個(gè)范例:
.sidebar { .sidebar--left__section { .sidebar--left__section--header {} .sidebar--left__section--footer {} } }Javascript Hook
透過(guò) CSS class 來(lái)作為 Javascript 選取 DOM 節(jié)點(diǎn)的方式,就是 Javascript Hook。用 jQuery 可以常常看到這樣的寫(xiě)法:$(".nav--main a"),可是當(dāng) CSS 跟 Javascript 攪在一起反而造成兩邊維護(hù)上的不便,當(dāng)改了 CSS 時(shí) Javascript 也要跟著改。
所以用 HTML 的屬性去選取 DOM 節(jié)點(diǎn)會(huì)更好,如果非要用 CSS 的 class 那也可以多寫(xiě)一個(gè) js- 的 prefix,以表示這個(gè)節(jié)點(diǎn)有被 Javascript 使用,例如:
PS. HTML 里兩個(gè) class 之間用兩個(gè)空格,會(huì)比一個(gè)空格看起來(lái)好閱讀。
合理的選擇器class 無(wú)所謂是否語(yǔ)意化的問(wèn)題;你應(yīng)該關(guān)注它們是否合理,不要刻意強(qiáng)調(diào) class
名稱要符合語(yǔ)意,而要注重使用的合理性與未來(lái)性。
有時(shí)候?yàn)榱吮硎靖鞔_,在使用 CSS 的選擇器時(shí),要表示某的 class 是搭配某個(gè)標(biāo)簽元素使用,會(huì)寫(xiě)成這樣:
ol.breadcrumb{} p.intro{} ul.image-thumbs{}
但是上面這個(gè)寫(xiě)法效能不是很好,同樣的目的但可以減少多余的修飾,試試改用下面這種寫(xiě)法,將標(biāo)簽名稱用注解標(biāo)示起來(lái),維護(hù)上有相同的效果,但是瀏覽器處理的速度會(huì)比較快:
/*ol*/.breadcrumb{} /*p*/.intro{} /*ul*/.image-thumbs{}參考資源
撰寫(xiě)可管理、可維護(hù)的 CSS 高階技巧
via chh
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/110844.html
摘要:,字面意思是面向?qū)ο蟮模怯商岢龅睦碚摚渲饕膬蓚€(gè)原則是分離結(jié)構(gòu)和主題分離容器和內(nèi)容用一個(gè)例子來(lái)說(shuō)明。分離容器和內(nèi)容要求使頁(yè)面元素不依賴于其所處位置。命名規(guī)則不需要嚴(yán)格遵守,可以根據(jù)實(shí)際情況和自身喜好做其他的約定。 最近在The Sass Way[]一文,發(fā)現(xiàn)文章在開(kāi)頭部分就提到了OOCSS、 SMACSS、 BEM、這3個(gè)詞。如果還不知道這些是什么,請(qǐng)先不要繼續(xù)看下去,聯(lián)想到作者這...
摘要:由于年提出,這基于她在雅虎的工作。但是這很難做到解決的問(wèn)題樣式全局性造成的樣式?jīng)_突問(wèn)題多人協(xié)作的命名問(wèn)題解決層疊問(wèn)題,使的優(yōu)先級(jí)保持相對(duì)扁平的模塊化,使更具有復(fù)用的能力于年由提出,當(dāng)時(shí)他在雅虎工作。 編寫(xiě)CSS會(huì)遇到什么問(wèn)題? 其實(shí)CSS很好寫(xiě),只要知道css語(yǔ)法,你就可以寫(xiě)出來(lái),通過(guò)各種學(xué)習(xí),你也可以做出一個(gè)很美麗的頁(yè)面。對(duì)能熟練編寫(xiě)網(wǎng)頁(yè)的人來(lái)說(shuō),可以很簡(jiǎn)單的將設(shè)計(jì)圖變成網(wǎng)頁(yè)。但是在...
摘要:由此按照的指導(dǎo)原則,我們應(yīng)該寫(xiě)一個(gè),然后為其添加一些之類的來(lái)差異化它這樣在以上兩種附加的作用下,我們?cè)谥芯涂梢垣@得種不同的樣式,隨著附加增加,的樣式也會(huì)呈指數(shù)增加,千變?nèi)f化。 真正的問(wèn)題是什么? CSS即層疊樣式表,所以一層一層覆蓋其實(shí)是其本質(zhì)特征。真正的問(wèn)題在于維護(hù),許多人認(rèn)為CSS僅是樣式,不是代碼,無(wú)需維護(hù),所以任意書(shū)寫(xiě),只要將自己需要的樣式的優(yōu)先級(jí)設(shè)為最高即可,才導(dǎo)致了深層級(jí)...
摘要:最早遇到的大概的是命名的問(wèn)題了吧,因?yàn)楸旧矸e累的詞匯量就少,動(dòng)不動(dòng)就沒(méi)單詞可用了。用于解決項(xiàng)目命名規(guī)則問(wèn)題。其哲學(xué)理念是模塊化,功能單一性,關(guān)注點(diǎn)分離。借助而解決了中的命名空間的問(wèn)題,使得單文件變得簡(jiǎn)單清晰。 標(biāo)題黨。這篇文章斷斷續(xù)續(xù)的修改過(guò)好幾次,也沒(méi)有滿意,本來(lái)是想總結(jié)一下我這些零散的 CSS 知識(shí)結(jié)構(gòu),可能由于知識(shí)體系不全面,總是沒(méi)能把知識(shí)點(diǎn)串聯(lián)成一個(gè)通順的內(nèi)容。貼出來(lái)權(quán)當(dāng)大家一...
摘要:自從年提出以來(lái)。它就成為一個(gè)領(lǐng)先的模塊系統(tǒng),用來(lái)組織你的代碼方式之一。換句話說(shuō),你的樣式中盡量不要使用標(biāo)簽或者標(biāo)識(shí)符。我們必須使用來(lái)創(chuàng)建對(duì)象,通過(guò)在類中調(diào)用,將其合在一起。如果你不在刻意在中追求語(yǔ)義化,你仍然可以使用。 自從2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以來(lái)。它就成為一個(gè)領(lǐng)先的模塊系統(tǒng),用來(lái)組織你的CSS代碼方式之一。 ...
閱讀 1792·2021-09-03 10:50
閱讀 1326·2019-08-30 15:55
閱讀 3369·2019-08-30 15:52
閱讀 1231·2019-08-30 15:44
閱讀 934·2019-08-30 15:44
閱讀 3318·2019-08-30 14:23
閱讀 3551·2019-08-28 17:51
閱讀 2291·2019-08-26 13:52