Help us understand the problem. What is going on with this article?

CSS設計の特徴と技術

More than 1 year has passed since last update.

目的

CSS設計の考え方をまとめていつでも使えるようにしたい。

背景

業務でデザイナーと協力してCSS設計を行うことになった。

前提

HTML&CSSも並行して勉強中。

OOCSS(オブジェクト指向CSS)

特徴

CSSにオブジェクト指向の概念を取り入れたもの。大原則は以下の2点。
1. 構造と見た目を分離
2. コンテナ(入れ物)とコンテンツ(中身)を分離

構造と見た目を分離

コンテナとコンテンツを分離

SMACS

特徴

OOCSSをベー巣に考えられた設計。ページを以下のカテゴリに分類する考え方を採用している。
1. Base
2. Layout
3. Module
4. State
5. Theme

Base

htmlやbodyに適用するような全体の背景やフォントなどを定義する。このカテゴリは基本的に上書きされることはないため、上書きされるような定義はしない。

Layout

IDセレクタで定義されるような大枠(ブロック)や、グリッドレイアウトなどのレイアウトルールを定義する。

Module

ボタン、見出し、リンク、などなどのパーツ。

State

Javascriptの制御によって切り替わる状態。display:noneとかが該当する。

Theme

全体のテーマの切り替え。白背景→黒背景とか。

その他

  • 子供セレクタをなるべく使わないことでHTMLとCSSの依存関係を減らす。
  • コンポーネントを拡張するときは、子供の命名規則には親のコンポーネント名をケバブケースで付与することで名前の汚染を防ぐ。 # BEM ## 特徴 Block,Element,Modifierの略。命名規則に着目したアプローチ。 ## Block ブロック。親。 ## Element Blockと親子関係にあるもの。 block__nameのような名前を付ける。 ## Modifier BlockやElementのバリエーションの違い。 block--modifierelement--modifierのような名前を付ける。 # MCSS ## 特徴 MultilayerCSSの略。OOCSSとBEMを合わせたようなもの。SMACSが5つのカテゴリ分けを行う考え方なのに対し、MCSSは4つのレイヤーを定義している。
  • Foundation
  • Base
  • Project
  • Cosmetics 下位レイヤー(番号が小さい)から上位レイヤー(番号が大きい)は上書きできないが、逆は可能という考え方。 ## Foundation SMACSSでいうところのBase。 ## Base SMACSSでいうところのModule。共通のパーツ。 ## Project Baseよりも具体的な要素。 ## Cosmetics ちょっとしたレイアウトの変更など。 # マルチクラスとシングルクラス ## マルチクラス 上記まで記載したきて各設計手法のような、コンポーネントごとにクラスを作成し、必要に応じて複数のクラスをHTMLに適用していく。 ## シングルクラス Sass等を使って、クラスセレクタ名にはセマンティックな名前をつける。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away