どのタグを使うか、どこにクラスをつけるか、クラス名をどうするか、CSSをどこに書くか、、、
コーディングをしている中で、一番無駄だと感じるのが「迷う時間」です。
規約をしっかり決めて、迷う時間を最小化しましょう。
以下のサイトの内容をベースに、自分なりにアレンジしたものをまとめました。
吉本式BEM設計（BEM設計ベース）
##HTML
###クラス付けの基準
クラスをつけないタグ、つけるタグをあらかじめ決めておきます。
####クラスをつけないタグ
- インラインレベルの要素（
a, span, img, em, strong, label, input...） - 親要素がほぼ固定の要素（
li, thead, tbody, tr, th, td, dt, dd）
####クラスをつけるタグ
その他全ての要素。
header, footer, main, section, article, aside, nav, div, h1~h6, p, figure, table, dl, ul, ol, ,iframe, form...
クラスをつけるか迷う時間をなくすために、スタイルを当てる必要がなくても必ずクラスをつけるルールにします。
またボタンなどあらゆる箇所で利用するパーツがある場合には、1つの要素に複数のクラスを指定します。
####Blockにするタグ
以下のタグ(div以外)は必ずBlockとして扱います。
header, footer, main, article, section, aside, div(elementでも使う)
####Elementにするタグ
上記以外全てのタグは、必ずElementとして扱います。
h, p, span, img, a, ul, ol, li, dl, dt, dd, figure, div(blockでも使う)
###クラス名
BlockまたはBlock__Elementの方式が基本です。
Modifierは、同じブロック内に複数の同一タグがあった場合に使用し、_nameなど_から始まる別のクラスを付与する形にします。
####Block
#####共通エリア
よく使うエリアは以下のように決め打ちで。そのサイト特有のエリアは頑張って考えましょう。
<header class="header"> <!-- サイトヘッダー -->
<footer class="footer"> <!-- サイトフッター -->
<nav class="gnav"> <!-- グローバルナビ -->
<main class="main"> <!-- メインコンテンツ -->
<nav class="fnav"> <!-- フッターナビ -->
<nav class="share"> <!-- シェアナビ -->
<nav class="paging"> <!-- ページング -->
<section class="sec"> <!-- セクション -->
#####ページ固有のエリア
ページを表す3文字 + その箇所を表す3文字
例）topctt
→ページごとにSassファイルを分割するので、その箇所を表す3文字は適当で良いです。
####Element
#####div,p以外
element名は常に固定。かぶった場合はmodifierを使う。
<h1〜h6 class="block__ttl">
<table class="block__table">
<ul class="block__list">
<ol class="block__list">
<dl class="block__def">
<form class="block__form">
<input class="block__input">
<label class="block__label">
#####p
以下のいずれかを使う。
<p class="block__txt"> <!-- テキスト系 -->
<p class="block__ttl"> <!-- タイトル系 -->
<p class="block__btn"> <!-- ボタン系 -->
<p class="block__logo"> <!-- ロゴ系 -->
<p class="block__data"> <!-- input系 -->
#####div
以下が使いやすいが、他でも良い。
<div class="block__inner">
<div class="block__outer">
<div class="block__wrap">
<div class="block__box">
###その他
blockの前後に1行空ける。
##Sass
Sassのディレクトリ構成は以下の通りです。
- scss
└── style.scss
└── bases
└── _reset.scss
└── _config.scss
└── _base.scss
└── _mixin.scss
└── utilities
└── _btn.scss
└── _title.scss
└── _form.scss
└── _responsive.scss
└── layouts
└── _header.scss
└── _gnav.scss
└── _content.scss
└── _fnav.scss
└── _footer.scss
└── pages
└── _top.scss
└── _abt.scss
└── _ctt.scss
└── pulgins
└── _swiper.scss
###basesディレクトリ
- _reset.scss：ブラウザのデフォルトのスタイルを解除します。
-
_base.scss：ベースとなるスタイルを、セレクタに直接指定します。（
a{text-decoration: none;}など） - _config.scss：色、ブレイクポイント、フォント、画像パスなどを設定します。
-
_mixin.scss：メディアクエリなど、
@includeして使うものを格納します。
###utilitiesディレクトリ
ボタン、タイトル、フォームなど、繰り返し使うパーツのスタイルを格納します。
_responsive.scssには、レスポンシブ対応のためにdisplayの値を切り替えるクラスなどを格納します。
###layoutsディレクトリ
ヘッダーやフッターなど、複数のページで繰り返し使用するエリアのスタイルを格納します。
エリアごとに1つのファイルを作ります。
###pagesディレクトリ
ページごとに1つのファイルを作り、ページ固有のスタイルを格納します。
ファイル名は_<ページを表す3文字>.scssに固定します。
例）_top.scss
###pluginsディレクトリ
画像スライダーなど、プラグイン固有のデザインを格納します。
##設計のメリット
クラス名が衝突する危険性が低い
→各ページ固有のスタイルを格納するファイルを分割し、ブロック名をファイル名 + 3文字に固定することでblock名の衝突に気がつくことができます。
クラス名を考えるのが楽
→block名を決め打ちorファイル名 + 3文字に固定。element名を固定。ファイルを分割したのでクラス自体にあまり意味がなくても良い。この3つによりクラス名に迷わなくなる。
クラスをつける基準が明確
→クラスをつけるタグ、つけないタグをあらかじめ決めておくことで、コーディングスピードのアップに繋がります。
コーディングに統一感が生まれる
→クラス名やクラスの付け方に一体感があること自体が1つの価値だと思います。
##設計のデメリット
HTMLの記述量が増える
→スタイルが必要無い要素にもクラスをつけ、さらに同じスタイルを使い回す場合にはマルチクラスになるので、クラスの量がかなり多くなります。