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.

CSSにもオブジェクト指向を - OOCSSことはじめ

4,883 views

Published on

変更に強いフロントエンドをつくるにはどうすれば良いか?
従来のCSSの問題点を簡単な事例とともに、「オブジェクト指向CSS(OOCSS)」の導入例を紹介。
また、OOCSSをサポートする考え方やツールも簡単に紹介する。

Published in: Technology
  • Be the first to comment

CSSにもオブジェクト指向を - OOCSSことはじめ

  1. 1. Twitter: @irration Blog: http://kinokoru.jp/
  2. 2. こういうクラスが仕様変更を重ねてCSSの随所で誕生。 .messagebox_bold { border-width: 2px; font-weight: bold; } .another_box_round { border-width: 5px; } .other_box_round_bold { border-radius: 5px; border-width: 2px; font-weight: bold; }
  3. 3. ケース1: 「あ、サイトの随所にあるボックスの線の太さ なんだけど、やっぱ3pxにしてくんない?」 .messagebox_bold { border-width: 2px; font-weight: bold; } .another_box_round { border-radius: 5px; } . other_box_bold { border-radius: 5px; border-width: 2px; font-weight: bold; }
  4. 4. えっと…このクラスとこのクラスか… .messagebox_bold { border-width: 2px; font-weight: bold; } .another_box_round { border-radius: 5px; } . other_box_bold { border-radius: 5px; border-width: 2px; font-weight: bold; }
  5. 5. ケース2:「随所にあるボックスの枠線の角なんだけど、丸 みを3pxにしてほしいのね」 .messagebox_bold { border-width: 2px; font-weight: bold; } .another_box_round { border-radius: 5px; } . other_box_bold { border-radius: 5px; border-width: 2px; font-weight: bold; }
  6. 6. 今度はこことここか… .messagebox_bold { border-width: 2px; font-weight: bold; } .another_box_round { border-radius: 5px; } . other_box_bold { border-radius: 5px; border-width: 2px; font-weight: bold; }
  7. 7. でも今度はこうなって、 結局修正箇所が多いのは変わらないんじゃないの? .messagebox.bold { border-width: 2px; } .another_box.bold { border-width: 2px; } . other_box.bold { border-width: 2px; }
  8. 8. ざっくり言うと 前述のOOCSS記法に対して さらに「モジュール化」という 概念を加えたもの
  9. 9. モジュールごとの管理で どこを修正すれば何が変わるのかわかりやすくなる。 ./layout/header.css ./layout/navigationarea.css ./layout/content.css ./layout/three_column.css : ./mod/messagebox.css ./mod/form.css ./mod/navigationlist.css : ./main.css
  10. 10. SMACSSの詳細 日本語・電子書籍版(有料$15) https://smacss.com/ja 英語・Web版(無料) http://smacss.com/
  11. 11. モジュール化で修正は楽になるけど 一々mainファイルに統合するの 面倒だよ!
  12. 12. Grunt ? とにかく色んなものが 自動化できるよ! (例) JS の uglify, 複数ファイルの 結合, ファイル変更の監視, …
  13. 13. おまけ
  14. 14. SaSS(SCSS) + Compass CSSで変数使ったり、 ネストできたり、 OOCSSと親和性が高い。 Gruntでコンパイルの自動化可能。
  15. 15. 例えば・・・ CSS SaSS(SCSS) .box{ .box{ /* box スタイルの記述 */ } /* box スタイルの記述 */ .inner { /* .box .inner スタイルの記述 */ .box .inner { /* .box .inner スタイルの記述 */ } .deeper { /* .box .inner .deeper スタイルの記述*/ } .box .inner .deeper { /* .box .inner .deeper スタイルの記述 */ } } &.green { /* .box.green スタイルの記述 */ } box.green { /* .box.green スタイルの記述 */ } }
  16. 16. 例えば・・・ SaSS(SCSS) CSS .header_inner { width: 960px; } .nav { width: 960px; } .footer_inner { width: 960px; } : : $content_width: 960px; .header_inner { width: $content_width; } .nav { width: $content_width; } .footer_inner { width: $content_width; } : :
  17. 17. 修正が楽になる! 修正漏れが減る!
  18. 18. というわけで…
  19. 19. OOCSSをはじめると 良いことあるかも。
  20. 20. ありがとうございました

×