CSS プログラミングにおける OOCSS および SMACSS デザイン パターンの概要

この記事では、CSS プログラミングの OOCSS と SMACSS のデザイン パターンを主に紹介します。CSS を設計するためのこれら 2 つの異なるアイデアを分析します。必要な方は参考にしてください。CSS を書くのは難しいことではありません。保守可能な CSS を作成することは、他のプログラミング言語よりも困難です。幸いなことに、すでに多くの設計パターンやアイデアを提案している達人がいます。巨人の肩に乗れば、半分の労力で 2 倍の結果を得ることができます。この記事ではOOCSS、SMACSS、CSSを書く際に注意すべき仕様についてお話します。

(この記事の例では SCSS 構文を使用しています)

OOCSS
OOCSS は新しい技術ではなく、CSS を記述するための単なるデザインパターン、または一般的に言えば「倫理」であると言えます。焦点は次の 2 つだけだと思います:

HTML 構造への依存を減らす
1. CSS クラスの繰り返し使用を増やす

   
   

HTML 構造への依存を減らす

<nav class="nav--main">   
  <ul>   
    <li><a>.........</a></li>   
    <li><a>.........</a></li>   
    <li><a>.........</a></li>   
  </ul>   
</nav>

一般的にナビゲーションバーの書き方はHTML の例と同様に、これらの 3499910bf9dac5ae3c52d5ede7383485 タグのスタイルを定義したい場合は、パフォーマンスの問題に関係なく、CSS を .nav--main ul li a {} として記述することができます。 、この書き方は要素に過度に依存していることがわかります。タグの構造は後で変更される可能性があり、それに応じて CSS を再構築する必要があり、無駄なメンテナンスコストが発生します。

この例を考慮すると、原則として、3499910bf9dac5ae3c52d5ede7383485 の後には

タグが 1 つだけ存在し、通常は独立して存在しません。これは .nav--main a {} として記述することもできますが、これはより良い記述方法であり、クラス nav--main_item を 3499910bf9dac5ae3c52d5ede7383485 に直接追加することもできます。後者はOOCSSが提唱する使い方です。

理論的にはこの書き方の方がパフォーマンスが良く（検証できませんが）、レベルも比較的簡単です。

CSS クラスの再利用を増やす
OOCSS の概念では、クラスを再利用することが重要視されており、CSS セレクターとして ID を使用することは避けるべきです。アイデアは、

OOP

のように重複したコードを可能な限り抽出することです。次の例は、2 つのボタンの 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 は、2 つの異なるスタイルのボタンを抽出します。重複を削除します。パーツを分割して同じクラスに定義します

。したがって、このようなスタイルを使用するには、HTML の記述は次のようになります:

<a class="button button-default">   
<a class="button button-primary">

まず button を使用してこれをボタン スタイルとして宣言し、次にボタンの背景色の違いとして button-default または button-primary を使用します。これにより、たとえば、Web サイト上のすべてのボタンのサイズを変更する場合、.button のパディングを変更するだけで済みます。

SMACSS

SMACSS についての私の理解はまだそれほど深くありません。CSS のスケーラブルなモジュラー アーキテクチャを読むと、より深く理解できるようになるでしょう。 SMACSS の現在の概念は、CSS のさまざまなビジネス ロジックを分割する方法に限定されています:

しかし、元の設計はあまり適切ではないと思うので、自分でいくつかの改良を加えました:

Base
Base はデフォルトの設定ですCompass を使用している場合は、タグ要素の値 (ブラウザのリセットなど) をここに書き込むことができます。 @include global-reset だけです。ここではラベル要素自体のみが設定され、クラスや

id は表示されませんが、属性セレクターまたは疑似クラスが存在する可能性があります:

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

Layout

Layout は、全体の「大きな構造」を指します。 .button などの小さなコンポーネントのクラスの代わりに、「web サイト」を使用します。 Web サイトには通常、ヘッダーまたはフッターなどの大きなセクションがいくつかあります。レイアウトは、これらの「大きな構造」を定義するために使用される CSS です。レスポンシブ Web デザインを行う場合やグリッド システムを使用する場合は、レイアウトにここにルールを記述します。

以下は例です:

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

通常、セレクター、ID、またはクラスは 1 つだけです。

Module

元の SMACSS の Module の設計があまり良くないと思うので、Module

を Partial に分割しました。

ここでのモジュールは、名前が示すように、他の場所で再利用できます。より明確な例を探している場合は、Twitter Bootstrap のコンポーネント

、または前の OOCSS の .button の例に似ていると思います。たとえば、コンポーネント モジュールを再利用できます。

モジュールは別のページで再利用できるように設計されているため、モジュールにはプレフィックスを使用する必要はありません。

Partial
Partial は Latout や Module とは異なり、Layout よりもスコープが小さく、

header の下にあるサブ要素である場合があります。これはモジュールとは異なり、特定の単一フィールドの特別な設定です。

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

通常は、.nav--main の下の

.nav--main_item のように、サブクラスに接頭辞として Partial の名前を追加します。なぜこのような奇妙な命名方法が使われるのでしょうか？これなどについては、CSS 仕様のセクションで説明します。

州

State 负责定义元素不同的状态下，所呈现的样式。但是并非指一个元素的 :hover 或 :active 下的状态。举例来说，一个导航栏分页，目前所在页面的分页需要加上 .active
的属性表示目前位置是在这个分页，HTML 会长这样：

<nav class="nav--main">   
  <ul>   
    <li><a>.........</a></li>   
    <li class="active"><a>.........</a></li>   
    <li><a>.........</a></li>   
  </ul>   
</nav>

因此可以替 .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 使用，例如：

<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>   
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>   
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>

PS. HTML 里两个 class 之间用两个空格，会比一个空格看起来好阅读。
合理的选择器

    class 无所谓是否语意化的问题；你应该关注它们是否合理，不要刻意强调 class
    名称要符合语意，而要注重使用的合理性与未来性。

有时候为了表示更明确，在使用 CSS 的选择器时，要表示某的 class 是搭配某个标签元素使用，会写成这样：

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

但是上面这个写法效能不是很好，同样的目的但可以减少多余的修饰，试试改用下面这种写法，将标签名称用注解标示起来，维护上有相同的效果，但是浏览器处理的速度会比较快：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS3如何实现自定义“W”形运行轨迹

关于css3弹性盒模型的介绍

关于CSS 平级和儿子级样式的写法

以上がCSS プログラミングにおける OOCSS および SMACSS デザイン パターンの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。