より論理的な方法で CSS を記述する

OOCSS と BEM

以下の理由から、OOCSS と BEM を組み合わせて使用​​することをお勧めします:

• CSS と HTML の間の明確かつ厳密な関係を明確にするのに役立ちます。

• は、再利用可能で組み立てが簡単なコンポーネントの作成に役立ちます。

• はネストを減らし、特異性を下げる可能性があります。

• は、拡張可能なスタイルシートの作成に役立ちます。

OOCSS は、「オブジェクト指向 CSS」とも呼ばれ、CSS を記述する方法です。そのアイデアは、スタイル シートを「オブジェクト」のコレクションとして考えることを奨励することです。つまり、再利用可能で繰り返し可能なコード スニペットを作成します。ウェブサイト全体で何度でも使用できます。

参考:

• Nicole Sullivan の OOCSS wiki

• Smashing Magazine の OOCSS の紹介

BEM は、HTML および CSS の命名規則のメソッドですのためにクラス名。 BEM は元々、Yandex によって提案されました。Yandex には膨大なコード ベースとスケーラビリティがあることを認識していました。BEM はそのために生まれ、OOCSS に準拠する一連の参照ガイダンス仕様として機能します。

• CSS Trick's BEM 101

• Harry Roberts による BEM の紹介

Example

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <p class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </p>

</article>

.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

• .listing-card は高レベルのコンポーネントを表すブロックです。 .listing-card 是一个块（block），表示高层次的组件。

• .listing-card__title 是一个元素（element），它属于 .listing-card 的一部分，因此块是由元素组成的。

• .listing-card--featured 是一个修饰符（modifier），表示这个块与 .listing-card 有着不同的状态或者变化。

OOCSS 和 BEM

出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：

• 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。

• 可以帮助我们创建出可重用、易装配的组件。

• 可以减少嵌套，降低特定性。

• 可以帮助我们创建出可扩展的样式表。

OOCSS，也就是 “Object Oriented CSS（面向对象的CSS）”，是一种写 CSS 的方法，其思想就是鼓励你把样式表看作“对象”的集合：创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。

参考资料：

• Nicole Sullivan 的 OOCSS wiki

• Smashing Magazine 的 Introduction to OOCSS

BEM，也就是 “Block-Element-Modifier”，是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。

• CSS Trick 的 BEM 101

• Harry Roberts 的 introduction to BEM

示例

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <p class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </p>

</article>

.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

• .listing-card 是一个块（block），表示高层次的组件。

• .listing-card__title 是一个元素（element），它属于 .listing-card 的一部分，因此块是由元素组成的。

• .listing-card--featured 是一个修饰符（modifier），表示这个块与 .listing-card

.listing-card__title は .listing-card の一部である要素であるため、ブロックは要素で構成されます。

.listing-card--featured は修飾子であり、このブロックが .listing-card とは異なるステータスまたは変更を持つことを示します。

🎜

🎜🎜OOCSS と BEM🎜🎜🎜🎜次の理由から、OOCSS と BEM を組み合わせて使用​​することをお勧めします: 🎜🎜🎜🎜 は CSS と HTML を分類するのに役立ちます明確で厳格な関係。 🎜🎜🎜🎜 は、再利用可能で組み立てが簡単なコンポーネントの作成に役立ちます。 🎜🎜🎜🎜 はネストを減らし、特異性を下げる可能性があります。 🎜🎜🎜🎜は、拡張可能なスタイルシートの作成に役立ちます。 🎜🎜🎜🎜🎜OOCSS🎜 は、「オブジェクト指向 CSS」とも呼ばれ、CSS を記述する方法です。そのアイデアは、スタイル シートを「オブジェクト」のコレクションとして考えることを奨励することです。つまり、再利用可能で繰り返し可能なコード スニペットを作成します。ウェブサイト全体で何度でも使用できます。 🎜🎜参考: 🎜🎜🎜🎜Nicole Sullivan の OOCSS wiki🎜🎜🎜🎜Smashing Magazine の OOCSS の紹介🎜🎜🎜🎜🎜BEM🎜 は、HTML および CSS の命名規則のメソッドですのためにクラス名。 BEM はもともと Yandex によって提案されたもので、Yandex が膨大なコード ベースとスケーラビリティを持っていることを認識していました。BEM はそのために生まれ、OOCSS に準拠する一連の参照ガイダンス仕様として機能します。 🎜🎜🎜🎜CSS Trick's BEM 101🎜🎜🎜🎜Harry Roberts による BEM の紹介🎜🎜🎜🎜🎜Example🎜🎜rrreeerrreee🎜🎜🎜.listing-card は高レベルのコンポーネントを表すブロックです。 🎜🎜🎜🎜.listing-card__title は .listing-card の一部である要素であるため、ブロックは要素で構成されます。 🎜🎜🎜🎜.listing-card--featured は修飾子であり、このブロックが .listing-card とは異なるステータスまたは変更を持つことを示します。 🎜🎜🎜🎜🎜🎜より合理的な方法で CSS を記述することに関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。 🎜🎜🎜