CSS設計(SMACSS/BEMなど)まとめ

はじめに

最近、ポートフォリオ制作におけるCSS設計の重要性を感じます。

CSSはProgateなどでざっくり学びましたが、設計に関しては学習したことがなかったので学んでみました。

そのまとめです。

6/23 追記

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

上記を購入したので改めて編集しました。

✅その他参考

CSS設計の教科書

筆者の設計手法FLOCCS

CSS設計の基本

構造化はFLOCSS、命名規則はBEM。marginはbottomのみで統一。

font-sizeやline-heightはem、widthは％、border-radiusなどはpx。

Atomic Design を分かったつもりになる

パーツ・コンポーネント単位で定義していく UI デザイン手法

ATOMS(原子)→MOLECULES(分子)→ORGANISMS(生体)→TEMPLATES(テンプレート)→PAGES(ページ)

CSSの基本

✅基本

CSSはグローバルスコープしか持たない。

→規模がでかくなると相互に干渉する可能性が高くなり、管理しきれなくなる。※動的なサイトであればあるほど！

セレクタの種類(※抜粋メモ)

div p // 子孫セレクタ
div > p // 子セレクタ(子孫では適用されない)
div + p // 隣接兄弟セレクタ
div ~ p // 一般兄弟セレクタ

CSSは重要度・詳細度・順序に従って適用される。

✅リセットCSS

デフォルト：Chromeはゴシック体、Safariは明朝体

参考：2020年版！おすすめのリセットCSSまとめ

とりあえず試してみる

※CSS設計完全ガイド　～詳細解説＋実践的モジュール集　を参考。

✅ポイント

①特性に応じてCSSを分類する。

ベースグループ：サイト全体に適用されるべきスタイル
レイアウトグループ：ヘッダーやフッターなどレイアウトに関するスタイル
モジュールグループ：サイト内で使いまわしたいモジュールに関するスタイル

※モジュールには、floatやwidthを指定しないことで親要素100%になる。

// font指定はbody要素に
body {
font-family: sans-serif;
}

②接頭辞を付けて、役割を一目で分かるようにする。

// レイアウトグループはly_の接頭辞を
.ly_cont{
max-width: 90%;
}

🙄これは確かにわかりやすいですね！！

③HTMLと疎結合である(依存しない)。

header .title {
  color: rgb(0, 174, 255);
}

上記の感じでh1など、HTMLの要素名をなるべくセレクターとして使用しない。(要素の変更に対処できる)

④スコープを絞る

ここでid要素に下手に依存しないこと。
よくある使いまわす系モジュールでid+数字的なセレクタに適用できなくなる。

セレクターはクラスセレクターを使用する。

⑤命名規則

クラス名から影響範囲、役割が想像できるようにする

pug

body.ly_cont
  header
    h1.title #{ttl}
    div
      span header,divで子孫セレクタspan要素です
    span headerのspan要素です
  main
    article.article_main
      span mainのspan要素です
    article.article_main
      span mainのspan要素です

css

body {
  background-color: rgba(255, 195, 104, 0.313);
  margin: 0 auto;
  font-family: sans-serif;
}

.ly_cont{
  max-width: 90%;
}

header .title {
  color: rgb(0, 174, 255);
}

header > span {
  color: rgb(0, 174, 255);
}

.article_main{
  background-color:rgba(255, 195, 104, 0.789);
  margin-bottom: 10px;
}

🙄spanタグの適用範囲を絞ることができました◎

⑥拡張しやすい

継続的に運用していく中での変更のしやすさや拡張性が大事。

シングルクラス設計ではSassのMixinやExtendを用いると効率もUP。

※マルチクラス設計が主流。HTML上に記載するクラスは多くなるがCSSはスッキリできる。

設計概念

※両冊子を参考。

CSSがグローバルで適用されることは変わりないが、以下のルールに従うことで拡張性の高いCSSを書くことが可能。

✅OOCSS(Object Oriented CSS)

全ての設計の基準となる概念。

オブジェクト指向CSS。コンポーネント設計をしやすくする。

ポイント

・構造(ストラクチャー)と見た目(スキン)の分離

→基本は構造で考える。見た目(色など)が変わるだけなら構造の再利用性◎

・コンテナ(エリア)とコンテンツを分離

→場所に依存しないセレクタを書くことで再利用性◎

✅SMACSS(スマックス)

OOCSSのコンセプトを元に作られたガイドライン。

OOCSSで定められている範囲はおおよそモジュールに該当。さらに幅広く扱った概念。

パターンを抽出しやすいように5つのカテゴリに分類する。

①Base

ベースルールとなる標準のスタイルを定義

②Layout

