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

ざっくりCSS設計

More than 3 years have passed since last update.

色々なCSS設計

下書き削除したいので、適当に書いてます。あてにしないでね。

OOCSS

SMACSSやBEMの原点となったもの。
決まり事がゆるく、CSSの命名規則など決まっていないので各プロジェクトで決めていく必要がある。

決まり事1:ストラクチャーとスキン

CSSを「ストラクチャー(構造)」「スキン(外観)」に分けて、それを組み合わせて1つのオブジェクトを作る。
ボタンを例にすれば、「ストラクチャー」が基本のボタンの大きさなどを定義し、
「スキン」でボタンの色などを定義する。

Untitled (1).png

例)ボタンのCSS設計例

<div class="btn btn-primary btn-small">ボタン</div>
<style>
.btn{
  text-align: center;
  display: block;
  padding: 5px 15px;
}
.btn-primary{
  background: red;
  color: white;
}
.btn-small{
  width:25%;
  height: 40px;
}
</style>

決まり事2:コンテナーとコンテント

再利用しやすいように個々のオブジェクトが独立できるよう、複数のオブジェクトを入れる「コンテナー」と複数のオブジェクトである「コンテント」に分ける。
例えば、ログインフォームであれば、フォームのオブジェクトが2つ(emailとpass入力フォーム)とボタンオブジェクトが1つ。それを囲むコンテナー。という形で考える。
コンテナーとコンテントを依存関係にしてはいけない。
form .btnというセレクタにしてスタイルを作ってしまうとコンテントのbtnがコンテナーのformに依存している)

それ以外はプロジェクトごとに自由に決めていけばいい。

SMACSS

SMACSSではスタイルを5つのカテゴリーに分けて考える。
それぞれの命名規則は決まっていない。レイアウトはl-でもlayout-でもいい。
厳格な決まりがないので、CSS設計初心者が多い現場に導入しやすい。

Base → 基本となるスタイル
Layout → ヘッダーやフッター、カラムといったレイアウトを決定する要素
Module → ボタンやタブなどのパーツ
State → js操作によって変更するModuleの見た目。アクティブ状態のボタンなど。
Theme → WEBページ全体や一部の見た目を変えるスタイル

BEM

BEMではスタイルを「ブロック、エレメント、モディファイ」の3つのカテゴリーに分ける。
クラスの命名ルールも厳格に決っていて、バッティングする危険がない。
ただし、クラス名が長くなる。
クラス名を見れば、それぞれの要素の関係性が分かる。
厳格な決まりごとがあるので、CSS設計経験者が多い現場向け。

Block → ページを構成するパーツ。モジュールのこと。Elementが内包されている。ヘッダーやフッター、ボタンやタブなど。
Element → Blockを構成する要素。必ずBlockに内包され、Blockに依存する。
Modifier → BlockやElementの見た目を変える要素

例)ログインフォームの場合
商用可freebies.jpg

BlockとElementのCSS設計例

<form class="search">
  <input class="search__input" type="text">
  <button class="search__btn btn btn--primary">
</form>
<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      リスト1
    </li>
    <li class="nav__item">
      リスト2
      <a href="" class="nav__link">
    </li>
  </ul>
</nav>

BEMの命名規則はBlockとElementの主従関係が分かるようにする。
BlockとElementoの主従関係が分かればいいので、.Block__Element__Element__Elementみたいに入れ子で繋いで命名していく必要はない。

ModifierのCSS設計例

``

<style>
.btn{
 ...
}
.btn_color_primary{
 ...
}
.btn_size_small{
 ...
}
</style>

BEM

ブロック内のブロックに対してだけスタイルを変えたい場合

「この箇所のボタンだけmargin-topを変えたい」とかって場合には

悪い例:

<div class="about">
 <div class="about__panel">
  <div class="btn btn__primary">詳しくはコチラ</div>
 </div>
</div>

<style>
 .about .about__panel > .btn{
   margin-top: 10px;
 }
</style>

お互いに依存関係が生まれる。
もし、このような書き方をして後々修正しようと思った時に.btnを修正しようとしてしまう。
(実際は.about内の.btnを修正しないといけないのに)
このCSSの場所も、.aboutと同じ場所に書くことになるので、どこに修正すべきスタイルがあるのか分かりにくい。
(google開発ツールで分かるけど)

良い例:

<div class="about">
 <div class="about__panel">
  <div class="about__btn">
   <div class="btn btn__primary">詳しくはコチラ</div>
  </div>
 </div>
</div>

<style>
 .about .about__btn{
   margin-top: 10px;
 }
</style>

スタイルを適用したい対象の要素を包む要素を作ってあげて、そいつにスタイルを適用させる。
ただし、DOMが増えるので使い過ぎるとdomロードに時間かかるデメリットもある。

SASSのディレクトリ

scss/
 |_ setting/
 |     |_ _color.scss
 |     |_ _font.scss
 |
 |_ tool/
 |    |_ _mixin.scss
 |    |_ _keyframes.scss
 |
 |_ base/
 |     |_ _grid.scss
 |     |_ _l-header.scss
 |     |_ _l-footer.scss
 |
 |_ module/
 |     |_ _form.scss
 |     |_ _btn.scss
 |
 |_ theme/
 |     |_ _spring.scss
 |     |_ _summer.scss
 |
 |_ master.scss ・・・ 最終的に全CSSをインポートするためのCSS

ダメなCSS設計例

競合しやすい名前を使う

下記のようなCSSの場合、.primaryは使われやすいのでスタイルがバッティングする危険がある。

<style>
.btn{
  padding: 5px;
  display: inline-block;
}
.primary{
  color: red;
}
</style>

@extendしすぎる

cssを継承しすぎて、追うのが面倒。
継承は子供までにしておくこと。

モジュールにマージンをつけちゃう

パネルの下にマージンをつけておくなどしてしまうと別のモジュール間で影響してしまうのでやめる。
マージンを取りたい時にはモジュールにユーティリティークラスをつけて対応する。

ユーティリティークラスを作りすぎる

その箇所だけマージンを変えたい時などに使える便利クラスだが、マージンやパディングをそれぞれ上下左右、5pxごとに作っていたら、それだけでコードが増える。
デザイナーと相談し、きちんと「パーツ間のマージンは10pxの倍数使う」「フォントサイズは12px,14px,16px,20pxの中で使う」などと決めておく。

StyleDocsを使う

kazukichi
元競売屋と保険営業のエンジニア。 TwitterでNo1人気のWEBプログラミング学習サービス『ウェブカツ!!』や、WordPressテンプレ販売『CRAZY WP』など多数運営。 http://webukatu.com/ http://crazy-wp.com/
https://webukatu.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした