Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

1 963 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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 美味しいお酒を飲むために効率よく仕事したい

×