CSS設計テンプレ（コピペOK）ー迷わず書ける！実務で使えるCSS設計の型

Posted on by

Web制作でよくある悩み

  • CSSがどんどん増える
  • どこに書けばいいか分からない
  • 修正すると別の箇所が崩れる
  • 命名がバラバラ

これはほぼ確実に設計なしで書いていることが原因です。

そこで今回は

そのまま使えるCSS設計テンプレを紹介します。

この記事でわかること

  • CSS設計の基本構造
  • 実務で使えるディレクトリ構成
  • 命名ルール（BEMベース）
  • コピペOKテンプレ
  • 実務での運用方法

CSS設計の基本考え方

CSSは「構造」「部品」「状態」

で分けると整理されます。

設計の基本ルール

まずこれだけ覚えてください

① セレクタは浅く
② classベースで書く
③ コンポーネント単位で作る
④ 再利用できる設計
⑤ 命名を統一する

ディレクトリ構成テンプレ

まずは構造です

css/
  ├ base/
  ├ layout/
  ├ component/
  ├ utility/
  └ style.css

各フォルダの役割

base（ベース）

サイト全体の基本設定

body {
  font-family: sans-serif;
}

layout（レイアウト）

ページ構造

.l-header {}
.l-footer {}
.l-main {}

component（部品）

UIパーツ

.card {}
.button {}
.nav {}

utility（補助）

小さなスタイル

.mt-20 {}
.text-center {}
.flex {}

命名ルールテンプレ（BEM）

基本構造

.block
.block__element
.block--modifier

実例

<div class="card card--featured">
  <h2 class="card__title"></h2>
  <p class="card__text"></p>
</div>

プレフィックスルール

layout

.l-

component

.c-

utility

.u-

state

.is-

命名例

<header class="l-header">
<nav class="c-nav">
<ul class="c-nav__list">
<li class="c-nav__item">
<a class="c-nav__link is-active"></a>
</li>
</ul>
</nav>
</header>

CSSテンプレ（コピペOK）

ここが一番重要

style.css

/* =========================
   Base
========================= */
@import "base/reset.css";
@import "base/base.css";

/* =========================
   Layout
========================= */
@import "layout/header.css";
@import "layout/footer.css";

/* =========================
   Components
========================= */
@import "component/button.css";
@import "component/card.css";

/* =========================
   Utility
========================= */
@import "utility/utility.css";

base.css

body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
}

layout/header.css

.l-header {
  width: 100%;
  background: #fff;
}

component/card.css

.c-card {
  padding: 20px;
  border: 1px solid #eee;
}
.c-card__title {
  font-size: 20px;
}
.c-card--featured {
  border-color: gold;
}

utility.css

.u-mt-20 {
  margin-top: 20px;
}
.u-text-center {
  text-align: center;
}

HTMLテンプレ

<header class="l-header">
<nav class="c-nav">
<ul class="c-nav__list">
<li class="c-nav__item"><a class="c-nav__link"></a></li>
</ul>
</nav>
</header>
<main class="l-main">
<section class="c-section">
<article class="c-card">
<h2 class="c-card__title"></h2>
<p class="c-card__text"></p>
</article>
</section>
</main>
<footer class="l-footer">
</footer>

実務での運用ルール

① いきなり書かない

まず設計を考える

② コンポーネント単位

ボタン
カード
ナビ
モーダル

③ CSSは分割する

1ファイルにまとめない

④ Utilityは最小限

使いすぎ注意

⑤ 再利用を意識

同じCSSを書かない

よくあるNG

NG① 深いセレクタ

.header ul li a span

NG② !important乱用

NG③ 命名バラバラ

card-title
card_title
cardTitle

NG④ div地獄

NG⑤ 設計なし

一番ダメ

このテンプレのメリット

この設計を使うと

  • CSSが整理される
  • 可読性アップ
  • 再利用できる
  • 修正しやすい
  • チーム開発が楽

どのレベルでも使える

初心者
→そのまま使える

中級者
→カスタマイズできる

上級者
→ITCSSなどに拡張可能

まとめ

CSS設計は

→書き方ではなく設計の問題

です。

今回のテンプレをまとめると

・ディレクトリ分割
・BEM命名
・コンポーネント設計
・Utility活用

これだけで

→CSSの質が一気に上がります

最後に

CSSが上手い人は

→「最初に設計している人」

です。

このテンプレを使えば

  • 迷わない
  • 崩れない
  • 速く書ける

状態になります。

ぜひ一度、このテンプレでCSSを書いてみてください