Zenn
🍅

これだけ理解してれば「OOCSS？まぁ知ってますよ」て言えるハズよね

2025/02/10に公開
CSS
oocss
tech

OOCSSについて

OOCSSについて自分の理解を纏める、がその前に
これから深掘りして理解しようとしている方々に、私から一つアドバイスを言わせてほしい、、

OOCSSを理解しようとするならば、OOCSSの解釈記事を読んだ方が分かりやすいぞ！！！

OOCSSを色々と調べていると、オフィシャルなドキュメントとしてhttp://oocss.org/や、提唱者である Nicole Sullivan (ニコール・サリバン)氏の Git Hub のリンクページなどがよく見られるが、正直に言ってめっっっっちゃ難しい！！

と言うより、情報が少なかったり、内容が抽象的すぎて自己の経験と重ならない部分については正に「理解の画竜点睛を欠く」といった所だ

なのでOOCSSを理解しようとする時は、まずは優秀なエンジニア達による2次解釈の記事を読むことをお勧めする。
「難解な原作本を読むことをやめて、分かりやすく噛み砕かれた簡易版の本を読む」そんな経験が皆様にもあるだろう、そんなイメージだ

この記事もそんな素晴らしいエンジニア達の2次解釈を更に自己消化した記事となる

もしこの記事の内容が提唱者の意図とずれている場合や理解が違う場合はお指摘を頂けると幸いである

2つの基本概念

OOCSSにおいて理解すべきことは大別して２つある、それが

  • 構造と見た目の分離 (= Separate structure and skin)
  • コンテンツとコンテナの分離 (= Separate container and content)

1.構造と見た目の分離 (= Separate structure and skin)

これはパーツのCSSを「構造」「見た目」それぞれで class を作ろうと言うものだ
上記画像のボタンをOOCSSにスタイルリングすると以下のようになる

※ 本来 .button .button-red と言うclass名は汎用的過ぎて良くないが、今回の本筋に関わる部分では無いので、分かりやすさ優先とした命名にしている

CSS
/* 構造 */
.button {
    width: 200px;
    height: 60px;
    padding: 20px;
    border-radius: 1000px;
}

/* 見た目 */
.button-red {
    color: #fff;
    backgrond-color: #db0000;
}
HTML
<div class="button button-red">ボタン</div>

これにより、もしボタンの装飾を変えたい場合などは新たに .button-blue みたいなclassを追加することで簡単に対応する事が可能になった。
また人によっては見た目のclass color background-color それぞれ専用で作る場合もある

CSS
/* 見た目 */
.button-color-white {
    color: #fff;
}
.button-background-red {
    backgrond-color: #db0000;
}

構造と見た目を分離する目的

OOCSSは提唱者曰く「Webページをレゴブロックの集まりの様に考えて」と言っている
これは解釈が揺れそうな抽象的表現だが、自分の理解としては

  • パーツが何処に配置されてもレイアウトに影響を与えないし、影響も受けない
  • 同じ形でも、classを付け替えることで自由に装飾を変更することが出来る
    だと理解している。

要は「パーツの姿形が、親要素・子要素と言ったHTMLの構造に依存していない状態がベスト」つまり、「再利用性の高いCSS」これを目的としてるのがOOCSSなのだろう、きっとね

2.コンテンツとコンテナの分離 (= Separate container and content)


これは親要素にスタイルが依存している子要素をやめようぜ！と言うことだ、これに関してはNGとOK、それぞれの例を見ると直感的に理解しやすい

NG例
.container {/* 省略 */}

.container .content {
    width: 50%;
    margin: 20px;
    /* 省略 */
}
OK例
.container {/* 省略 */}

.container-content {
    width: 50%;
    margin: 20px;
    /* 省略 */
}

ここで大事なポイントしては、上記の例を見て「あーなるほど、親子関係でclassを書くな！てことね」というルールだけを覚えるのではなく「親子関係を無くす意味」まで含めて理解できるとなお良い

.container-content を独立させることで、HTMLの構造変化が起きた場合でもスタイルが崩れない保守性の高い記述になり、また.container-content を移植や修正する際にもコーダーの考える事が減って再利用性の高い記述となっているのだ

Discussion