導入背景

CSSの記述ルールは自由度が高いため、人によってルールが異なり、コードルールの不明確、コードの重複、メンテナンス性の弱さなどの弱点がある。一人で作業する場合でも複数人で作業する場合でも、正確で迷いの少ないCSS設計ルールの必要性を感じた。今回それらを解決するためにBEM、SMACSS、OOCSSを採用し、自分なりに利用方法をまとめてみた。

BEMとは

Block(塊),Element(要素),Modifier(状態）の略で、
Block__Element--Modifierのように記述する
つまり指定したい場所と状態がわかるように記述すれば良い

記述規則

ブロック以下の要素はわかる程度に要素名を省略
Element→Elmnt

ハイフンとアンスコは使わない
Block-Element__Element--Modifierのように記述したい場合、
ローワーキャメルケースで記述する

BlockElmntElmnt-Modifier

全部にCSS名をつけない
ulの直下はliなのでつけない

ex.css

#リンク
.Link>li{
display:inline-block;
}

#画像
.blockImg>img{
}

#画像(リンク)
.blockImgLink>img{
}

#テーブル
.Atable>td{
}

なるべく3つまで
BlckElmntElmnt--ModifierやBlckElmnt...-Modifierなど、どこまで子供を記述すればよいか迷うため、名前は親と子の3つまでに収まるようにする。
そこにしか使わない場合は仕方ないため長くなることは目を瞑る。

SMACSS

SMACSS とは、Scalable and Modular Architecture for CSSの略でスマックスと読みます。 SMACSSはCSSを5種類のルールにカテゴライズして記述する手法です。 5種類のルールとは、ベース、レイアウト、モジュール、ステート、テーマです。

OOCSS

Object Oriented CSS(オブジェクト指向CSS)の略。
構造と見た目、又コンテナと内容を分離してクラス定義し、それらを組み合わせてスタイルを定義する方法です。
IDや子孫セレクタによってスタイルを定義するのではなく、「すべてのスタイルをクラスで定義」して「それらを組み合わせる」ということです。

SMACSSとOOCSSをBEMに取り入れると、

index.html

<button class="btn btn-primary col-2">ボタン1</button>
<button class="btn btn-success col-2">ボタン２</button>

reset.css

button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}

common.css

.btn{
width:50px;
line-height:40px;
font-size:12px;
text-align:center;
}
.btn-primary{
background-color:red;
}
.btn-success{
background-color:green;
}

layout.css

.col-2{
display:inline-block;
width:48%;
}
.col-2+.col-2{
margin-left:2%;
}

上記のように細かくBlockを細かく刻んで、cssの重複も減る。

記述イメージ

細かいBlockを作って積み上げるイメージ

パーツ名規則

要素名

接頭辞

要素	規則
主要な	main
主要な	primary
補助的な・第二の	secondary
一般的な	general
全体的な	grobal
局所的な	local

main > primary

セクション系

要素	規則
ページ全体	container
ヘッダー	header
サイドバー	side
フッター	footer
メインコンテンツ	main

*全体の場合はglbを接頭辞につける

パーツ系

要素	規則
ナビ	nav
ボタン	btn
リスト	list
背景	bg
ロゴ	logo
見出し	ttl
テキスト	txt
画像、図、写真	img
サムネイル	thumb
バナー	bn
アイコン	icon
ページトップ	pagetop

レイアウト系

要素	規則
ユニット	unit
ボックス	box
コラム	col

Modifire

種類	規則
現在	current
アクティブ	active
次へ	next
前へ	prev
主要な	primary
成功した	success
注意	warning
太文字	b

CSS設計方法

目次