オブジェクト指向のCSSの話とか、smacssとbemの話とか、社内勉強会で好き勝手にしゃべってみました

1. OOCSSとか
ついでにSMACSSとBEMも
Created by Yumi Hashizume / @uniq
20140702

2. お前、誰よ
• uniqだよー
• デザイナーだよー
• いまは夏コミ原稿中

3. これから話すこと
• しんどいCSS
• 私なりのOOCSS
• SMACSSの紹介
• BEMの紹介

4. こんな事あるあるー
黄色いお知らせエリアが欲しいよ
.information_area {
width:960px;
padding: 10px;
border: 1px solid #E6E5DA;
background-color: #FFFCE2;
border-radius: 3px;
}

5. さらに
緑のお知らせエリアも欲しいので、おなしゃす！
.information_area {
width:960px;
padding: 10px;
border: 1px solid #E6E5DA;
background-color: #FFFCE2;
border-radius: 3px;
}
.information_green_area {
width:960px;
padding: 10px;
border: 1px solid #5BC077;
background-color: #B4ECAC;
border-radius: 3px
}

6. さらにさらに
.information_area {
width:960px;
padding: 10px;
border: 1px solid #E6E5DA;
background-color: #FFFCE2;
border-radius: 3px;
}
.information_green_area {
width:960px;
padding: 10px;
border: 1px solid #5BC077;
background-color: #B4ECAC;
border-radius: 3px
}
.alert_area {
width:960px;
padding: 10px;
border: 1px solid #FFA115;
background-color: #E00;
color:#fff;
border-radius: 3px
}

7. コードが重複しまくり
.information_area {
width:960px;
padding: 10px;
border: 1px solid #E6E5DA;
background-color: #FFFCE2;
border-radius: 3px;
}
.information_green_area {
width:960px;
padding: 10px;
border: 1px solid #5BC077;
background-color: #B4ECAC;
border-radius: 3px
}
.alert_area {
width:960px;
padding: 10px;
border: 1px solid #FFA115;
background-color: #E00;
color:#fff;
border-radius: 3px
}

8. さらにさらにさらに
ポップアップでは幅600pxにしたいとか…
このページのは文字が大きくしたいとか…
3カラムバージョンも欲しいとか…
.information_area {
width:960px;
padding: 10px;
border: 1px solid #E6E5DA;
background-color: #FFFCE2;
border-radius: 3px;
}
.popup .information_area {
width:600px;
}
.information_green_area {
width:960px;
padding: 10px;
border: 1px solid #5BC077;
background-color: #B4ECAC;
border-radius: 3px
}
.event_page .information_green_area {
font-size:24px;
}
.alert_area {
width:960px;
padding: 10px;
border: 1px solid #FFA115;
background-color: #E00;
color:#fff;
border-radius: 3px
}
.col_3.information_area,
.col_3.information_green_area,
.col_3.alert_area {
width:320px;
}

9. もうぐちゃぐちゃ
• メンテしにくい
• 拡張しにくい
• コードも長いので描画遅い

10. そこでOOCSS
共通なものは共通なもの同士で
オブジェクトとしてまとめる
• 作業効率アップ
• メンテナンス性アップ
• 描画速度アップ

11. つまりこんな感じ
<div class="row">
<div class="container">
<div class="col_3"><div class="box box_imformation">いわゆる普通のお知らせ</div></div>
<div class="col_3"><div class="box box_success">成功しちゃったお知らせ</div></div>
<div class="col_3"><div class="box box_alert">マジでヤバいお知らせ</div>
</div>
</div>
.row { /*bootstrap参考*/ }
.container { width:960px; }
.container_popup { width:600px; }
.font_24 {font-size:24px;} /*特例的なサイズ変更は、昔からある有りがちcommon.cssを*/
.col_3 { width:33.3%}
.box {
padding: 10px;
border-radius: 3px;
}
.box_information {
border: 1px solid #E6E5DA;
background-color: #FFFCE2;
}
.box_success {
border: 1px solid #5BC077;
background-color: #B4ECAC;
}
.box_alert {
border: 1px solid #FFA115;
background-color: #E00;
color:#fff;
}

12. ぜんぜんセマンティッ
クじゃない！！
ある程度、妥協しましょう
…柔軟に生きよう。社会は厳しい。。。
そこそこセマンティックであれば良い

13. STRUCTURE とSKIN を分け
て設定する
• structure
• 位置とか。margin, padding, position...
• カタチっぽいclass名にする
• skin
• 色とか。デザインっぽい効果とか。color, background, border...
• デザインっぽい、もしくはセマンティックなclass名
※ サイトによって解釈は違う

14. 例えるなら
だめな例
<!-- だめな例-->
<div class="リラックマのお皿にのったケチャップかけたチーズ入りオムレツ">
だめな例
</div>
良い例
<!-- 良い例-->
<div class="リラックマのお皿">
<div class="ケチャップチーズオムレツ">
良い例
</div>
</div>

15. いままでは…
要素を見て、どんなスタイルか把握していた

16. これからは…
class名を見て、どんなスタイルか把握できるようにして
いく

17. あとID やめよう
jsやページ内リンクに使うのはありだけど、style指定する
ために使うのは、余程の理由がない限りやめていきたい

18. CSSでID使うと困る点
上書きが大変。いちいちIDつけないと上書きできない。
ID効果は強いんです。
#main a {color:#000;}
a.btn, /* 全てのページのbtn文字色を白くしたい*/
#main a.btn { /* mainのボタンにも効果が必要なので、こちらも指定しないといけない*/
color:#fff;
}
#main .event_list a {color:#f00;}
#main .page_join a {color:#999;}

19. IDのない幸せな世界
上書きが楽。
a {color:#000;}
a.btn {color:#fff;}
.event_list a {color:#f00;}
.page_join a {color:#999;}

20. 言いたいこと
• 継ぎ足し継ぎ足しのCSSはツライ
• OOCSSの精神で設計しとこ
• CSSを修正するときは、「足す」のではなく、「
引く」「整理する」をしていこう

21. SMACSS の紹介
SMACSS（スマックス）

22. SMACSSのCSSカテゴリ
• Base
• デフォルトスタイル
• Layout
• ページをエリアに分割したもの（接頭語：l-）
• Module
• 再利用可能なパーツ
• State
• LayoutやModuleの特定の状態（接頭語：is-）
• jsも使いますよー
• Theme
• ブログのテーマ的な

23. SMACSSのイメージ

24. BEM の紹介

25. BEMの基本
• Block ：ページを構成する独立パーツ
• Element ：Black内の一部として役割を果たすも
の
• Modifire ：BlockやElementの状態・属性

26. BEMの命名規則
.Block__Element-Modifire

27. BEMのイメージ

28. 事例紹介

29. THE END
美味しいお酒を飲むために効率よく仕事したい