BETA

[SCSS記法×BEM]CSSコーディング規約

投稿日:2020-06-19
最終更新:2020-06-25

はじめに

本CSSコーディング規約は社内で使用するマニュアルとして記述するものです。
コーディングルールの一例となるべく公開しております。
採用するSass(SCSS記法)やBEMに関しては都度補完して頂く必要があるのでご承知おき下さい。

CSSコーディングにおける基礎規約

本項はWebページのコーディングに関するルール集です。
CSSコーディングは本項に基づき

  • メンテナンス性
  • 可読性
  • 拡張性
  • 再利用性

がそれぞれ高いコードを目指しましょう。

Sass(SCSS記法)

CSSのメタ言語であるSassのSCSS記法を採用します。

  • CSSライクに記述できる(というかCSSそのものでも書ける)
  • VSCodeの拡張機能「Live Sass Compiler」を使って簡単にCSSにコンパイルできる
  • Node.js - Webpack環境下で簡単に導入できる
  • ネストが後述するBEMと相性が良い

以上のことからCSSコーダーが新しい技術を学ぶ際、SassのSCSS記法を取り入れる事が最も学習コストが低く最適解だと考えます。
SASS記法も存在しますが、CSSライクな{};で書け可読性の観点からSCSS記法とします。

CSS基本構文

以下はCSSの基本構文を示す例です。

