チーム開発でのCSS命名規則

命名規則

SMACSSのイメージ
Base ... サイトの基本となるスタイル
Layout ... 大枠を囲うエリア
Module ... 再利用可能なパーツ
Project ... 再利用しないページ固有のパーツ
State ... 状態
Theme ... サイトのテーマ(配色)

基本ルール

CSSのクラスはモジュール化を意識した命名規則に従ってクラス名をつける。
単語間はハイフン区切りでつなぐ。

※例としてprofileの下層の子要素はprofile-が引き継がれる。

<div class="m-profile">
  <img src="user.png" alt="User Name" class="m-profile-icon">
  <strong class="m-profile-name">User Name</strong>
  <div class="m-profile-content">
    <p>再利用性を意識した命名規則。</p>
  </div>
</div>

Layout

レイアウトは.l-のプレフィクスをつける。
(レイアウトは大枠を囲うエリアとして考える)
例: header, main, side, footer...
またレイアウトの命名は .l-○○-area とする

<header class="l-header-area">
    <h2 class="m-header-title">ヘッダータイトル</h2>
    <p class="m-header-text">ヘッダーテキスト</p>
</header>

Module

モジュールは.m-のプレフィクスをつける。
(モジュールは再利用できる部品として考える)
例: button, tab, mordal...

<ul class="m-list">
 <li class="m-list-item">リスト</li>
</ul>

LayoutかModuleかわからなくなった場合

Layoutはページをエリアごとに分割するためにつける。 (header, main, footer)
Moduleは再利用可能なパーツを作るためつける。 (button, tab, mordal)
後は相談してくだしあ。

状態の命名

hoverなどの状態(state)を表すものはis-のプレフィクスをつける。

<button class="m-button m-profile-button is-active">
   プロフィールを編集
</button>

CSSファイルの記述の方法

下記のフォーマットに沿って書いてください。
結合するときに可読性が増えるのと、自分が何処から何処まで書いたのかが分かります。

/*==========================================================*/

/*
担当 : sadakoa
TOPのサイドリスト部分のスタイルです。
*/

.sample {
  color: red;
}

/*============================================================*/

CSSファイルの記述注意

良い例

GOOD

.m-button {
  display: inline-block;
  padding: 0.5em 1em;
  cursor: pointer;
}
.is-primary {
  background-color: #CCAA00;
}

悪い例

BAD

.m-button {
  display: inline-block;
  padding: 0.5em 1em;
  cursor: pointer;
　background-color: #CCAA00;
}

↑全てのボタンに背景色がついてるので、それを打ち消す余分なスタイルを書かないといけない😂