Downloaded 145 times
Uploaded byMayu Kimura
76,066 views
今必要なCSSアーキテクチャ
下記勉強会の発表資料です。---------------------------------------------------------使いたくなる UI をつくる！ フロントエンド 勉強会 : ATNDhttp://atnd.org/events/42371---------------------------------------------------------
Recommended
More Related Content
What's hot
Similar to 今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
- 1.
- 2.アジェンダ• 自己紹介• なぜ今CSSアーキテクチャなのか• OOCSSの紹介• SMACSSの紹介• OOCSS、SMACSSへの素朴な疑問• まとめ2
- 3.
- 4.自己紹介• 株式会社オープンストリーム所属• フロントエンドアーキテクト• 好きなものはJavaScriptとおうどんです• 最近翻訳にハマってます（InfoQ）• 主催者側の人間なのに、一番勉強会のテーマからズレててすみません…。• Twitter：@kimura_m_29 4
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.なぜ今CSSアーキテクチャなのか1. すべての定義がグローバル→影響範囲が甚大※<style>タグのscoped属性親要素およびその子孫要素に対してのみ、スタイルを適用する2. HTMLの構造に依存しがち＝壊れやすい#main .news .topics ul li ul li { color: black; font-‐size: 0.8em; } 11HTMLの構造が変わったら 適用されなくなる＞＜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
- 13.
- 14.
- 15.
- 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 likelegos”Object Oriented CSShttp://www.slideshare.net/stubbornella/object-oriented-cssphoto: h(p://www.flickr.com/photos/48763139@N00/2432400623
- 18.OOCSSの2つの原則1. Separate Structureand 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 Containerand 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.
- 23.
- 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.
- 27.1. ベース• その名の通り、ベースとなるスタイルを定義 • 基本的に要素セレクタを用い、クラスやIDセレクタは使わない • ブラウザのデフォルトスタイルをクリアするリセットCSSはここで定義する27html, body { margin: 0; padding: 0; } a:hover { color: #039; }
- 28.
- 29.2. レイアウト• 主要なコンポーネント（ページヘッダやサイドメニュー、メイン記事等）のスタイルを定義 • 伝統的にIDセレクタが使われることが多い • 主要コンポーネント間で共通化できるスタイルはクラスセレクタを用いる 29#header, #ar?cle, #footer { width: 960px; margin: auto; }
- 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.
- 34.4. 状態（ステート）• 活性・非活性、表示・非表示、成功・失敗などの状態をあらわすスタイルを定義 • 主にJavaScriptのコードから主要コンポーネントやモジュールに付与する 34.is-‐ac?ve { font-‐weight: bold !important; } $(‘.tab’).on(‘click’, func?on () { // クリックされたタブに活性化スタイルを付与 $(this).addClass(‘is-‐ac?ve’); }); ※他のタブの活性化スタイル除去は割愛既存スタイルを上書きすることが多いので、『!important』解禁！ （※ご利用は計画的に）
- 35.
- 36.5. テーマ• テーマ切り替え用のスタイルを定義 • あまり活躍する場面はないかも…。 36/* theme-‐purple.cssで定義 */ .theme-‐border { border-‐color: purple; }
- 37.
- 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
- 41.
- 42.まとめ• やっぱり、銀の弾丸はありません＞＜ – 引き出しを多く持っておき、状況に応じて適用するというアプローチになる – バランス感覚も重要 • CSSもコードレビューが必要ですね…。 – CSSLintの採用も良さそう • OOCSSのNicole Sullivanが関わっています • 今【だけじゃなく、むしろ未来にとって】必要なCSSアーキテクチャ42
- 43.