変更に強いフロントエンドをつくるにはどうすれば良いか？ 従来のCSSの問題点を簡単な事例とともに、「オブジェクト指向CSS(OOCSS)」の導入例を紹介。 また、OOCSSをサポートする考え方やツールも簡単に紹介する。

4. Twitter: @irration
Blog: http://kinokoru.jp/

13. こういうクラスが仕様変更を重ねて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;
}

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

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

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

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

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

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

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

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

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

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

39. おまけ

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

41. 例えば・・・
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 スタイルの記述 */
}
}

42. 例えば・・・
SaSS(SCSS)
CSS
.header_inner {
width: 960px;
}
.nav {
width: 960px;
}
.footer_inner {
width: 960px;
}
:
:
$content_width: 960px;
.header_inner {
width: $content_width;
}
.nav {
width: $content_width;
}
.footer_inner {
width: $content_width;
}
:
:

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

44. というわけで…

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

46. ありがとうございました