ヘッダー、メイン、サイドバー、フッターなど大枠を構成するモジュールのルール。「l-」という接頭辞を付けること推奨。

③Module

レイアウトモジュール内に配置されることを想定した見出しやボタン、カードなど。

クラスをなるべく付けてセマンティック(意味を明示)にする。
※divやspanのセマンティック性のないものにはマストクラス付与！！

拡張性を考えて、サブクラスも要検討。

④State

特性に応じてクラス命名規則を設ける。

ステートルールの状態スタイルのクラス名は全て「is-」の接頭辞が付く。

→例えばJSからのクラス付与の場合など。

⑤Theme

サイト内のレイアウトや色、テキスト処理など上書きするモノ。

規模がでかくなる際は「theme-」の接頭辞を付けること推奨。

✅BEM（ベム/Block Element Modifier）

他の設計手法に比べて厳格・強力なため、OOCSSに匹敵するほど知られ、利用されている。

①Block

Elementで構成されるどこでも使いまわせるパーツ。

クラス名から見た目ではなく、何であるか、何のためにあるかを表すよう命名。

✖ class=”red-text”
〇 class=”error”

②Element

Blockを構成し、Blockの外では独立して使用できないもの。

Blockの名前を継承しアンダースコアふたつを記述した後にelementの名前を付ける。

〇 class=”menu__item”
〇 class=”global-nav__link-item”

③Modifier

BlockもしくはElementの見た目や状態、ふるまいを定義するもの。

オプションという位置づけのため、必ずBlockかElementのクラス名がある状態でクラス名を付ける。

〇 class=”menu__item menu__item_actived”

※CSSの教科書では、Modifierはハイフン–2つで説明されている。(非公式MindBEMdingというModifierのキーは省略可能といった命名規則を参考にしている。)

※ModifierはElementのバージョン違いの要素を指す。

✅MCSS(Multilayer CSS)

OOCSSとBEMのコンセプトを基に作られている。

SMACSSはカテゴリでパターンを抽出に対して、

MCSSはレイヤー間の依存関係を明確にしてコンポーネント化する手法。

• Foundation(SMACSSでいうBaseカテゴリ)
• Base(SMACSSでいうModuleカテゴリ)
• Project
• Cosmetic

✅FLOCSS(フロックス/Foundation Layout Object CSS)

OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。

おわりに

CSS設計に関して学習するのは初めてだったので、SMACSS、BEMあたりの思想はとても参考になった。

どの設計思想をベースにしているか明示することで、後々の改修が楽になるし、他人でもメンテナンスしやすくなる。

また、Sassを使うことでコンポーネント化の際グローバルな適用を制限することができるので、今後学習していきたいと思った。

とはいえ、Vue.jsで既にスコープ化されたコンポーネントも作れることも知っているので、うまく併用していく必要性も感じた。

※レスポンシブが今は当たり前だからBootstrap然りCSSのFWも活用して効率化図りたい。使わないと肥大化して大変だろうなと改めて痛感。

※BEM記法に関しては以下でも扱っているのでこのチュートリアルで深堀しても良いかも。

【感想】【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう！を終えて

備忘録

CSS設計

※以下はCSS設計の教科書をベースにまとめたものです。

✅ゴール

①予測しやすい

期待通り(思った通り)に振舞うか

②再利用しやすい

肥大化しないようにする

③保守しやすい

既存のルールとの依存が少ない

④拡張しやすい

メンテナンス、管理しやすい

✅設計で意識すべきこと

修正しやすいCSSを書く

HTMLへの依存を避ける

article h1{}　// これだとarticleタグがdivタグに変更された際処理されなくなる

コード量は少なく

スタイルは追加していく。定義したルールを取り消す書き方だと冗長化するケースが多い。

絶対値を多用しない

相対値を利用することで、変更時の修正箇所が最小化する。

✅避けたい記述方法

!important

セレクタの内容がより具体的・詳細であるほど、そのルールが優先される。

!importantは最も優先度の高い記述。

インライン記述

HTMLのstyle属性によるスタイル記述。(ID記述より詳細度が高い)

外部ファイルCSSで管理するのが望ましい。

IDセレクタ

詳細度が高くなるので、親要素に付けると子要素で打ち消すための記述が必要になる。

※CSSにおけるIDセレクタ。HTML、JSにおけるid属性はフックとして使いやすい。

※IDセレクタで記述しても、持っていないプロパティが詳細度の低いクラスに存在する場合それも適用されてしまう。

単純な要素セレクタ

単純な要素セレクタはHTML構造への依存が強くなる。

✅効率の良い書き方

・セレクタは短く(不要な要素セレクタは書かない)

依存を減らすことができる。

・セレクタの限定化

＞を使って直下の要素のみを対象とさせる。

✅その他参考