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アーキテクチャ

69,257 views

Published on

下記勉強会の発表資料です。
---------------------------------------------------------
使いたくなる UI をつくる! フロントエンド 勉強会 : ATND
http://atnd.org/events/42371
---------------------------------------------------------

  • Be the first to comment

今必要なCSSアーキテクチャ

  1. 1. 今必要なCSSアーキテクチャ 株式会社オープンストリーム 木村茉由 1 photo:  h(p://www.flickr.com/photos/22439010@N04/7864852790
  2. 2. アジェンダ •  自己紹介 •  なぜ今CSSアーキテクチャなのか •  OOCSSの紹介 •  SMACSSの紹介 •  OOCSS、SMACSSへの素朴な疑問 •  まとめ 2
  3. 3. 自己紹介 はじめましての方が多いかと思いますので…。 3
  4. 4. 自己紹介 •  株式会社オープンストリーム所属 •  フロントエンドアーキテクト •  好きなものはJavaScriptとおうどんです •  最近翻訳にハマってます(InfoQ) •  主催者側の人間なのに、一番勉強会のテー マからズレててすみません…。 •  Twitter:@kimura_m_29  4
  5. 5. なぜ今CSSアーキテクチャなのか そんな大げさな…と思われた方へ 5
  6. 6. 6 CSSにアーキテクチャとかあるの?
  7. 7. 7 CSSなんてコピペでどうにかなるよね
  8. 8. 8 …
  9. 9. 9 本当にそれで大丈夫?
  10. 10. なぜ今CSSアーキテクチャなのか →そもそも、CSSはカオスになりやすい 10
  11. 11. なぜ今CSSアーキテクチャなのか 1.  すべての定義がグローバル →影響範囲が甚大 ※<style>タグのscoped属性 親要素およびその子孫要素に対してのみ、スタイルを適 用する 2.  HTMLの構造に依存しがち=壊れやすい #main  .news  .topics  ul  li  ul  li  {          color:  black;            font-­‐size:  0.8em;   }   11 HTMLの構造が変わったら   適用されなくなる>< Firefox 21.0〜のみ対応
  12. 12. なぜ今CSSアーキテクチャなのか 3.  スタイル定義の表現が自由すぎる 1.  用途不明のスタイル定義がある 2.  セレクタがえらく長い 4.  スタイルの優先度の決定方法 1.  セレクタの優先度を上げる 1.  詳細にする→HTMLの構造への依存度UP! 2.  最後の切り札『!important』 .blue  {  color:  blue;  }   .main,  .menu  ul  li,  .comments,  .infos,  .sidebar  .component  .?tle  {  …  }   12 どこにも使ってないもの が混ざっていたり…。 ※CSSの優先度について↓ !important だらけの CSS に お別れを | WWW WATCH
  13. 13. なぜ今CSSアーキテクチャなのか そんなCSSですが…。 •  リッチUIな大規模Webアプリケーション •  モバイル向けのHTML/CSS/JavaScript – モバイル向けサイト、アプリ(PhoneGap等) →CSSの運用・保守性、パフォーマンス大事! (モバイルの場合、よりシビア) 13 CSSのファイルサイズ をなるべく小さく!
  14. 14. 14 でも、どうすれば良いのか…! photo:  h(p://www.flickr.com/photos/59489479@N08/9269503551
  15. 15. OOCSSの紹介   オーオーシーエスエスと読みます 15
  16. 16. OOCSSの紹介 •  2009年にNicole Sullivanが提唱したCSSの設計 方法 –  Object Oriented CSS •  目的 より良いCSSを書くことで以下を実現する 1.  再利用しやすく 2.  拡張しやすく 3.  メンテナンスしやすく 4.  ファイルサイズ小さく 5.  パフォーマンス向上 etc... 16 “WE  WANT  A  LOT!”   by  Nicole  Sullivan  
  17. 17. 17 “Components are like legos” Object Oriented CSS http://www.slideshare.net/stubbornella/object-oriented-css photo:  h(p://www.flickr.com/photos/48763139@N00/2432400623
  18. 18. OOCSSの2つの原則 1.  Separate Structure and Skin (構造と見た目の分離) コンポーネントに対するスタイルの種類ごとに、別々の セレクタにスタイルを定義する 1.  レイアウトを定義するスタイル 1.  ポジション、サイズ等 2.  見た目を定義するスタイル 1.  ボーダーやフォントカラー等 1.  バリエーションが増えやすい 18
  19. 19. OOCSSの2つの原則:具体例1           19 .widget-­‐basic  {          width:  15em;          height:  15em;          background-­‐color:  white;          color:  black;   }   .widget-­‐primary  {          width:  15em;          height:  15em;          background-­‐color:  blue;          color:  white;   }   CSS   .widget  {          width:  15em;          height:  15em;   }   .basic  {          background-­‐color:  white;          color:  black;   }   .primary  {          background-­‐color:  blue;          color:  white;   }   CSS   <div  class=“widget-­‐basic”></div>   <div  class=“widget-­‐primary”></div>   HTML   <div  class=“widget  basic”></div>   <div  class=“widget  primary”></div>   HTML   レイアウト 見た目 パターンが増えたら…?
  20. 20. OOCSSの2つの原則 2.  Separate Container and Content (コンテナとコンテンツの分離) ページを構成する主要なコンテナと、その子要素で あるコンテンツとの間に依存関係を持たせない 20
  21. 21. OOCSSの2つの原則:具体例2           21 .menu  {          (共通スタイル)   }   .sub-­‐menu  {          (拡張スタイル)   }   CSS   .main  ul,  .sub  ul  {          (共通スタイル)   }   .sub  ul  {          (拡張スタイル)   }   CSS   <div  class=“main”>          <ul>...</ul>   </div>   <div  class=“sub”>          <ul>...</ul>   </div>   HTML   <div  class=“main”>          <ul  class=“menu”>...</ul>   </div>   <div  class=“sub”>          <ul  class=“menu  sub-­‐menu”>                  ...          </ul>   </div>   HTML   適用したい要素が 増えたら…? マルチクラスパターン
  22. 22. OOCSSのその他のプラクティス •  Avoid singletons(IDセレクタの利用を避ける) – id属性値は同一ページ内でユニークでなくてはな らないため、再利用できない – セレクタの優先順位が高いため、もしもの時のス タイル上書きは『!important』を使うしかない 22 #widget  {  …  }   #footer  a  {  …  }  
  23. 23. SMACSSの紹介   スマックスと読みます 23
  24. 24. SMACSSの紹介 •  2012年にWebデザイナーのJonathan  Snook が提唱したCSSの設計方法 – Scalable  and  Modular  Architecture  for  CSS   – Ebook(日本語版)   •  OOCSSの流れをくんでいる   24
  25. 25. SMACSSの5つのカテゴリ SMACSSでは、CSSのスタイル定義を下記のカテゴリに分 類して行うことを推奨している     1.  ベース   2.  レイアウト   3.  モジュール   4.  状態(ステート)   5.  テーマ     それぞれを別ファイルに分けて管理する   →スタイル定義の複雑さをなくす 25
  26. 26. 1. ベース 26
  27. 27. 1. ベース •  その名の通り、ベースとなるスタイルを定義   •  基本的に要素セレクタを用い、クラスやIDセ レクタは使わない   •  ブラウザのデフォルトスタイルをクリアするリ セットCSSはここで定義する 27 html,  body  {          margin:  0;          padding:  0;   }   a:hover  {          color:  #039;   }  
  28. 28. 2. レイアウト 28
  29. 29. 2. レイアウト •  主要なコンポーネント(ページヘッダやサイド メニュー、メイン記事等)のスタイルを定義   •  伝統的にIDセレクタが使われることが多い   •  主要コンポーネント間で共通化できるスタイ ルはクラスセレクタを用いる   29 #header,  #ar?cle,  #footer  {          width:  960px;          margin:  auto;   }  
  30. 30. 3. モジュール 30
  31. 31. 3. モジュール •  主要なコンポーネントに含まれる、小さなコ ンポーネント(入力フォームやモーダル等) のスタイルを定義   •  モジュールはそれ単体でスタイルが独立し ていて、配置場所が変わってもスタイルが崩 れないようにする   •  クラスセレクタを使用する(再利用が前提)   31 .module  >  h2  {          padding:  5px;   }  
  32. 32. 3. モジュールカテゴリのプラクティス •  要素セレクタを避ける   32 /*  フォルダーモジュール  */   .fld  li  {          padding-­‐le_:  20px;          background:  url(folder.png);   }   CSS   <div  class=“fld”>          <ul>                  <li>Aフォルダ</li>                  <li>bbb.txt</li>   ←  NEW!          </ul>   </div>   HTML   <div  class=“fld”>          <ul>                  <li  class=“fld-­‐name”>Aフォルダ</li>                  <li  class=“fld-­‐item”>bbb.txt</li>          </ul>   </div>   HTML   ファイル名の横にも   フォルダアイコンが…! /*  フォルダーモジュール  */   .fld-­‐name  {          background:  url(folder.png);   }   CSS  
  33. 33. 4. 状態(ステート) 33
  34. 34. 4. 状態(ステート) •  活性・非活性、表示・非表示、成功・失敗など の状態をあらわすスタイルを定義     •  主にJavaScriptのコードから主要コンポーネン トやモジュールに付与する   34 .is-­‐ac?ve  {        font-­‐weight:  bold  !important;   }   $(‘.tab’).on(‘click’,  func?on  ()  {          //  クリックされたタブに活性化スタイルを付与          $(this).addClass(‘is-­‐ac?ve’);   });   ※他のタブの活性化スタイル除 去は割愛 既存スタイルを上書きすることが多い ので、『!important』解禁!   (※ご利用は計画的に)
  35. 35. 5. テーマ 35
  36. 36. 5. テーマ •  テーマ切り替え用のスタイルを定義   •  あまり活躍する場面はないかも…。   36 /*  theme-­‐purple.cssで定義  */   .theme-­‐border  {          border-­‐color:  purple;   }  
  37. 37. OOCSS、SMACSSへの素朴な疑問 私はこういうところに引っかかりました 37
  38. 38. class属性値の数が多くなりそう>< •  はい、多くなります!   – HTMLをシンプルに保つ=CSSが頑張る   •  CSSの頑張りは、HTMLの構造への依存を高めてしまう   •  HTMLの構造変更に影響を受けやすくなる   38 <div  id=“snsArea”>          <bufon>                  Twiferでつぶやく          </bufon>   </div>   HTML   <div  id=“snsArea”>          <bufon  class=“btn  btn-­‐sns”>                  Twiferでつぶやく          </bufon>   </div>   HTML  
  39. 39. classが全然セマンティックじゃない気が…? •  はい、その通りです!   – そもそも、セマンティックである必要があるのか   •  たしかに、HTML5の仕様に書いてあるけど…。   –  CSSの運用・保守性を犠牲にしてまで、守るべきものかどうか   •  Microformats(class属性)→Microdata(独自属性) 39 <bufon  class=“twiferBufon”>          Twiferでつぶやく   </bufon>   HTML   <bufon  class=“btn  btn-­‐sns”>          Twiferでつぶやく   </bufon>   HTML  
  40. 40. DOM操作のパフォーマンス向上を考えると、 やっぱりid属性使いたいよ…! •  はい、仰るとおりです!   – id属性はJavaScriptが参照するものとして使う   – JavaScript用のid、classはプリフィックスに「js-­‐」を 付ける   •  用途が明確になる   •  HTMLから未使用のclass属性値を消しやすくなるかも   40 <bufon  class=“btn  btn-­‐sns”  id=“js-­‐twiferBufon”  >          Twiferでつぶやく   </bufon>   HTML  
  41. 41. まとめ   長々お付き合いありがとうございました! 41
  42. 42. まとめ •  やっぱり、銀の弾丸はありません><   – 引き出しを多く持っておき、状況に応じて適用す るというアプローチになる   – バランス感覚も重要   •  CSSもコードレビューが必要ですね…。   – CSSLintの採用も良さそう   •  OOCSSのNicole Sullivanが関わっています   •  今【だけじゃなく、むしろ未来にとって】必要な CSSアーキテクチャ 42
  43. 43. ご清聴ありがとうございました! 43

×