新宿(近々代々木に移転)で働く18歳エンジニアのブログ

思ったこととか、技術的なこと書きます。

OOCSS(Object Oriented CSS)概要とその具体的な書き方

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

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

https://gyazo.com/edd683228905da986f909098e516bfbe

https://gyazo.com/3631086bbcef561119d4ab5e07e693b1

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

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

.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) (コンテナとコンテントを分離)

https://gyazo.com/15472d805f6b5818f1eaf5ad585941c4

メインエリアにある見出しは、#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に当てたスタイルを、部分的に上書きする必要が出てくる)

https://gyazo.com/85ed4e81f13f7fadce48b17d3468efc4

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

https://gyazo.com/9a1b4aaf6779bd6c1a921eaac1affeda

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

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

https://gyazo.com/ff390d01d829677be18194b05aff1bd7

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

https://gyazo.com/c183f08c1e98fa3852dc6de59028c53b

<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) (ストラクチャとスキンの分離)

https://gyazo.com/79a8806015865174ee8ad21aa9e67f12

https://gyazo.com/9b04f48f786ffac776dcb6db8ff1b1bc

https://gyazo.com/80b89c3a23aa9a7e6279f2eefc9e6e7d

<span class="button">Button!!</span>
.button {
  font-size:1.5em;
  padding:.5em 2em .4em;
  border:3px solid #000;
  border-radius:10px;
}

https://gyazo.com/6bc2d2891fd04246a694fe8c6f022e4e

<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