狠狠撸

CSSにもオブジェクト指向を - OOCSSことはじめ

Twitter: @irration

Blog: http://kinokoru.jp/

こういうクラスが仕様変更を重ねてCSSの随所で誕生。
.messagebox_bold {
border-width: 2px;
font-weight: bold;
}

.another_box_round {
border-width: 5px;
}

.other_box_round_bold {
border-radius: 5px;
border-width: 2px;
font-weight: bold;
}

ケース1: 「あ、サイトの随所にあるボックスの線の太さ
なんだけど、やっぱ3pxにしてくんない？」
.messagebox_bold {
border-width: 2px;
font-weight: bold;
}

border-radius: 5px;
}

. other_box_bold {
border-radius: 5px;
border-width: 2px;
font-weight: bold;
}

えっと…このクラスとこのクラスか…
.messagebox_bold {
border-width: 2px;
font-weight: bold;
}

border-radius: 5px;
}

. other_box_bold {
border-radius: 5px;
border-width: 2px;
font-weight: bold;
}

ケース2:「随所にあるボックスの枠線の角なんだけど、丸
みを3pxにしてほしいのね」
.messagebox_bold {
border-width: 2px;
font-weight: bold;
}

border-radius: 5px;
}

. other_box_bold {
border-radius: 5px;
border-width: 2px;
font-weight: bold;
}

今度はこことここか…
.messagebox_bold {
border-width: 2px;
font-weight: bold;
}

border-radius: 5px;
}

. other_box_bold {
border-radius: 5px;
border-width: 2px;
font-weight: bold;
}

でも今度はこうなって、
結局修正箇所が多いのは変わらないんじゃないの？
.messagebox.bold {
border-width: 2px;
}

.another_box.bold {
border-width: 2px;
}

. other_box.bold {
border-width: 2px;
}

ざっくり言うと
前述のOOCSS記法に対して
さらに「モジュール化」という
概念を加えたもの

モジュールごとの管理で
どこを修正すれば何が変わるのかわかりやすくなる。
./layout/header.css
./layout/navigationarea.css
./layout/content.css
./layout/three_column.css
:

./mod/messagebox.css
./mod/form.css
./mod/navigationlist.css
:

./main.css

SMACSSの詳細
日本語?電子書籍版（有料$15）
https://smacss.com/ja
英語?Web版(無料)
http://smacss.com/

モジュール化で修正は楽になるけど
一々mainファイルに統合するの
面倒だよ！

Grunt ?

とにかく色んなものが
自動化できるよ！
(例) JS の uglify, 複数ファイルの
結合, ファイル変更の監視, …

SaSS(SCSS) + Compass
CSSで変数使ったり、
ネストできたり、
OOCSSと親和性が高い。
Gruntでコンパイルの自動化可能。

例えば???
CSS

SaSS(SCSS)
.box{

.box{
/* box スタイルの記述 */
}

/* box スタイルの記述 */
.inner {
/* .box .inner スタイルの記述 */

.box .inner {
/* .box .inner スタイルの記述 */
}

.deeper {
/* .box .inner .deeper スタイルの記述*/
}

.box .inner .deeper {
/* .box .inner .deeper スタイルの記述 */
}

}
&.green {
/* .box.green スタイルの記述 */
}

box.green {
/* .box.green スタイルの記述 */
}
}

例えば???
SaSS(SCSS)

CSS
.header_inner {
width: 960px;
}
.nav {
width: 960px;
}
.footer_inner {
width: 960px;
}
:
:

$content_width: 960px;
.header_inner {
width: $content_width;
}
.nav {
}
.footer_inner {
}
:
:

修正が楽になる！
修正漏れが減る！

OOCSSをはじめると
良いことあるかも。

ありがとうございました

狠狠撸

CSSにもオブジェクト指向を - OOCSSことはじめ

More Related Content

CSSにもオブジェクト指向を - OOCSSことはじめ