国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS設計模式：OOCSS 和 SMACSS

jackwang / 3562人閱讀

摘要：所幸已經有許多大師級的人物，提出許多設計模式和思維，借由站在巨人的肩膀上可以讓事情事半功倍。增加的重復使用在的觀念中，強調重復使用，而應該避免使用作為的選擇器。負責定義元素不同的狀態下，所呈現的樣式。

真心覺得寫出 CSS 并不難，但是要寫出可被維護的 CSS 比其他程式語言都還難。所幸已經有許多大師級的人物，提出許多設計模式和思維，借由站在巨人的肩膀上可以讓事情事半功倍。這篇文章就來說說 OOCSS、SMACSS 和撰寫 CSS 時應該注意的規范。

（本文的例子用的是 SCSS 語法）

OOCSS

OOCSS 不是什么新技術，只是一種撰寫 CSS 的設計模式，或者可以說是一種「道德規范」，大致上我覺得重點只有兩個：

減少對 HTML 結構的依賴

增加 CSS class 重復性的使用

減少對 HTML 結構的依賴

一般的導航欄寫法，結構應該會像上面的 HTML 范例一樣，如果要對那些 標簽定義樣式，CSS 的寫法可能寫成 .nav--main ul li a {}，這種寫法先不管效能上的問題，可以看出來過度地依賴元素標簽的結構，有可能之后 HTML 結構改變，這個 CSS 就必須跟著重構，造成維護上多余的成本。

若從這個例子來考量，原則上 都一定會接在

  • 標簽的后面，一個
  • 只會有一個 ，通常不會獨立存在，那就可以寫成 .nav--main a {}，會是比較好的寫法，甚至是直接給 加上 class nav--main_item。后者是 OOCSS 所提倡的用法。

    這樣的寫法，一來效能理論上比較好（我沒辦法驗證），二來層次比較單純。

    增加 CSS class 的重復使用

    在 OOCSS 的觀念中，強調重復使用 class，而應該避免使用 id 作為 CSS 的選擇器。這種想法就是像
    OOP
    盡量抽離重復的程式碼，例如以下這個例子，這是兩種按鈕的 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，抽離出重復的部份，并且定義在同個 class
    上。因此，要使用這樣的樣式，HTML 的寫法可能長這個樣子：

    先用 button 宣告此為一個按鈕的樣式，再用 button-default 或 button-primary 作為按鈕底色的區別。這么做可以維護成本變得比較低，例如：想要改網站上所有按鈕的大小，就只要修改 .button 的 padding 而已。

    SMACSS

    我對 SMACSS 的理解還不是很深入，或許把 Scalable and Modular Architecture for CSS 看完后會有更深一曾的理解。目前對 SMACSS 的概念僅限于它對 CSS 不同的業務邏輯所做的劃分方式：

    但我認為原本的設計不是很妥當，因此我自己做了一些改良：

    Base

    Base 就是設定標簽元素的預設值，例如瀏覽器的 reset 可以寫在這里，如果用的是 Compass，只要 @include global-reset 即可。這里只會對標簽元素本身做設定，不會出現任何 class 或
    id，但是可以有屬性選擇器或是偽類：

    html {}
input[type=text] {}
a:hover {}
    Layout

    Layout 是指整個網站的「大架構」的外觀，而非 .button 這種小元件的 class。網站通常會有一些主要的大區塊，可能是 header 或 footer，Layout 就是用來定義這些「大架構」的 CSS。如果有做 Responsive Web Design 或是用 Grid System，也是把規則寫在 Layout 這里。

    以下這是個范例：

    #header { margin: 30px 0; }
