Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,957 views

Published on

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

Published in: Technology
  • Be the first to comment

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

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

×