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

61,188 views

Published on

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

0 Comments
144 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
61,188
On SlideShare
0
From Embeds
0
Number of Embeds
39,240
Actions
Shares
0
Downloads
140
Comments
0
Likes
144
Embeds 0
No embeds

No notes for slide

今必要な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

×