OOCSS(Object Oriented CSS)概要とその具体的な書き方 - 代々木で働く22歳大学生のブログ

枠とモジュールという考え方

枠モジュールをはめ込んでいくための枠組み
モジュールレゴや積み木などの1ピース（部品）

モジュール名さえかぶらなければスタイルの競合が起きない
モジュールの一覧を作る

モジュールの命名、抽象的（汎用的）⇄具体的（汎用性は低い）

.mod-moduleA なにかのモジュール　それが何のモジュールか情報がない
.mod-itemblock  商品を表示するブロック　
.mod-relateditems   関連する商品　関連するもの以外が入るかもしれない
.mod-relatedbooks   関連する書籍　書籍以外の商品が入るかもしれない
.mod-relatedbooknav 関連する書籍のナビゲーション　ナビゲーションのリンクはないかもしれない
.mod-amazonnav  アマゾンのナビゲーション　アマゾンへのリンクはないかもしれない

汎用性と具体性のバランスをどうとるのか

求められるのは、場合にもよりますが、多くのケースで具体的すぎず、抽象的すぎない名前最低限、そのモジュールがどんな役割を持っているのか伝わる程度

微調整のための便利なクラス

.ex-align-r { text-align:right; }
.ex-align-l { text-align:left; }
.ex-align-t { vertical-align:top; }
.ex-align-b { vertical-align:bottom; }

モジュールとスキンという考え方

<span class="buttonbase twitterbutton">
  Twitter
</span>
<span class="buttonbase facebookbutton">
  Facebook
</span>

/* モジュール */
.buttonbase {
  border:5px solid white;
  border-radius:10px;
  padding:.2em .5em;
  color:white;
  display:inline-block;
  margin:0 10px;
}
 
/* スキン */
.twitterbutton {
  background:red;
}
.facebookbutton {
  background:blue;
}

共通部分を「モジュール」としてまとめ、差異は「スキン」としてまとめると、クラス名をみたときにコンテンツの内容もある程度なら推測ができるし、しかもCSSも効率的に書くことができる

[Separate container and content] (https://github.com/stubbornella/oocss/wiki#separate-container-and-content) (コンテナとコンテントを分離)

メインエリアにある見出しは、#mainのh2 問い合わせブロックにある見出しは、.contactの中にある、.header以下にあるh2 サイドバーにあるMenu1やMenu2などの見出しは、#sidebar以下のh2

#main h2 {
}
#main .contact .header h2 {
}
#sidebar h2 {
}
.somewhere .title h2 {
}

場所に依存した指定方法だからダメ、以下のような問題が発生する

Essentially, this means “rarely use location-dependent styles”.

上書き合戦（h2をいろいろなところで使うとすれば、このh2に当てたスタイルを、部分的に上書きする必要が出てくる）

コピー（見栄えが同じ見出しがいろいろなところに登場した場合、それぞれのh2を含むセレクタについて、同じスタイルの指定をコピーして使わなければならなくなってしまうかもしれない）

詳細度（使用しているセレクタにおいて、何セレクタを使えば何点加算されるとあらかじめ決まっており、合計点が高いセレクタの指定を優先する）

→ 当てたいスタイルの詳細度が、競合しているどこかのスタイルよりも低ければ、自分の書いたスタイルは反映されない

!important

Webページを、レゴの集まりで考える

<h2 class="heading">Title</h2>
<h2 class="heading2">Contact</h2>
<h2 class="heading3"><span>Menu1</span></h2>
<h2 class="heading3"><span>Menu2</span></h2>

/* heading module */
 
.heading {
  prop: val;
}
 
/* heading2 module */
 
.heading2 {
  prop: val;
}
 
/* heading3 module */
 
.heading3 {
  prop: val;
}
  .heading3 > span {
    prop: val;
  }

OOCSSでは、このひとつひとつのレゴのパーツをCSSオブジェクト（= モジュール）とする。

Basically, a CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site.

https://github.com/stubbornella/oocss/wiki#whats-a-css-object

同じパーツを二度コーディングする必要がなくなる。

[Separate structure and skin] (https://github.com/stubbornella/oocss/wiki#separate-structure-and-skin) (ストラクチャとスキンの分離)

<span class="button">Button!!</span>

.button {
  font-size:1.5em;
  padding:.5em 2em .4em;
  border:3px solid #000;
  border-radius:10px;
}

<span class="button caution">Caution!!</span>

.caution {
  font-weight:bold;
  color:#fff;
  background:#FD3636;
  border-color:#BC2828;
}

BAD pattern

<span class="cautionButton">Caution!!</span>

.cautionButton {
  font-size:1.5em; /* 共通 */
  padding:.5em 2em .4em; /* 共通 */
  border:3px solid #000; /* 共通 */
  border-radius:10px; /* 共通 */
  font-weight:bold;
  color:#fff;
  background:#FD3636;
  border-color:#BC2828;
}

基本となるストラクチャに、スキンを適用して具体的な見栄えを作る重要なのは、モジュールの関係を「ストラクチャ」と「スキン」で整理すること

まとめ

CSSオブジェクトをストラクチャとスキンに分けて整理する。

Reference from

https://app.codegrid.net/entry/frames-and-modules https://github.com/stubbornella/oocss/wiki https://app.codegrid.net/entry/oocss-1 https://www.slideshare.net/stubbornella/object-oriented-css