css設計

CSS
2022.12.30

cssの設計は保守性高いcssを組み立てる必要があります。

つまり変更を加えたい時に時間をかけずに変更ができるように設計しておくという事です。

以下で紹介するOOCSS、BEM、SMACSS、FLOCSSは、

大規模サイトなどで使われています。

命名規則なども含めて知識として頭に入れておけば、CSSの全体設計を理解しやすくなります。

マルチクラスとシングルクラス

マルチクラスは複数のクラスを使うこと。(OOCSS,SMACSS,FLOCSS)

シングルクラスは一つのクラスで定義します。(BEM)

OOCSS

OOCSSはオブジェクト指向に基づいて設計。代表的なものがBootstrap。

再利用できるように親子を分けて独立して書く。

さらに基本構造と見た目を分けて書きます。

<section class="box">
  　<div class="btn btn-blue">ボタン１</btn>
　　　<div class="btn btn-blue">ボタン１</btn>
</section>
.box {
 padding-left: 200px;
 padding-right: 200px;
}

.btn {
     width: 300px;
     text-align:center;
     margin: 0 auto;
}

.btn-blue {
      background: blue;
}

.btn-red {
       background: red;
}

BEM

  • Block
  • Element(Block内にある要素)
  • Modifier(色や大きさなどの装飾を表す要素)

命名の書き方は以下の通り

Block__Element–Modifier

<section class="box">
  　<div class="box__btn--blue">ボタン１</btn>
　　　<div class="box__btn--red">ボタン１</btn>
</section>

BEMはSassと相性がいいです。

.box {
       padding-left: 200px;
       padding-right: 200px;
      
      &__btn {
          width: 300px;
          text-align:center;
          margin: 0 auto;
          
          &--blue {
            background: blue;
           }
           &--red {
            background: red;
           }
      }
}

SMACSS

構成は以下の通りです。

  • Base(reset.cssなど)
  • Layout(プレフィックスに l- をつける)
  • Module(親モジュールの名前をプレフィックスにつける)
  • State(プレフィックスに is- をつける)
  • Theme(プレフィックスに theme- をつける)
<section class="l-container">
  　<ul class="menu">
           <li class="menu-item is-ative theme-blue">メニュー１</li>
           <li class="menu-item theme-red">メニュー２</li>
   </ul>
</section>

FLOCSS

  • Foundation(プロジェクト全体に共通する基本的なスタイル　例：色,フォントサイズ,padding,margin,reset.cssなど)
  • Layout(ページ全体のレイアウトを構築するスタイル　例：ヘッダー、フッター、カラム、コンテナなど)
  • Object(再利用可能なUIパーツ　例：ボタン、フォーム、カードコンポーネントなど)
  • Compontent(より特化したコンポーネント　例：特定のボタンの動きやスタイル、モーダル、ダイアログ、ナビゲーションメニューなど)
// _modal.scss
.c-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
}
  • State(要素の状態に関するスタイル　例：モーダルの表示/非表示、ボタンのホバー時の色など、要素の状態に応じたスタイル)
// _state.scss
.is-active {
  display: block;
}

.is-hidden {
  display: none;
}

SCSSのディレクトリ構成

src/
  ├── scss/
  │   ├── main.scss        // メインのスタイルファイル（コンパイルされる）
  │   ├── _variables.scss  // 変数の部分ファイル（インポートされる）
  │   ├── _mixins.scss     // ミキシンの部分ファイル（インポートされる）
  │   ├── _functions.scss  // 関数の部分ファイル（インポートされる）
  │   ├── _reset.scss      // CSSリセットの部分ファイル（インポートされる）
  │   ├── _typography.scss // タイポグラフィの部分ファイル（インポートされる）
  │   └── home.scss        // 特定のページ用のスタイルファイル（コンパイルされる）

アンダースコアがついたファイルは主に他のファイルからインポートして使うための部分ファイルで、直接CSSとして出力されません。

// 1. 変数やミキシンを定義したファイルをインポート
@import 'abstracts/variables';   // プロジェクトで使用する変数
@import 'abstracts/mixins';      // 再利用可能なミキシン（関数）を定義

// 2. 基本的なスタイル（リセット、タイポグラフィ、ベース）
@import 'base/reset';            // CSSリセット（ブラウザのデフォルトスタイルをリセット）
@import 'base/typography';       // タイポグラフィ（フォントサイズ、行間、基本的な文字スタイル）
@import 'base/base';             // グローバルなスタイル（ボディ、リンクなど）

// 3. レイアウト（ページ全体のレイアウトスタイル）
@import 'layout/header';         // ヘッダーのスタイル
@import 'layout/footer';         // フッターのスタイル

// 4. コンポーネントのスタイル
@import 'components/button';     // ボタンスタイル
@import 'components/card';       // カードコンポーネントのスタイル

// 5. ページ固有のスタイル
@import 'pages/home';            // ホームページのスタイル
@import 'pages/contact';         // お問い合わせページのスタイル

// 6. テーマ設定（必要に応じて）
@import 'themes/default';        // デフォルトテーマ（色、フォントなど）

例えば、FLOCSSのmain.scss

// main.scss
@import 'foundation/variables';
@import 'foundation/mixins';

@import 'layout/header';
@import 'layout/footer';

@import 'object/button';
@import 'object/card';

@import 'component/modal';

@import 'state/state';