oocssとかついでにsmacssとbemの話も
DESCRIPTION
オブジェクト指向のCSSの話とか、smacssとbemの話とか、社内勉強会で好き勝手にしゃべってみましたTRANSCRIPT
OOCSS とかついでに SMACSS と BEM
もCreated by Yumi Hashizume / @uniq
20140702
お前、誰よ
• uniq だよー
• デザイナーだよー
• いまは夏コミ原稿中
これから話すこと
• しんどい CSS
• 私なりの OOCSS
• SMACSS の紹介
• BEM の紹介
こんな事あるあるー黄色いお知らせエリアが欲しいよ
.information_area { width:960px; padding: 10px; border: 1px solid #E6E5DA; background-color: #FFFCE2; border-radius: 3px;}
さらに緑のお知らせエリアも欲しいので、おなしゃす！
.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}
さらにさらに
.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}
コードが重複しまくり
.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}
さらにさらにさらにポップアップでは幅 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;}
もうぐちゃぐちゃ
• メンテしにくい
• 拡張しにくい
• コードも長いので描画遅い
そこで OOCSS
• 作業効率アップ
• メンテナンス性アップ
• 描画速度アップ
共通なものは共通なもの同士でオブジェクトとしてまとめる
つまりこんな感じ<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;}
ぜんぜんセマンティックじゃない！！
ある程度、妥協しましょう… 柔軟に生きよう。社会は厳しい。。。
そこそこセマンティックであれば良い
STRUCTURE と SKIN を分けて設定する
• structure
• 位置とか。 margin, padding, position...
• カタチっぽい class 名にする
• skin
• 色とか。デザインっぽい効果とか。 color, background, border...
• デザインっぽい、もしくはセマンティックな class 名
※ サイトによって解釈は違う
例えるなら
<!-- だめな例 --><div class=" リラックマのお皿にのったケチャップかけたチーズ入りオムレツ "> だめな例</div>
だめな例
良い例<!-- 良い例 --><div class=" リラックマのお皿 "> <div class=" ケチャップ チーズ オムレツ "> 良い例 </div></div>
いままでは…
要素を見て、どんなスタイルか把握していた
これからは…
class 名を見て、どんなスタイルか把握できるようにしていく
あと ID やめようjs やページ内リンクに使うのはありだけど、 style 指定するために使うのは、余程の理由がない限りやめていきたい
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;}
ID のない幸せな世界上書きが楽。
a {color:#000;}a.btn {color:#fff;}.event_list a {color:#f00;}.page_join a {color:#999;}
言いたいこと
• 継ぎ足し継ぎ足しの CSS はツライ
• OOCSS の精神で設計しとこ
• CSS を修正するときは、「足す」のではなく、「引く」「整理する」をしていこう
SMACSS の紹介SMACSS （スマックス）
SMACSS の CSS カテゴリ
• Base
• デフォルトスタイル
• Layout
• ページをエリアに分割したもの（接頭語： l- ）
• Module
• 再利用可能なパーツ
• State
• Layout や Module の特定の状態（接頭語： is- ）
• js も使いますよー
• Theme
• ブログのテーマ的な
SMACSS のイメージ
BEM の紹介
BEM の基本
• Block ：ページを構成する独立パーツ
• Element ： Black 内の一部として役割を果たすもの
• Modifire ： Block や Element の状態・属性
BEM の命名規則.Block__Element-Modifire
BEM のイメージ
事例紹介
THE END美味しいお酒を飲むために効率よく仕事したい