CSS / Sass スタイルガイド

社内のコーディングルールについて

創業から弊社は様々な開発メンバーと協働しシステム開発に勤しんできました。

企業であれば当然だと思いますが、弊社はまだまだ小規模ということもありこの機会に社内外向けにコーディング規約をまとめてみました！

そもそもの目的

コーディング規約を作成する目的はざっくり2点あると考えています。

① コードの属人化を防ぐ

入社・退職など開発メンバーの入れ替わりによる引き継ぎがあった際に、コードの解析が容易になるため、第一目的に挙げられるかなと思います。

② 品質の担保

こちらも①の理由に通じますが、属人的なコードに依存すると、当該人がチームから離脱した際に、あからさまに質が低下するなどにつながってしまいます。

上記2点を担保するためにも弊社ではコーディング規約を設けることとしました。

上記2点の目的を達成するためには？

上記の目的を達成するために必要なコーディングをする際に属人的になりやすい箇所を以下羅列してみました。以下の項目を解消してくれるコーディング規約を導入することとしました。

• コードの可読性
• • 変数 / 関数名 / cssアニメーションの命名規則
  • コメントアウトの記述方法
  • 省略形の呼び出し方
  • インデント / tab spaceの統一
• css / scssファイルを格納するディレクトリ構成

結論：他社のコーディング規約導入

弊社が運営しているREADY TO FASHIONはRailsベースのアプリケーションになるため、同じ言語・フレームワークを使用している他社企業を真似することからはじめることとなりました。

結論から言うと、Airbnbのコーディング規約を導入することとなりました。

理由はいくつかありますが、何点か挙げると

• 立ち上げ時の開発メンバーの人数など弊社と似ている状況
• コーディング規約作成時のメンバーのコーディング手法と似通っていたため、導入ハードルが低いと感じた

この2点が大きかったです。

コーディング規約については以下のgithubを参照に進めました。（最近は更新されていませんが、日本語訳も置いておきます。）

主なコーディング規約

以下Airbnbの規約から一部抜粋。

スタイルの宣言

"スタイルの宣言"とはセレクタ（もしくは複数のセレクタ）とそれに伴う１つ以上のプロパティのことである。 以下、例。

.listing {
  font-size: 18px;
  line-height: 1.2;
}

セレクタ

スタイルの宣言において、"セレクタ"はプロパティによってどのDOMにおける要素をスタイリングするかを決定するものである。セレクタはHTML要素のclass,id,もしくはその他のattributeのどれかにあたるものである。以下はセレクタの例である。

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

プロパティ

そして、プロパティは要素に対してスタイルを実際に定義するものである。プロパティはキーと値のセットであり、スタイルの宣言は１つ以上のプロパティの宣言を含むことができる。プロパティの定義は以下のようである。

/* ここにセレクタを記述する */ {
  background: #f1f1f1;
  color: #333;
}

コメント

• コメントを記述する際は, ブロックコメント(/* */)ではなくラインコメント(//)を使う
• コメントはなるべく行末コメントを避け、コメント用に１行使う
• それ自身がドキュメントとなるように詳細にコメントを書く
• • z-indexの使用
  • 互換性やブラウザ対応

CSSのフォーマット

• インデントは２スペース
• キャメルケースではなくダッシュを使うことを推奨
• IDセレクタは使わない
• 複数セレクタのスタイルルールを宣言する場合は１行に１つのセレクタを記述する
• 中括弧の開始、つまり '{'の前にスペースを1つ入れる
• プロパティにおいて、:の前でなく後ろにスペースを１つ入れる
• 中括弧の終了、つまり }の前に改行を入れる
• スタイルの宣言の間には改行を入れること

✖️ 悪い例

.avatar{
    border-radius:50%;
    border:2px solid white; }
.no, .nope, .not_good {
    // ...
}
#lol-no {
  // ...
}

⭕️ 良い例

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

ディレクトリ構成

cssのコーディング規約についてはAirbnbに基づき規約を作成したが、一方でディレクトリ構成については社内で協議し以下のように確定。

今後React実装に向けてディレクトリ構成を再考する必要があるのは宿題としました。

1-settings

初期設定で必要なパラメータなどが定義されているSCSSファイルを格納するディレクトリ。

2-mixin

mixinが定義されているSCSSファイルを格納するディレクトリ

3-base

ベースとなるスタイルが定義さているSCSSファイルを格納するディレクトリ

4-layout

ページのエリア分けを行うSCSSファイルを格納するディレクトリ

5-modules

各ページのスタイルが定義さているSCSSファイルを格納するディレクトリ

6-utility

以下_utility.scssにある通り使用する。

This means helper class like a snippet.
Utility should always have the prefix "u-".
And you should not feel free to add a new Utility class.

7-libray

外部プラグイン、ライブラリ、パッケージのSCSSファイルを格納するディレクトリ

まとめ

CSSのコーディング規約については、OOCSSとBEMの組み合わせが一番弊社にフィットすると言うことから、Airbnbの規約をもとに作成してみましたが、ベストかどうかは運用してからまた考察してみたいと思います！

今後はReact / Next.jsの導入に伴い再度規約を見直す必要があることも宿題として挙がっているので、まずは規約を開発メンバーが守るという意識のもと、随時アップデートしていきたいと思います！

READY TO FASHIONでは一緒に働くエンジニアを募集しています！

ファッションに興味があるエンジニアのご応募お待ちしております！