![Base Rule
サイト全体で要素そのもののデフォルトスタイルを定義
要素そのものの定義という性質のため、IDやクラスは使わない。
CSSリセットもベースに含む
要素セレクタ( body , a )
属性セレクタ( input[type=text] )
擬似クラスセレクタ( a:hover )
※要素セレクタに対しては具体的なスタイル指定をしない。(上書きが発生しないように)](https://image.slidesharecdn.com/2017acssdesignodyssey-171021140204/85/2017-A-CSS-Design-Odyssey-44-320.jpg)
![詳細度の序列
小
全称セレクタ (*)
タイプセレクタ (要素名)
クラスセレクタ
属性セレクタ ([type="text"], [href="#"])
擬似クラス (:after, :nth-child)
ID セレクタ
インラインスタイル
大](https://image.slidesharecdn.com/2017acssdesignodyssey-171021140204/85/2017-A-CSS-Design-Odyssey-57-320.jpg)
![Layout
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーや
フッターといったプロジェクト共通のコンテナーブロックのスタイルを
定義します。
基本的には、ページ単位で唯一の存在である要素となるため、Layout
レイヤーの要素ではIDセレクタを採用することも可能です。
ただしIDセレクタは高い詳細度を持つため、それを懸念する場合に
は、 l-* プレフィックスをつけた命名を採用するか、あるいは
[id="header"] のような属性セレクタを用いることを推奨します。](https://image.slidesharecdn.com/2017acssdesignodyssey-171021140204/85/2017-A-CSS-Design-Odyssey-66-320.jpg)
2017: A CSS Design Odyssey
- 1. 2017: A CSS Design Odyssey KenjiroKubota
- 4. A Long Past
- 5. html <a id="btn-main">メイン</a> <a id="btn-sub">サブ</a> css #btn-main { width: 100px; height: 40px; background-color: red; } #btn-sub { width: 100px; height: 40px; background-color: blue; }
- 9. OOCSS 2009 - 米Yahoo!のNicole Sullivanが提唱 オブジェクト指向の考え方を参考にした設計方法 Twitter 叠辞辞迟蝉迟谤补辫が採用している设计
- 10. CSS is too fragile Nicole Sullivan
- 11. プロパティ より セレクタ .selector { ... }
- 13. html <a class="btn btn-red">メイン</a> <a class="btn btn-blue">サブ</a> css .btn { width: 100px; height: 40px; } .btn-red { background-color: red; } .btn-blue { background-color: blue; }
- 15. Past ━
- 16. OOCSS
- 18. BEM Block Element Modi er
- 19. BEM 2012~13 - Yandexのフロントエンジニアが提唱 長期間メンテナンスできる設計で尚且つファーストバージョンの開 発を素早く行える チームのスケーラビリティ コードの再利用性が高い
- 20. Block - 要素のルート Element - Blockの子要素。単体では存在しない Modi er - 元となるBlock,Elementから変化した 状態を表す要素
- 23. MindBEMding
- 25. html <ul class="main-tab"> <li class="main-tab__button"> <a href="">Tab1</a> </li> <li class="main-tab__button"> <a href="">Tab2</a> </li> <li class="main-tab__button main-tab__button--active"> <a href="">Tab3</a> </li> <li class="main-tab__button"> <a href="">Tab4</a> </li> </ul>
- 27. scss .main-tab { ... &__button { ... &--active { ... } } } Block単位でファイル分割するのが通例（main-tab.scss）
- 30. BEM
- 33. レイヤーで分割
- 34. Layer 0. Foundation 1. Base 2. Project 3. Cosmetic
- 40. Layer(再掲) 0. Foundation (reset, normalize) 1. Base (OOCSS) 2. Project (BEM) 3. Cosmetic (OOCSS) OOCSSとBEMの要素を取り入れ、階層の概念を持っている
- 41. SMACSS Scalable and Modular Architecture for CSS
- 43. CSSのカテゴライズ Base - 要素そのもののデフォルトスタイル Layout - ページをエリアごとに分割 Module - 再利用可能なパーツ State - レイアウトやモジュールの特定の状態を示す Theme - サイトのルック＆フィールを定義
- 44. Base Rule サイト全体で要素そのもののデフォルトスタイルを定義 要素そのものの定義という性質のため、IDやクラスは使わない。 CSSリセットもベースに含む 要素セレクタ( body , a ) 属性セレクタ( input[type=text] ) 擬似クラスセレクタ( a:hover ) ※要素セレクタに対しては具体的なスタイル指定をしない。(上書きが発生しないように)
- 45. Layout Rule ページのエリア分けを行う。 .l- , .layout- プレフィックスを付ける。 IDはCSSの詳細度を高めてしまうのでなるべく避ける（SMACSSでは禁 止はしていない） ※詳細度は後ほど説明します
- 46. 子孫セレクタを使って分岐 .l-main { width: 70%; } .l-fixed .l-main { width: 600px; } .l-fixed が付いている場合はpx指定、そうでなければ%指定
- 48. モジュールの命名規則 親モジュールの名前をプレフィックスでつける <div class="item"> <p class="item-text"></p> </div> IDや要素セレクタは避けて、クラスで統一する モジュール全部にクラスを付ける必要はない。 li , a ... クラスとつけなくても良い (モジュール内で何度も登場する要素にはクラスをつける)
- 50. Theme Rule すべての主要なルールに対して影響を与える。 main.css .mod { border: 1px solid; } theme.css .mod { border-color: blue; }
- 51. 規模によっては上書きではなくテーマ特有のクラスを設定するほうが良 いかもしれない。 そういう場合は .theme- プレフィックスを使う。 .theme-border { border-color: purple; } .theme-background { background: linear-gradient( ... ); }
- 52. 惭颁厂厂より、より実践的な印象
- 53. 闲话休题
- 57. 詳細度の序列 小 全称セレクタ (*) タイプセレクタ (要素名) クラスセレクタ 属性セレクタ ([type="text"], [href="#"]) 擬似クラス (:after, :nth-child) ID セレクタ インラインスタイル 大
- 58. !important の例外 詳細度とは無関係に上書きを行う :not の例外 否定擬似クラスの :not は詳細度の計算では擬似クラスとは見なされま せん。しかし、否定擬似クラスの中に置かれたセレクタは、通常のセレ クタのように計算されます。
- 59. Question html <p id="hoge"> <span id="fuga" class="piyo1 piyo2 piyo3"> ここは何色？ </span> </p> css #hoge #fuga { color: red; } #hoge .piyo1.piyo2.piyo3 { color: blue; }
- 60. 正解は 赤
- 62. FLOCSS Foundation Layout Object CSS
- 63. FLOCSS 2014 - サイバーエージェントの谷拓樹氏が提唱 「CSS設計の教科書」の著者 OOCSS, SMACSS, BEM, SuitCSSのコンセプトを取り入れ、MCSSの レイヤー構成にも影響を受けている いいとこ取り CSSプリプロセッサ前提
- 66. Layout ページを構成するヘッダーやメインのコンテンツエリア、サイドバーや フッターといったプロジェクト共通のコンテナーブロックのスタイルを 定義します。 基本的には、ページ単位で唯一の存在である要素となるため、Layout レイヤーの要素ではIDセレクタを採用することも可能です。 ただしIDセレクタは高い詳細度を持つため、それを懸念する場合に は、 l-* プレフィックスをつけた命名を採用するか、あるいは [id="header"] のような属性セレクタを用いることを推奨します。
- 69. 命名規則 MindBEMdingを採用。 状態を表すものはSMACSSのStateパターンを用いて .is- プレフィック スを使う。 Objectのプレフィックス Component - .c-* Project - .p-* Utility - .u-*
- 70. ディレクトリ構成 ├── foundation ├── layout └── object ├── component ├── project └── utility
- 72. RSCSS Reasonable System for CSS
- 75. 命名規則 Componentはダッシュで区切られた少なくとも２つの単語からなる Likeボタン .like-button 検索フォーム .search-form ニュースカード .article-card
- 77. 命名規則 それぞれのComponentは通常、複数のElementを持つ。Elementの名前 は1単語にする .search-form { > .field { /* ... */ } > .action { /* ... */ } }
- 80. 命名規則 variantのためのクラス名にはダッシュをプレフィックスとして付ける .like-buttoon { &.-wide { /* ... */ } &.-short { /* ... */ } &.-disabled { /* ... */ } }
- 81. Elementのvariant Elementもまたvariantを持つ頃ができる .shopping-card { > .title { /* ... */ } > .title.-small { /* ... */ } }
- 82. Layouts
- 83. ポジションに関するプロパティは避ける Componentは異なるコンテキストで再利用するべきなので以下のよう なプロパティを書くのは避ける Positioning (position, top, left, right, bottom) Floats ( oat, clear) Margins (margin) Dimensions (width, height) *
- 84. 親要素でポジションを定義する .article-list { & { @include clearfix; } > .article-card { width: 33.3%; float: left; } } .article-card { & { /* ... */ } > .image { /* ... */ } > .title { /* ... */ } > .category { /* ... */ } }
- 85. Helpers ._unmargin { margin: 0 !important; } ._center { text-align: center !important; } ._pull-left { float: left !important; } ._pull-right { float: right !important; } 汎用クラスはアンダースコアで始まる名前で別ファイルに置かれ、値を 上書きする。通常、 !important でタグ付けされる。
- 86. 命名規則 アンダースコアをクラス名のプレフィックスとして付ける。 <div class='order-graphs -slim _unmargin'></div> Heplerの整理 helpers というひとつのファイルに収める。複数ファイルに分割するこ ともできるが、たくさんの helper を最小限に維持するのが好ましい。
- 87. CSS Structure ファイル単体でひとつのComponent Use glob matching @import 'components/*'; 過剰なネストを避ける /* ? Better: 2 levels */ .image-frame { > .description { /* ... */ } > .description > .icon { /* ... */ } }
- 90. ECSS 2015 - bet365.com フロントエンジニア Enduring = 長続きする、永続的な、不屈の、我慢強い、心房強い OOCSSとは真逆のアプローチ
- 93. モジュール namespace - クラス名の衝突を防ぐための接頭辞 Module - 個別の機能領域の最も大きな区分 Component - Moduleに含まれる機能性を持つ部品 ChildNode - Componentに含まれる独立した部品 variant - Module内の部品の別の状態
- 94. 命名規則 ECSSとBEM Module,Component === Block ChildNode === Element variant === Modi re ECSSとAtomicDesign Module === Organisms Component === Molecules
- 96. 名前空間(namespace) クラス名の重複を避けるためECSSでは必ず名前空間を付ける トップページ TopPage .tp- カテゴリートップ CategoryTop .ct- ショッピングカート ShoppingCart .sc-
- 97. サイトに共通する構造的なモジュール Structureから取った .st- の名前空間を付けると良い サイトに共通する汎用的なモジュール SideWideから取った .sw- の名前空間を付けると良い Layout名前空間 レイアウトを管理するモジュールの場合は .layout- 名前空間がオススメ
- 98. ディレクトリ構成(略) └── css ├── font/ ├── base/ │ ├── variable/ │ ├── function/ │ ├── mixin/ │ ├── _normalize.scss │ ├── _base.scss │ └── _Icon.scss ├── SiteWide/ ├── Structure/ ├── namespace/ │ ├── layout/ │ ├── news/ │ ├── product/ │ ├── results/ │ ├── search/ │ └── sitemap/ └── site.scss
- 100. ECSSの十戒 1 すべてのキーセレクタは"Single Source of truth"であること 2 入れ子にしない 3 IDセレクタは使わない 4 ベンダープレフィックスは書かない 5 サイズや色、z-indexに変数を使う 6 モバイルファーストで書く（max-widthを避ける） 7 mixinを控えめにする（extendを避ける） 8 すべてのマジックナンバーとブラウザハックに対してコメントを書く 9 インラインイメージを使わない 10 複雑なCSSを書かない
- 103. thanks;)