selector {  
    property: value;  
}  
  1. selector{の間には必ず半角スペースを開ける
  2. propertyはインデントをつけ、valueの前にも半角スペースを開ける
  3. 一行の場合もインデントルールを守る

これらはSCSS→CSSのコンパイル時に全てminifyされます。
そのため、人間が書くコードの可読性を最重要視し記述削減の為の処理は全てツール類に一任します。

CSSはHTMLのclass名のみにあてる

CSSはセレクタとして様々な指定が行えます。
メジャーな指定は以下の通りです。

  • HTMLタグ
  • id属性
  • class属性

例外を除きclass属性以外はセレクタとして指定しないようにします(例外はSCSSのディレクトリ構造で解説します)。
id属性に関してはJavaScriptで指定する事が多いので、単純に

  • CSS = class属性
  • JavaScript = id属性

としておけば「CSSの為にclass名を編集したらJavaScriptが動かなくなってしまった」のような単純な人的エラーを未然に防ぐ事ができます。

プロパティの記述順序

CSSのプロパティは現状大きく分けて2種類あります。

  • アルファベット順に記述するGoogle式
  • 大きな枠組からだんだん小さい枠組みを記述するMozilla式

ここでは後者のMozilla式を採用します。

  1. 要素の表示の有無(display)
  2. 要素の配置場所(position/flex/grid)
  3. 要素のボックスレイアウト(width/height/margin/padding)
  4. ボックスの背景(background)
  5. テキスト等の前景(color/font)

Google式はレイアウトに使うtopやleft、widthやheightといった関連性の高いプロパティが離れてしまいます。

関連性の高いプロパティが同一セレクタ内で離れた場所に存在することはメンテナンスコストが高くなるので、なるべく関連性の高いプロパティを隣接するよう記述します。

基本はCSSの記述順に従い、例えばmarginプロパティで四辺を個別に指定すると順番に左辺、上辺、右辺、下辺となります。

selector {  
    margin-left: value;  
    margin-top: value;  
    margin-right: value;  
    margin-bottom: value;  
}  

marginプロパティのvalue値に指定する順で記述します。

SCSS基本構文

以下はSassのSCSS記法の基本構文を示す例です。

.block {  
    propety: value;  

    &__element {  
        propety: value;  

        &--modifier {  
            propety: value;  
        }  
    }  
}  

上記は以下のように出力されます。


.block {  
  propety: value;  
}  
.block__element {  
  propety: value;  
}  
.block__element--modifier {  
  propety: value;  
}  
  1. ネストは必ずインデントをつける
  2. 親セレクタを参照する場合、親のproperty: valueと子のセレクタ宣言の間は一行開ける

以上を守ることで可読性が高く、同時にメンテナンス性が高いコードが書けます。

変数はキャメルケース

SCSSで使う変数はキャメルケースで記述します。

$mainColor: #FFFFFF;  
$subColor: #rgb(255, 0, 0)  

コンパイル形式

SCSSには4つのコンパイル形式があります。

  • nested
  • expanded
  • compact
  • compressed

下に行く程コードの記述がコンパクトになる=ファイルサイズが小さくなります。
詳細は割愛しますが、通常最終的にデプロイされるCSSファイルは最も圧縮率が高いcompressedが採用されます。
compressedでコンパイルすると、先述したコードは以下のように半角スペース等が全て削除され一行で出力されます。

.block{propety:value}.block__element{propety:value}.block__element--modifier{propety:value}  

CSS設計×BEMの導入

CSS設計手法としてBEMを採用します。

BEMはblock__element--modifierで記述し、HTMLのclass名を見るだけでその要素がCSS設計でどの階層に属するのか瞬時に判断する事ができます。

  1. シングルクラスで設計する(HTMLのclassは基本的に1つ)
  2. 1ブロック1ファイルでトップレベルの.scssファイル(style.scss/main.scss/app.scss等)はimportのみ
  3. __elementは必ずいずれかのblockに包括される
  4. --modifierは通常elementに包括される

ファイルを分割し管理することで、block名=ファイル名の原則ができ意図せずblock名が重複してしまう人的エラーを0にすることができます。
例えばheaderというblockはheader.scss内に記述し、header.scss内に他のブロックのコードが書かれることはありません。
この方法で管理すれば、elementとmodifierが独立して(block外で)定義される可能性が低くなります。
先述したネストを組み合わせることで、blockを無視したelementとmodifierの存在が限りなく0になります。

トップレベルの.scssファイル以外の自動コンパイルを避ける

通常、CSSとして出力するのはトップレベルの.scssファイルのみです。
VSCodeのプラグイン等ではimportされる側の.scssファイルも都度コンパイルされてしまう事があります。
そこでファイル名の先頭にアンダーバー(_)を付与することで自動コンパイルを防ぐ事ができます。
例:_header.scss

通常、トップレベルの.scssファイル以外はアンダーバーを先頭に付与します。

SCSS記法×BEMのディレクトリ構造

以下はSCSS記法×BEM環境での最小ディレクトリ構造の一例です。

  • /public
    • style.css
  • /scss
    • style.scss
    • /base
      • _reset.scss
      • _base.scss
    • /modules
      • _header.scss
      • _main.scss
      • _footer.scss
    • /mixin
      • _layout.scss

/publicディレクトリ

最終的にコンパイルされて出力されたCSSファイルはここに置かれます。
プロジェクトによってpublic、dist、app等名称は自由ですが、最終的な出力ファイル(=コンパイルによって生成されたファイル)である事がわかるようにしておきましょう。

style.scss

style.scssは唯一プレフィックスとしてアンダーバーをつけず、基本的に記述は@importのみです。
ファイル名はpublicディレクトリ同様自由です(style.scss/main.scss/app.scss等が多い)。
baseディレクトリやmodulesディレクトリの内容をimportするだけなので、style.scssを編集する機会はほとんどありません。

_reset.scss

_reset.scssはいわゆるリセットcssの類を指定します。

_base.scss

_base.scssは主にサイト全体の設定を記述します。
ベースとなるfont指定等を行います。
基本的にHTMLタグを指定したコーディングはNGですが、_base.scssのみHTMLタグへのスタイリングを許可します。

/modulesディレクトリ

各パーツごとのファイルをおいておく場所です。

/mixinディレクトリ

@mixinで使用するファイルを格納しておく場所です。
gridレイアウトは_layout.scssにまとめて記述し、必要なページでmixinを使用します。

ディレクトリ構造の拡張

大規模アプリになる場合、更にplugin用のディレクトリ等を別途拡張する場合があります。
あくまで上記は最小構成です。

SCSSファイルのコメント推奨

通常CSSは以下の形式でコメントを記述できます。

/*  
*    複数行の  
*    コメントです  
*/  
selector {  
    property: value;  
}  
/* これもコメントです */  

一方SCSS記法は以下のように一行コメントを記述できます。

//これはSCSSの一行コメントです。  
selector {  
    property: value;  
}  
/*  
*    もちろんCSS形式の  
*    コメントもOKです  
*/  

//の一行コメントはコンパイル方法がどれであってもCSSへの変換時に削除されます。
/* */形式のコメントは通常コンパイルしてもCSS上に残りますが、コンパイル形式をcompressedに指定すると削除されます。
通常コンパイル形式はcompressedを指定するので、コメントは全て消えると思って下さい。
ただし以下のようにエクスクラメーションマークを付与したコメントはcompressedでコンパイルしても残ります。

/*!  
*    エクスクラメーションマークで  
*    記述したコメントは  
*    コンパイルしても残ります  
*/  

コメントは複数人での開発時にとても分かりやすい指標なので、何故そのような記述をしたのか意図を伝えるためにも積極的に利用をしましょう。

更新履歴

2020/06/19 初版

2020/06/20 CSSプロパティの記述順序を追加

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@braveryk7の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう