Download to read offline
Uploaded byYumi uniq Ishizaki
PPTX, PDF2,342 views
Oocssとかついでにsmacssとbemの話も
オブジェクト指向のCSSの話とか、smacssとbemの話とか、社内勉強会で好き勝手にしゃべってみました
Recommended
Oocssとかついでにsmacssとbemの話も
- 1.OOCSSとか ついでにSMACSSとBEMも Createdby 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.
- 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.
- 22.SMACSSのCSSカテゴリ • Base• デフォルトスタイル • Layout • ページをエリアに分割したもの（接頭語：l-） • Module • 再利用可能なパーツ • State • LayoutやModuleの特定の状態（接頭語：is-） • jsも使いますよー • Theme • ブログのテーマ的な
- 23.
- 24.
- 25.BEMの基本 • Block：ページを構成する独立パーツ • Element ：Black内の一部として役割を果たすも の • Modifire ：BlockやElementの状態・属性
- 26.
- 27.
- 28.
- 29.