Movatterモバイル変換

目次1. OOCSS2. SMACSS3. BEM4. FLOCSS5. まとめ

OOCSSとは?元・米Yahoo!のデペロッパーだったニコール・サリバンによって提唱された。オブジェクト思考に基づいて、考案された設計思想。Object Oriented CSSの略

使用法構造と見た目、コンテナと内容を分離してclsssを定義し、それらを組み合わせてスタイルを定義する。ID、子孫セレクタは、なるべく使わなず、スタイルはclassで定義して組み合わせる。悪い例.btn-red {width: 300px;height: 100px;Line-height: 100px;color: white;backgronud-color: red;}良い例.btn {width: 300px;height: 100px;Line-height: 100px;}.btn-red {color: white;backgronud-color: red;}

メリット・再利用性とメンテナンスがしやすい・共通化することでコード量が減るデメリット・コードが複雑になる。・共通化によってどこにどのスタイルが当たるのか、CSSの見通しは悪くなることがある。・CSSファイルの切り分けがうまくできていなかったり、どのパーツが共通化されているのかわかるガイドがない場合、新しくプロジェクトに参加するメンバーは初めに時間をかけてコードを読み理解しないといけない。

SMACCSとは?元・米Yahoo!のデペロッパーであり、Yahoo! Mailなどの担当していたジョナサン・スヌークによってOOCSSのコンセプトを元に作られた。Scalable and Modular Architecture for CSSの略

・スタイルをベース、レイアウト、モジュール、ステート、テーマの5つに分割するベース要素そのもののデフォルトスタイル。レイアウトページをエリアごとに分割。layout-, .l- などの接頭辞をつけるモジュール再利用可能なパーツ。モジュールにはmod-, m-などの接頭辞はつけない。状態（ステート）レイアウトやモジュールの特定の状態を示す。ステートにはis- 接頭辞をつける。テーマサイトのルック＆フィールを定義。テーマにはtheme- 接頭辞をつける使用法

├── base（デフォルトスタイル）│ ├── _base.css│ └── _reset.css├── layout(ページを構成するコンテナ)│ ├── _header.css│ ├── _footer.css│ ├── _main.css│ └── _sidebar.css├── module（プロジェクトにて、繰り返されるパターンを定義）│ ├── _button.css│ ├── _form.css│ └── _list.css├── state (要素の状態を管理する。javascriptでの切り替えなどに使用)│ ├── _error.css│ ├── _display.css│ └── _animate.css└── theme（サイト全体のテーマの管理）├── _error.css├── _display.css└── _animate.cssディレクトリ構成はこんな感じ

メリット・再利用性とメンテナンスがしやすい・どのファイルをいじればいいかわかりやすい。デメリット・場所に依存するパーツが多すぎるサイトでは良いところを活かせられない。

BEMとは?ロシアのYandex社によって考案された設計思想です。Block、Element、Modifierの略

使用法要素をBlock、Element、Modifierの３つに分け、命名規則を元にClass名を記述します。「Block-Element__Modifier」のように・BEMではBlockとElementの間を「-」・ElementとModifierの間を「__」で区切って記述する。※「Block_Elemen__Modifier」など全てアンダーバーで区切ってアレンジする人もいる。

BlockBlockはどこでも置くことができ、Blockの中にBlockを含めることも可能です。ただしCSSではBlockは完全に独立し、Blockを別の場所に移動しても、単体で動作可能である必要。Blockが親の名前になるので、重要。

ElementElementは、ブロックの構成要素です。ElementはBlockの構成要素の一つなのでBlockの中に存在する必要がある。必ず頭にBlock名がつくので、重複しないclass名になるのでElement以下の名前はパターンで書くことができる。

Modifier同じElementでも、カレント状態であったり、異なる装飾を設定する場合使用。KeyとValueという名前をつけてわかりやすくすることができる

BEMを使用する上での注意・大枠からBEMで書いていくとElementが多くなりすぎて１つのclassが長くなるので、なるべく使い回せるボタンなどから作成すと使い安い・BEMの重要なことは、ElementかModifierか、といった役割を明確にすることであり、クラス名にアンダースコアを使うかどうかは重要ではない。

メリット・どんなスタイルかわかりやすい。・コードの再利用がしやすい。デメリット・BEMを知らない人と一緒に書くと破綻する・一つのclassが長くなり見づらくなる事もある。

FLOCSSとは?OCSS、SMACSS、BEMを元に日本人の谷拓樹さんが考えた設計思想。Foundation、Layout、Objectの略

FLOCSSの決まり事・fonundion・layout・object・component・project・utilityで分ける。命名規則・BEMを使用接頭字.l- //layout.c- //component.p- //project.u- //utilty

FLOCSSはSassを使った方がいいSassを使っている想定。importする際にCSSの場合@import url('foundation/base.css');@import url('foundation/reset.css');・・・このimport文だとサイトの読み込みに時間がかかってしまう。Sassを使うと実際にページに読み込まれる時にはimportし終わっていて一つにまとめられたCSSファイルが生成することができます。importの書き方は@import "foundation/base";@import "foundation/header";・・・Sassを使う方がメリットがある。

ディレクトリはこんな感じ├── foundation（デフォルトスタイル）│ ├── _base.scss│ └── _reset.scss├── layout(ページを構成するコンテナ)│ ├── _footer.scss│ ├── _header.scss│ ├── _main.scss│ └── _sidebar.scss└── object（プロジェクトにて、繰り返されるパターンを定義）├── component（再利用できる小さいパーツ）│ ├── _button.scss│ ├── _dialog.scss│ ├── _grid.scss│ └── _media.scss├── project（componentより大きいパーツ）│ ├── _articles.scss│ ├── _gallery.scss│ └── _profile.scss└── utility（スタイルの調整とか）├── _clearfix.scss├── _margin.scss├── _position.scss├── _size.scss└── _text.scss

メリット・SMACSS より Object（コンポーネント）の分け方が細かいのでより保守性が高い・SMACSS、BEMなどのいいとこどりデメリットOOCSS、SMACSS、BEMなどの思想がわからないといけない。

１度決めた設計思想は最後までやらないと中身がカオス化する。ただ結局、どんなCSS設計思想だろうがいつか破綻する気がする。。。いかに最小限に留めるかが大事！

Good is good.We provide opportunities to the SEKAI by fusing technology and ideas.テクノロジーとクリエイティブでセカイをより良くするのこと

Movatterモバイル変換

Change Language

CSS設計

Embed presentation

Recommended

More Related Content

More from GIG inc.

CSS設計

Editor's Notes