Download to read offline
![Base Ruleサイト全体で要素そのもののデフォルトスタイルを定義要素そのものの定義という性質のため、IDやクラスは使わない。CSSリセットもベースに含む要素セレクタ( body , a )属性セレクタ( input[type=text] )擬似クラスセレクタ( a:hover )※要素セレクタに対しては具体的なスタイル指定をしない。(上書きが発生しないように)](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2f2017acssdesignodyssey-171021140204%2f75%2f2017-A-CSS-Design-Odyssey-44-2048.jpg&f=jpg&w=240)
![詳細度の序列小全称セレクタ (*)タイプセレクタ (要素名)クラスセレクタ属性セレクタ ([type="text"], [href="#"])擬似クラス (:after, :nth-child)ID セレクタインラインスタイル大](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2f2017acssdesignodyssey-171021140204%2f75%2f2017-A-CSS-Design-Odyssey-57-2048.jpg&f=jpg&w=240)
![Layoutページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。基本的には、ページ単位で唯一の存在である要素となるため、Layoutレイヤーの要素ではIDセレクタを採用することも可能です。ただしIDセレクタは高い詳細度を持つため、それを懸念する場合には、 l-* プレフィックスをつけた命名を採用するか、あるいは[id="header"] のような属性セレクタを用いることを推奨します。](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2f2017acssdesignodyssey-171021140204%2f75%2f2017-A-CSS-Design-Odyssey-66-2048.jpg&f=jpg&w=240)
KK
Uploaded byKenjiro Kubota
720 views
2017: A CSS Design Odyssey
Introduction of CSS design that became popular by 2017
Recommended
More Related Content
Similar to 2017: A CSS Design Odyssey
More from Kenjiro Kubota
2017: A CSS Design Odyssey
- 1.2017: A CSSDesign OdysseyKenjiroKubota
- 2.
- 3.
- 4.
- 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;}
- 6.
- 7.
- 8.
- 9.OOCSS2009 -米Yahoo!のNicole Sullivanが提唱オブジェクト指向の考え方を参考にした設計方法TwitterBootstrapが採用している設計
- 10.CSS is toofragileNicole Sullivan
- 11.プロパティ より セレクタ.selector{ ... }
- 12.
- 13.html<a class="btn btn-red">メイン</a><aclass="btn btn-blue">サブ</a>css.btn {width: 100px;height: 40px;}.btn-red {background-color: red;}.btn-blue {background-color: blue;}
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.Block - 要素のルートElement- Blockの子要素。単体では存在しないModi er - 元となるBlock,Elementから変化した状態を表す要素
- 23.
- 24.
- 25.html<ul class="main-tab"><li class="main-tab__button"><ahref="">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>
- 26.
- 27.scss.main-tab {...&__button {...&--active{...}}}Block単位でファイル分割するのが通例（main-tab.scss）
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.Layer0. Foundation1. Base2.Project3. Cosmetic
- 36.
- 37.
- 38.
- 39.
- 40.Layer(再掲)0. Foundation (reset,normalize)1. Base (OOCSS)2. Project (BEM)3. Cosmetic (OOCSS)OOCSSとBEMの要素を取り入れ、階層の概念を持っている
- 41.SMACSSScalable and ModularArchitecture for CSS
- 42.
- 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指定、そうでなければ%指定
- 47.
- 48.モジュールの命名規則親モジュールの名前をプレフィックスでつける<div class="item"><p class="item-text"></p></div>IDや要素セレクタは避けて、クラスで統一するモジュール全部にクラスを付ける必要はない。li, a ... クラスとつけなくても良い(モジュール内で何度も登場する要素にはクラスをつける)
- 49.
- 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.
- 54.
- 55.
- 56.
- 57.詳細度の序列小全称セレクタ (*)タイプセレクタ (要素名)クラスセレクタ属性セレクタ([type="text"], [href="#"])擬似クラス (:after, :nth-child)ID セレクタインラインスタイル大
- 58.!important の例外詳細度とは無関係に上書きを行う:not の例外否定擬似クラスの:not は詳細度の計算では擬似クラスとは見なされません。しかし、否定擬似クラスの中に置かれたセレクタは、通常のセレクタのように計算されます。
- 59.Questionhtml<p id="hoge"><span id="fuga"class="piyo1 piyo2 piyo3">ここは何色？</span></p>css#hoge #fuga {color: red;}#hoge .piyo1.piyo2.piyo3 {color: blue;}
- 60.
- 61.
- 62.
- 63.FLOCSS2014 -サイバーエージェントの谷拓樹氏が提唱「CSS設計の教科書」の著者OOCSS, SMACSS,BEM, SuitCSSのコンセプトを取り入れ、MCSSのレイヤー構成にも影響を受けているいいとこ取りCSSプリプロセッサ前提
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.命名規則MindBEMdingを採用。状態を表すものはSMACSSのStateパターンを用いて .is- プレフィックスを使う。ObjectのプレフィックスComponent- .c-*Project - .p-*Utility - .u-*
- 70.ディレクトリ構成├── foundation├── layout└──object├── component├── project└── utility
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.命名規則それぞれのComponentは通常、複数のElementを持つ。Elementの名前は1単語にする.search-form {> .field{ /* ... */ }> .action { /* ... */ }}
- 78.
- 79.
- 80.命名規則variantのためのクラス名にはダッシュをプレフィックスとして付ける.like-buttoon {&.-wide {/* ... */ }&.-short { /* ... */ }&.-disabled { /* ... */ }}
- 81.ElementのvariantElementもまたvariantを持つ頃ができる.shopping-card {> .title{ /* ... */ }> .title.-small { /* ... */ }}
- 82.
- 83.ポジションに関するプロパティは避けるComponentは異なるコンテキストで再利用するべきなので以下のようなプロパティを書くのは避けるPositioning (position, top,left, right, bottom)Floats ( oat, clear)Margins (margin)Dimensions (width, height) *
- 84.親要素でポジションを定義する.article-list {& {@includeclearfix;}> .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ファイル単体でひとつのComponentUse globmatching@import 'components/*';過剰なネストを避ける/* ✓ Better: 2 levels */.image-frame {> .description { /* ... */ }> .description > .icon { /* ... */ }}
- 88.
- 89.
- 90.ECSS2015 -bet365.com フロントエンジニアEnduring= 長続きする、永続的な、不屈の、我慢強い、心房強いOOCSSとは真逆のアプローチ
- 91.
- 92.
- 93.モジュールnamespace - クラス名の衝突を防ぐための接頭辞Module- 個別の機能領域の最も大きな区分Component - Moduleに含まれる機能性を持つ部品ChildNode - Componentに含まれる独立した部品variant - Module内の部品の別の状態
- 94.命名規則ECSSとBEMModule,Component === BlockChildNode=== Elementvariant === Modi reECSSとAtomicDesignModule === OrganismsComponent === Molecules
- 95.
- 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
- 99.
- 100.ECSSの十戒1 すべてのキーセレクタは"Single Sourceof truth"であること2 入れ子にしない3 IDセレクタは使わない4 ベンダープレフィックスは書かない5 サイズや色、z-indexに変数を使う6 モバイルファーストで書く（max-widthを避ける）7 mixinを控えめにする（extendを避ける）8 すべてのマジックナンバーとブラウザハックに対してコメントを書く9 インラインイメージを使わない10 複雑なCSSを書かない
- 101.
- 102.
- 103.