Oocssとかついでにsmacssとbemの話も

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-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-radius: 3px;
}
width:960px;
padding: 10px;
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-radius: 3px;
}
width:960px;
padding: 10px;
border-radius: 3px
}
.alert_area {
width:960px;
padding: 10px;
color:#fff;
border-radius: 3px
}

さらにさらにさらに
ポップアップでは幅600pxにしたいとか…
このページのは文字が大きくしたいとか…
3カラムバージョンも欲しいとか…
.information_area {
width:960px;
padding: 10px;
border-radius: 3px;
}
.popup .information_area {
width:600px;
}
width:960px;
padding: 10px;
border-radius: 3px
}
.event_page .information_green_area {
font-size:24px;
}
.alert_area {
width:960px;
padding: 10px;
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 {
}
.box_success {
}
.box_alert {
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
• ブログのテーマ的な

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

BEMの命名規則
.Block__Element-Modifire

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

Oocssとかついでにsmacssとbemの話も

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Oocssとかついでにsmacssとbemの話も (20)

More from Yumi uniq Ishizaki (10)

Recently uploaded (13)

Oocssとかついでにsmacssとbemの話も