triBlog

トリアナのブログ。

【vol.1】有名な3つのCSS設計をまとめてみた〜OOCSS編〜

2019.7.25
運転免許はAT限定です
ライター画像
おくだ

こんにちは〜〜〜!インターンの奥田です!
今日はみんな大好き(?)CSSのお話。

triBlogを読んでいる人の中にはWEB制作に携わっている人も多くいるかと思います。
そんな人達にとってCSSはとても身近な存在。
でも、ちゃんと”設計”に基づいてコーディングしてますか?

今回はCSS設計のOOCSS編です!
SMACSS、BEM編も随時投稿していきます(⌒▽⌒)

CSS設計とは

「なんじゃこのコードは…。」

他人のコードを見てこう思ったことはありませんか。

どんなルールでクラス名を振っているのか分からないし、
なぜか何度も同じスタイルが指定されている…。

それらは全部、CSS設計を無視しているからです。

ウェブサイトはイベントページを除いて、何年にも渡って運用していくことがほとんどです。
適当にクラスを振って、とりあえず見た目がデザイン通りならOK!ではありません。
公開後にデザインが変更になったり、コンテンツが追加されたりしたときに、
ちゃんと考えられたCSSでないとものすごい量のコードを修正することになります。

そこで必要になるのがCSS設計です。
今回は世界的に支持されている3つの設計のうちのOOCSSをご紹介します(⌒▽⌒)

OOCSSとは

オーオーシーエスエスと読みます。そのまんま。
オークスとかじゃダメだったんですかね。

OOCSSはObject Oriented CSSの略で、オブジェクト指向をCSSに当てはめた設計です。
と言ってもイマイチぴんとこないですよね。

OOCSSにおけるオブジェクト指向を簡単に言うと、
パーツそれぞれを独立させて再利用可能なものにしようってことです。

特徴

「構造」と「見た目」の分離

前述したOOCSSにおけるオブジェクト指向は「構造」と「見た目」の分離とよく言われます。
ひとことで言うと「colorとかとpaddingとかを一緒のクラスに指定すなよ!」ってことです。
百聞は一見にしかず。早速ご覧いただきましょう。

たとえばこんなラベルを作成する場合。

みなさんならどうクラスを振ってスタイリングしますか?

まずは再利用性がないアンチパターン(ダメな例)から紹介。

CSS

HTML

background-colorなどの色情報(見た目)と、
paddingやdisplay、border-radiusなどの位置や大きさ(構造)に関する記述が1つのクラスにごちゃまぜです。
そのせいで以下の記述が繰り返し書かれています。

もしこのラベルのpaddingの値を変更する場合、3箇所も書き換える必要があります。
似たようなラベルが10個も20個もある場合、大変な作業になってしまいます。

では、OOCSSに基づいた記述ではどうなるでしょうか。

CSS

HTML

構造を.labelに、見た目を.newと.pickup、.infoに定義しました。
すると、全体のコードの量が減ってスッキリするだけでなく、構造に変更があった場合でもCSSを1箇所変更するだけです
.labelというクラスは再利用でき、もしerrorというラベルを追加することになっても以下のクラスを足すだけで済みます。

CSS

HTML

もうお気づきかもしれませんが、OOCSSはマルチクラスを採用しています。
シングルクラスとマルチクラスは主に以下のように分類されます。

シングルクラス:1、2個のクラスを指定
マルチクラス:3個以上のクラスを指定

「コンテナー」と「コンテンツ」の分離

さらに、再利用ができるように「コンテナー」と「コンテンツ」を分離します。

ひとことで言うと「.main ul li.list-item { … } 」みたいに、親子で指定すなよ!ってことです。(伝われ…!)

「コンテンツ」再利用する部品そのものです。
「コンテナー」はその部品を包んでいる大枠です。
見出しを例にコードを見ていきましょう。

まずはアンチパターン(ダメな例)。

CSS

HTML

ここでは.mainがコンテナー、.headingがコンテンツです。
親クラスの下に子クラスを連ねると、同じ見出しをサイドバーにも配置しようと思った時、また同じ記述を書かなければいけません。
以下がそのパターンです。

CSS

HTML

コンテンツがコンテナーに依存しているため、このようなことが起きます。
OOCSSに基づいてコンテンツは1つの部品として定義してしまいましょう。

CSS

親要素に依存していないので、複数配置するときにCSSを足さずに済みます。

拡張性

OOCSSには拡張性があります。クラスを足し算していくことによって、様々なパターンに対応します。
例えば見出しの場合。

これがアンチパターン。

CSS

HTML

さきに定義した1本線のスタイルを、

あとで2本線のスタイルで上書きしてしまっています。

上書きを多用するとプロパティの詳細度を上げるために親要素をたくさん連ねたり、!importantを使うことになりかねません。
詳細度を上げることを繰り返すと、いずれ!importantだらけになってしまいます。
また、.aside(コンテナー)の下に.heading(コンテンツ)を連ねてスタイルを指定していることで、
2本線の見出しが他の場所に移った時、また同じCSSを書かなければいけません。

この場合は.headingには最小限の構造のスタイルだけを残し別に.simple-heading、.primary-headingというクラスを用意します。
また、コンテナーとコンテンツを連ねて指定するのではなく、クラスを独立させて指定します。

CSS

HTML

こうすればプロパティの詳細度を気にする必要がなく、コンテナーに依存していないので2本ボーダーをどこに配置しても書き直す必要はありません。
CSSを上書きして元のスタイルを打ち消すのでなく、
まず最小限のスタイルを当てて、それからクラスを足し算していくイメージです。

OOCSSまとめ

OOCSSはマルチクラスを採用しているので、CSSがスッキリするというメリットがありますが、
その分、クラスが多くなるデメリットもあります。

また、「構造と見た目の分離」と「コンテナーとコンテンツの分離」によって、
メンテナンス性と再利用性に優れています。

次回はSMACSS編です。お楽しみに(⌒▽⌒)

記事を書いた人

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ページ上部へ