Chapter 03

オブジェクト指向CSSとは?

Arisa Fukuzaki
Arisa Fukuzaki
2020.10.12に更新

オブジェクト指向CSS(OOCSS) とは、Object-Oriented CSSの略で、一言で説明すると、再利用でき無駄がないclassを設計する事です。

Nicole Sullivan氏によって提唱され、普及しました。

「再利用できること」という特徴が、ここではキーワードになりますが、もう少し分かりやすく、ブログの構造の例を交えて解説します。

class属性の性質をここでおさらいすると、class属性は、以下のように、何度でも同じclass名を付与することができます。

ソースコード

<div class="article-body">
  <img src="./images/jason-leung-RCoZaAnnBug-unsplash.jpg" alt="mugs" />
  <h2>記事タイトル1</h2>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat corporis, tempora placeat recusandae dolor aliquam tenetur modi, harum sunt quia ab aspernatur officia cum cupiditate soluta porro vero dignissimos nulla.
  </p>
</div>

<div class="article-body">
  <img src="images/mitchell-luo-JhE0G6ESH8A-unsplash.jpg" alt="landscape" />
  <h2>記事タイトル2</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem deleniti aperiam laboriosam cupiditate sit! Numquam adipisci accusantium odit eligendi! Atque praesentium repellendus repellat quisquam numquam incidunt, vero vel voluptatibus illum?
  </p>
</div>
/* その他スタイル省略 */

.article-body {
  padding: 30px;
  margin: 30px auto;
  background-color: #c5c5c5;
  border-radius: 5px;
  max-width: 70%;
}

oocss_reusable_class_demo

上記のように、共通するclass名を持つ要素は、共通のスタイルを付与することができます。

このことを「再利用できる」と、オブジェクト指向OOCSSでは表現しています。

共通するclass名を持つ要素に、同じスタイルを付与することで、スタイルの記述をコンパクトにすることができています。

同じスタイルを付与する要素にもかかわらず、別々のclass名がついていた場合は、以下のように、同じスタイルの内容で2つのセレクタをわざわざ用意しなければならず、コードも長くなり、classの再利用性もありません。

<div class="article-body-first">
  <img src="./images/jason-leung-RCoZaAnnBug-unsplash.jpg" alt="mugs" />
  <h2>記事タイトル1</h2>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat corporis, tempora placeat recusandae dolor aliquam tenetur modi, harum sunt quia ab aspernatur officia cum cupiditate soluta porro vero dignissimos nulla.
  </p>
</div>

<div class="article-body-second">
  <img src="images/mitchell-luo-JhE0G6ESH8A-unsplash.jpg" alt="landscape" />
  <h2>記事タイトル2</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem deleniti aperiam laboriosam cupiditate sit! Numquam adipisci accusantium odit eligendi! Atque praesentium repellendus repellat quisquam numquam incidunt, vero vel voluptatibus illum?
  </p>
</div>
/* その他スタイル省略 */

/* どちらのセレクタ内も、全く同じスタイルの指定だが、class名が異なるために二度書いてしまっている */
.article-body-first {
  padding: 30px;
  margin: 30px auto;
  background-color: #c5c5c5;
  border-radius: 5px;
  max-width: 70%;
}

.article-body-second {
  padding: 30px;
  margin: 30px auto;
  background-color: #c5c5c5;
  border-radius: 5px;
  max-width: 70%;
}

少しずつオブジェクト指向OOCSSの概念がわかってきたところで、別の具体例で簡単な練習をしながら、さらに理解していきましょう。