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

SMACSSによるCSS設計

More than 5 years have passed since last update.

前案件でBEMチックな書き方をして、あまりのクラス名の長さに
キィェエエエ!!ってなった後で、
CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。

  
※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。
本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。

SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid

CSSカテゴライズ

5つにカテゴライズして、それに準じた名前を付ける

1.ベース
2.レイアウト
3.モジュール
4.状態(ステート)
5.テーマ

1.ベースルール

サイト全体で要素そのもののデフォルトスタイル

body
a:link
table ...

1パターンしかないからといって、ここでデザインを指定しない。
CSSのリセットは使用を避けて、なるべくNormalize.css を使う。

2.レイアウトルール

ページのエリア分け

.l-main
.l-sub

プレフィックスでl-をつけて一目でわかるように。

IDが絶対だめってわけじゃないけど、
ID要素は重複利用できなかったり、スタイルの上書きがむずかしくなるから、なるべくクラスを使う

CSSでは位置や配置の指定をする。
(フォントや色はモジュールや状態の方で指定する)

子孫セレクタを使って分岐

.l-main {
  width: 70%;
}
.l-fixed .l-main {
  width: 600px;
}

.l-fixedのついてるのはpx指定、そうでなければ%指定

3.モジュールルール

再利用可能なパーツ

・ ロゴ
・ナビゲーション
・タブ

などページを構成するパーツすべて

レイアウトパーツの中に入れて、
どこに置いても再利用できるように独立させておく。

レイアウトとモジュールの合わせ技

<div class="l-container-12">
  <div class="l-grid-06">
    <div class="box">box1</div>
  </div>
  <div class="l-grid-06">
    <div class="box">box2</div>
  </div>
</div>
  • レイアウト
    .l-grid-01~nという風に幅が違うクラスを量産する
    これで、レイアウトの調整が無限大!

  • モジュール
    .boxは汎用的なの

モジュールの命名規則

親モジュールの名前をプレフィックスでつける

<div class="item">
  <p class="item-text"></p>
</div>

クラス名をつけるタイミング

モジュール全部にクラス付ける必要はない。

  • li、a ...クラス名をつけなくてもいいよ
  • div、span ...クラス名つける

liは階層が深くなる場合>を使う。
見出しはあとでh2→h3に変わったり、
階層が変わる場合もあるから、クラス名付いたdivで囲む方がいいっぽい。

親要素での使い分けはしない

同じ要素だけど置く場所が違うものは、
親要素によっての指定はしない。

<div class="l-main">
  <div class="search">~</div>
</div>

<div class="l-sub">
  <div class="search">~</div>
</div>

こうじゃなくて

<div class="l-main">
  <div class="search">~</div>
</div>

<div class="l-sub">
  <div class="search search-vertical">~</div>
</div>

こう。
.search-verticalに指定することで、どこに移動してもスタイルを維持できる。

4.状態ルール 

特定の状態によってスタイルを上書きする
状態の切りかえはJavascript

  • 結果がtrueの場合のとき
     プレフィックス is-

  • 表示/非表示
    .is-hidden {}
    .is-error {}
    .is-active {}


.is-dialog-hidden
.is-tab-active

!importantはなるべく避ける。
状態ルールはモジュール名を付けてあげた方が競合しなくてよさそう。

5.テーマルール

テーマ管理用のCSS

main.css
.box {
  border: 1px solid;
}
theme.css
.box {
  background-color: #eee;
  border-color: #ccc;
}

色に関わる部分をテーマで管理する

プレフィックス theme-

theme.css
.theme-border {
  border-color: #ccc;
}
.theme-background {
  background-color: #eee;
}

SMACSS のゴール

  • HTMLとコンテントのセマンティックな価値を向上すること
  • 特定の HTML 構造への依存を低減すること

参考サイト


「自分以外の誰が見てもわかる」+「CSSを編集することがあまりない」
そんな更新しやすい組み方ができたらいーなーと思う今日この頃。

matsui-a
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
ユーザーは見つかりませんでした