今必要なCSSアーキテクチャ
142 likes76,059 views
下記勉強会の発表資料です。 --------------------------------------------------------- 使いたくなる UI をつくる！ フロントエンド 勉強会 : ATND http://atnd.org/events/42371 ---------------------------------------------------------
今必要なCSSアーキテクチャ
- 2. アジェンダ • 自己紹介 • なぜ今CSSアーキテクチャなのか • OOCSSの紹介 • SMACSSの紹介 • OOCSS、SMACSSへの素朴な疑問 • まとめ 2
- 4. 自己紹介 • 株式会社オープンストリーム所属 • フロントエンドアーキテクト • 好きなものはJavaScriptとおうどんです • 最近翻訳にハマってます（InfoQ） • 主催者側の人間なのに、一番勉強会のテー マからズレててすみません…。 • Twitter：@kimura_m_29 4
- 8. 8 …
- 9. 9 本当にそれで大丈夫？
- 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. なぜ今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
- 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 “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. OOCSSの2つの原則 1. Separate Structure and Skin （構造と見た目の分離） コンポーネントに対するスタイルの種類ごとに、別々の セレクタにスタイルを定義する 1. レイアウトを定義するスタイル 1. ポジション、サイズ等 2. 見た目を定義するスタイル 1. ボーダーやフォントカラー等 1. バリエーションが増えやすい 18
- 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. OOCSSの2つの原則 2. Separate Container and Content （コンテナとコンテンツの分離） ページを構成する主要なコンテナと、その子要素で あるコンテンツとの間に依存関係を持たせない 20
- 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. OOCSSのその他のプラクティス • Avoid singletons（IDセレクタの利用を避ける） – id属性値は同一ページ内でユニークでなくてはな らないため、再利用できない – セレクタの優先順位が高いため、もしもの時のス タイル上書きは『!important』を使うしかない 22 #widget { … } #footer a { … }
- 24. SMACSSの紹介 • 2012年にWebデザイナーのJonathan Snook が提唱したCSSの設計方法 – Scalable and Modular Architecture for CSS – Ebook（日本語版） • OOCSSの流れをくんでいる 24
- 25. SMACSSの5つのカテゴリ SMACSSでは、CSSのスタイル定義を下記のカテゴリに分 類して行うことを推奨している 1. ベース 2. レイアウト 3. モジュール 4. 状態（ステート） 5. テーマ それぞれを別ファイルに分けて管理する →スタイル定義の複雑さをなくす 25
- 26. 1. ベース 26
- 27. 1. ベース • その名の通り、ベースとなるスタイルを定義 • 基本的に要素セレクタを用い、クラスやIDセ レクタは使わない • ブラウザのデフォルトスタイルをクリアするリ セットCSSはここで定義する 27 html, body { margin: 0; padding: 0; } a:hover { color: #039; }
- 28. 2. レイアウト 28
- 29. 2. レイアウト • 主要なコンポーネント（ページヘッダやサイド メニュー、メイン記事等）のスタイルを定義 • 伝統的にIDセレクタが使われることが多い • 主要コンポーネント間で共通化できるスタイ ルはクラスセレクタを用いる 29 #header, #ar?cle, #footer { width: 960px; margin: auto; }
- 30. 3. モジュール 30
- 31. 3. モジュール • 主要なコンポーネントに含まれる、小さなコ ンポーネント（入力フォームやモーダル等） のスタイルを定義 • モジュールはそれ単体でスタイルが独立し ていて、配置場所が変わってもスタイルが崩 れないようにする • クラスセレクタを使用する（再利用が前提） 31 .module > h2 { padding: 5px; }
- 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. 4. 状態（ステート） 33
- 34. 4. 状態（ステート） • 活性・非活性、表示・非表示、成功・失敗など の状態をあらわすスタイルを定義 • 主にJavaScriptのコードから主要コンポーネン トやモジュールに付与する 34 .is-‐ac?ve { font-‐weight: bold !important; } $(‘.tab’).on(‘click’, func?on () { // クリックされたタブに活性化スタイルを付与 $(this).addClass(‘is-‐ac?ve’); }); ※他のタブの活性化スタイル除 去は割愛 既存スタイルを上書きすることが多い ので、『!important』解禁！ （※ご利用は計画的に）
- 35. 5. テーマ 35
- 36. 5. テーマ • テーマ切り替え用のスタイルを定義 • あまり活躍する場面はないかも…。 36 /* theme-‐purple.cssで定義 */ .theme-‐border { border-‐color: purple; }
- 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. classが全然セマンティックじゃない気が…？ • はい、その通りです！ – そもそも、セマンティックである必要があるのか • たしかに、HTML5の仕様に書いてあるけど…。 – CSSの運用・保守性を犠牲にしてまで、守るべきものかどうか • Microformats（class属性）→Microdata（独自属性） 39 <bufon class=“twiferBufon”> Twiferでつぶやく </bufon> HTML <bufon class=“btn btn-‐sns”> Twiferでつぶやく </bufon> HTML
- 40. DOM操作のパフォーマンス向上を考えると、 やっぱりid属性使いたいよ…！ • はい、仰るとおりです！ – id属性はJavaScriptが参照するものとして使う – JavaScript用のid、classはプリフィックスに「js-‐」を 付ける • 用途が明確になる • HTMLから未使用のclass属性値を消しやすくなるかも 40 <bufon class=“btn btn-‐sns” id=“js-‐twiferBufon” > Twiferでつぶやく </bufon> HTML
- 42. まとめ • やっぱり、銀の弾丸はありません＞＜ – 引き出しを多く持っておき、状況に応じて適用す るというアプローチになる – バランス感覚も重要 • CSSもコードレビューが必要ですね…。 – CSSLintの採用も良さそう • OOCSSのNicole Sullivanが関わっています • 今【だけじゃなく、むしろ未来にとって】必要な CSSアーキテクチャ 42