摘要:如下區塊標題前綴可以讓我們使用命令查找標題名時將搜索范圍限制在區塊標題中。
在參與規模龐大、歷時漫長且參與人數眾多的項目時,所有開發者遵守如下規則極為重要:
保持 CSS 易于維護
保持代碼清晰易懂
保持 CSS 的可拓展性
為了實現這一目標,我們要采用諸多方法。
本文檔第一部分將探討語法、格式以及分析 CSS 結構;第二部分將圍繞方法論、思維框架以及編寫與規劃 CSS 的看法。
CSS 文檔分析無論編寫什么文檔,我們都應當維持統一的風格,包括統一的注釋、統一的語法與統一的命名規范。
將行寬控制在 80 字節以下。漸變(gradient)相關的語法以及注釋中的 URL 等可以算作例外,畢竟這部分我們也無能為力。
我傾向于用 4 個空格而非 Tab 縮進,并且將聲明拆分成多行。
單一文件與多文件有人喜歡在一份文件文件中編寫所有的內容,而我在遷移至 Sass 之后開始將樣式拆分成多個小文件。這都是很好的做法。無論你選擇哪種,下文的規則都將適用,而且如果你遵守這些規則的話你也不會遇到什么問題。這兩種寫法的區別僅僅在于目錄以及區塊標題:
目錄在 CSS 的開頭,我會維護一份目錄,就像這樣:
/*------------------------------------* $CONTENTS *------------------------------------*/ /** * CONTENTS............You’re reading it! * RESET...............Set our reset defaults * FONT-FACE...........Import brand font files */
這份目錄可以告訴其他開發者這個文件中具體含有哪些內容。這份目錄中的每一項都與其對應的區塊標題相同。
如果你在維護一份單文件 CSS,對應的區塊將也在同一文件中。如果你是在編寫一組小文件,那么目錄中的每一項應當對應相應的 @include 語句。
區塊標題目錄應當對應區塊的標題。如下:
/*------------------------------------* $RESET *------------------------------------*/
區塊標題前綴 $ 可以讓我們使用 Cmd|Ctrl + F 命令查找標題名時將搜索范圍限制在區塊標題中。
如果你在維護一份大文件,那么在區塊之間空 5 行,如下:
/*------------------------------------* $RESET *------------------------------------*/ [Our reset styles] /*------------------------------------* $FONT-FACE *------------------------------------*/
在大文件中快速翻動時這些大塊的空檔有助于區分區塊。
如果你在維護多份以 include 連接的 CSS 的話,在每份文件頭加上標題即可,不必這樣空行。
盡量按照特定順序編寫規則,這將確保你充分發揮 CSS 中第一個 C 的意義:cascade,層疊。
一份規劃良好的 CSS 應當按照如下排列:
Reset 萬物之根源
元素類型 沒有 class 的 h1、ul 等
對象以及抽象內容 最一般、最基礎的設計模式
子元素 由對象延伸出來的所有拓展及其子元素
修補 針對異常狀態
如此一來,當你依次編寫 CSS 時,每個區塊都可以自動繼承在它之前區塊的屬性。這樣就可以減少代碼相互抵消的部分,減少某些特殊的問題,組成更理想的 CSS 結構。
關于這方面的更多信息,強烈推薦 Jonathan Snook 的 SMACSS。
[selector]{ [property]:[value]; [<- Declaration ->] } [選擇器]{ [屬性]:[值]; [<- 聲明 ->] }
編寫 CSS 樣式時,我習慣遵守這些規則:
class 名稱以連字符(-)連接,除了下文提到的 BEM 命名法;
縮進 4 空格;
聲明拆分成多行;
聲明以相關性順序排列,而非字母順序;
有前綴的聲明適當縮進,從而對齊其值;
縮進樣式集從而反映 DOM;
保留最后一條聲明結尾的分號。
例如:
.widget{ padding:10px; border:1px solid #BADA55; background-color:#C0FFEE; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .widget-heading{ font-size:1.5rem; line-height:1; font-weight:bold; color:#BADA55; margin-right:-10px; margin-left: -10px; padding:0.25em; }
我們可以發現,.widget-heading 是 .widget 的子元素,因為前者的樣式集比后者多縮進了一級。這樣通過縮進就可以讓開發者在閱讀代碼時快速獲取這樣的重要信息。
我們還可以發現 .widget-heading 的聲明是根據其相關性排列的:.widget-heading 是行間元素,所以我們先添加字體相關的樣式聲明,接下來是其它的。
以下是一個沒有拆分成多行的例子:
.t10 { width:10% } .t20 { width:20% } .t25 { width:25% } /* 1/4 */ .t30 { width:30% } .t33 { width:33.333% } /* 1/3 */ .t40 { width:40% } .t50 { width:50% } /* 1/2 */ .t60 { width:60% } .t66 { width:66.666% } /* 2/3 */ .t70 { width:70% } .t75 { width:75% } /* 3/4*/ .t80 { width:80% } .t90 { width:90% }
在這個例子(來自inuit.css’s table grid system)中,將 CSS 放在一行內可以使得代碼更緊湊。
一般情況下我都是以連字符(-)連接 class 的名字(例如 .foo-bar 而非 .foo_bar 或 .fooBar),不過在某些特定的時候我會用 BEM(Block, Element, Modifier)命名法。
BEM 命名法可以使得選擇器更規范,更清晰,更具語義。
該命名法按照如下格式:
.block{} .block__element{} .block--modifier{}
其中:
.block 代表某個基本的抽象元素;
.block__element 代表構成 .block 的一個子元素;
.block--modifier 代表 .block 的某個不同狀態或版本。
打個比方:
.person{} .person--woman{} .person__hand{} .person__hand--left{} .person__hand--right{}
這個例子中我們描述的基本元素是一個人,然后這個人可能是一個女人。我們還知道人擁有手,這些是人體的一部分,而手也有不同的狀態,如同左手與右手。
這樣我們就可以根據親元素來劃定選擇器的命名空間并傳達該選擇器的職能,例如根據這個選擇器是一個子元素(__)還是其親元素的不同狀態(--)。
由此,.page-wrapper 是一個獨立的選擇器。這是一個符合規范的命名,因為它不是其它元素的子元素或其它狀態;然而 .widget-heading 則與其它對象有關聯,它應當是 .widget 的子元素,所以我們應當將其重命名為 .widget__heading。
BEM 命名法雖然不太好看,而且相當冗長,但是它使得我們可以通過名稱快速獲知元素的功能和元素之間的關系。與此同時,BEM 語法中的重復部分非常有利于 gzip 的壓縮算法。
無論你是否使用 BEM 命名法,你都應當確保 class 命名得當,力保一字不多、一字不少;將元素命名抽象化以提高復用性(例如 .ui-list,.media)。子元素的命名則要盡量精準(例如 .user-avatar-link)。不用擔心 class 名的數量或長度,因為寫得好的代碼 gzip 也能有效壓縮。
HTML 中的 class為了確保易讀性,在 HTML 標記中用兩個空格隔開 class 名,例如:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110928.html
摘要:國內各大公司都已經投入使用,在一些常見的網站,如淘寶騰訊小米等移動站點,隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及,這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現; 作用于某個元素上的樣式又可能來自單個樣式規...
摘要:國內各大公司都已經投入使用,在一些常見的網站,如淘寶騰訊小米等移動站點,隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及,這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現; 作用于某個元素上的樣式又可能來自單個樣式規...
摘要:它通過數據模型進行鍵值綁定及事件處理,通過模型集合器提供一套豐富的用于枚舉功能,通過視圖來進行事件處理及與現有的通過接口進行交互。 本人兼職前端付費技術顧問,如需幫助請加本人微信hawx1993或QQ345823102,非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...
閱讀 3768·2021-09-02 09:53
閱讀 2748·2021-07-30 14:57
閱讀 3492·2019-08-30 13:09
閱讀 1178·2019-08-29 13:25
閱讀 809·2019-08-29 12:28
閱讀 1453·2019-08-29 12:26
閱讀 1129·2019-08-28 17:58
閱讀 3304·2019-08-26 13:28