#articles-wrapper { ......; }
.sidebar {
  &.sidebar--right { ......; }
  &.sidebar-left { ......; }
}

    通常只有一個選擇器，一個 id、或一個 class。

    Module

    原本的 SMACSS 對 Module 的設計我覺得不是很好，所以我硬是將 Module
    拆分出一個 Partial。

    這里的 Module 顧名思義，就是可以在其他地方被重復使用，如果要找更明確的例子，我想就像 Twitter Bootstrap 的 Components
    一樣，或者像前面 OOCSS 所舉例的 .button 這種會被重復使用的元件模組。

    模組不需要用任何的 prefix，因為 Module 就是設計來可以重復應用在不同的 page 上。

    Partial

    Partial 跟 Latout 不同，也跟 Module 不同，他比 Layout 的范圍小，可能是
    header 底下的某個子元素。他不像 Module，他是特定單一領域下特別的設定。

    .nav--main {
  a { ......; }
}

    通常會將 Partial 的名稱加在子 class 作為 prefix，例如 .nav--main 底下的
    .nav--main_item。至于為什么要用這么奇怪的命名方式？這等等在 CSS 規范部分會說明介紹。

    State

    State 負責定義元素不同的狀態下，所呈現的樣式。但是并非指一個元素的 :hover 或 :active 下的狀態。舉例來說，一個導航欄分頁，目前所在頁面的分頁需要加上 .active
    的屬性表示目前位置是在這個分頁，HTML 會長這樣：

    因此可以替 .nav--main 增加 .active 這樣的子 class：

    .nav--main {
  // others…;
  .active {
    background: darken($background-color, 16%);
  }
}

    有時候為了讓閱讀更貼近語義，會用比較友善的命名方式，以此段的范例來說，.is-active 就比 .active 來得好讀。

    Theme

    Theme 是畫面上所有「主視覺」的定義，例如 border-color、background-image 或是 font-family 等相關的 Typography 設定。為什么說是「主視覺」？因為有些元件模組仍然是留在 Module 去定義，Theme 就像 Layout 一樣負責「大架構」上的視覺樣式。

    編者注 感謝 Only1Word 指出，theme 在 SMACSS 中更類似皮膚。

    CSS 規范

    這里整理的是我覺得一定要知道的，其他還有很多規范可以轉到文末的參考資源連結，那篇文章有介紹更多的細節。

    BEM

    BEM 即 Block、Element、Modifier 的縮寫，這是一種 class 的命名技巧。如果整個 project 只有自己一個人做，那當然是不太可能出現 class 重復的問題，但是如果同時多個 F2E 一起寫同個部分的 CSS，就很容易出現共用 class 的問題，因此有了 BEM 這樣的命名技巧。

    將 Block 區塊作為起始開頭，像前面 SMACSS 介紹的 Partial 就可以拿來作為 Block 的 prefix 名稱；Element 則是 Block 下的元素；Modifier 則是這個元素的屬性。

    不同 Block 和 Element 用 __ 兩個底線區隔開來，不同的 Modifier 則用 -- 兩個 dash 區隔。至于 - 一個 dash 則表示這個 class 不依賴任何 Block 或 Element，是個獨立的存在，例如：.page-container 或 .article-wrapper。

    這里有個范例：

    .sidebar {
  .sidebar--left__section {
    .sidebar--left__section--header {}
    .sidebar--left__section--footer {}
  }
}
    Javascript Hook

    透過 CSS class 來作為 Javascript 選取 DOM 節點的方式，就是 Javascript Hook。用 jQuery 可以常常看到這樣的寫法：$(".nav--main a")，可是當 CSS 跟 Javascript 攪在一起反而造成兩邊維護上的不便，當改了 CSS 時 Javascript 也要跟著改。

    所以用 HTML 的屬性去選取 DOM 節點會更好，如果非要用 CSS 的 class 那也可以多寫一個 js- 的 prefix，以表示這個節點有被 Javascript 使用，例如：

  • .........
    • 

  • .........
    • 

  • .........
    •

    PS. HTML 里兩個 class 之間用兩個空格，會比一個空格看起來好閱讀。

    合理的選擇器 
      
    class 無所謂是否語意化的問題；你應該關注它們是否合理，不要刻意強調 class
    
  名稱要符合語意，而要注重使用的合理性與未來性。

    有時候為了表示更明確，在使用 CSS 的選擇器時，要表示某的 class 是搭配某個標簽元素使用，會寫成這樣：

    ol.breadcrumb{}
p.intro{}
ul.image-thumbs{}

    但是上面這個寫法效能不是很好，同樣的目的但可以減少多余的修飾，試試改用下面這種寫法，將標簽名稱用注解標示起來，維護上有相同的效果，但是瀏覽器處理的速度會比較快：

    /*ol*/.breadcrumb{}
/*p*/.intro{}
/*ul*/.image-thumbs{}
    參考資源

    撰寫可管理、可維護的 CSS 高階技巧

    via chh

    • 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110844.html

    相關文章

    • 值得參考的css理論：OOCSS、SMACSS與BEM

      摘要：，字面意思是面向對象的，是由提出的理論，其主要的兩個原則是分離結構和主題分離容器和內容用一個例子來說明。分離容器和內容要求使頁面元素不依賴于其所處位置。命名規則不需要嚴格遵守，可以根據實際情況和自身喜好做其他的約定。 最近在The Sass Way[]一文，發現文章在開頭部分就提到了OOCSS、 SMACSS、 BEM、這3個詞。如果還不知道這些是什么，請先不要繼續看下去，聯想到作者這...

      馬忠志 評論0 收藏0

    • CSS方法論（一）

      摘要：由于年提出，這基于她在雅虎的工作。但是這很難做到解決的問題樣式全局性造成的樣式沖突問題多人協作的命名問題解決層疊問題，使的優先級保持相對扁平的模塊化，使更具有復用的能力于年由提出，當時他在雅虎工作。 編寫CSS會遇到什么問題？ 其實CSS很好寫，只要知道css語法，你就可以寫出來，通過各種學習，你也可以做出一個很美麗的頁面。對能熟練編寫網頁的人來說，可以很簡單的將設計圖變成網頁。但是在...

      haoguo 評論0 收藏0

    • 如何寫好CSS？

      摘要：由此按照的指導原則，我們應該寫一個，然后為其添加一些之類的來差異化它這樣在以上兩種附加的作用下，我們在中就可以獲得種不同的樣式，隨著附加增加，的樣式也會呈指數增加，千變萬化。 真正的問題是什么？ CSS即層疊樣式表，所以一層一層覆蓋其實是其本質特征。真正的問題在于維護，許多人認為CSS僅是樣式，不是代碼，無需維護，所以任意書寫，只要將自己需要的樣式的優先級設為最高即可，才導致了深層級...

      Yuqi 評論0 收藏0

    • CSS哲學偽命題

      摘要：最早遇到的大概的是命名的問題了吧，因為本身積累的詞匯量就少，動不動就沒單詞可用了。用于解決項目命名規則問題。其哲學理念是模塊化，功能單一性，關注點分離。借助而解決了中的命名空間的問題，使得單文件變得簡單清晰。 標題黨。這篇文章斷斷續續的修改過好幾次，也沒有滿意，本來是想總結一下我這些零散的 CSS 知識結構，可能由于知識體系不全面，總是沒能把知識點串聯成一個通順的內容。貼出來權當大家一...

      Shimmer 評論0 收藏0

    • 使用Sass來寫OOCSS

      摘要：自從年提出以來。它就成為一個領先的模塊系統，用來組織你的代碼方式之一。換句話說，你的樣式中盡量不要使用標簽或者標識符。我們必須使用來創建對象，通過在類中調用，將其合在一起。如果你不在刻意在中追求語義化，你仍然可以使用。 自從2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以來。它就成為一個領先的模塊系統，用來組織你的CSS代碼方式之一。 ...

      Carl 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <