CSSのコーディング規約を決めてたら喧嘩になりかけました。

2441 ワード
CSS コーディング規約 CSS テキストリンク

この記事は豊田高専 Advent Calendar 2021の 11 日目の記事です。

はじめに

私のプロジェクトでは、コーディング規約の改善がたまーに行われます。
まだ発足して日が浅いプロジェクトなので、開発中に決まったフワッとしたルールを固めるためにコーディング規約を定義する感じです。
規約も固めずに開発進めてるんか...とツッコみたいところは重々承知なのでそこは触れないでください。

コーディング規約を決めるときはプロジェクトメンバー数人で集まって、話し合いながら決めていきます。
しかし、全員が「この規約でいい」と納得してから規約の追加を行うので、納得するまで話し合いを行うこともあるわけです。
本記事では、CSS の規約決めで殴り合いｱﾁｱﾁの討論が起こった時のお話をしていきます。
※本当に殴り合いが起こったわけじゃありません。リモート会議なので画面を殴りながら話していただけです。

問題になった規約

今回問題になったのは、プロパティの宣言順序です。以下の 2 つの派閥に分かれました。

よく言われている問題ですね。
言い忘れていましたが、私のプロジェクトでは基本 Google のコーディング規約を元に開発が進められています。よって、1 つ目の派閥が出てきました。

それぞれの言い分はこんな感じです。

アルファベット順派閥

  • 実装者による記述順序の揺らぎが無くなる！
  • 新規でプロジェクトに参加した人がわざわざ順序を覚えるのは大変！
  • 目的のプロパティを探しやすい！

視覚順派閥

  • アルファベット順は気持ち悪い！width と height が離れてるってどういう書き方や！！
  • 同じようなプロパティでまとめられるため、書きやすい！

まぁこれもよく言われている通りの言い分です。
そんなわけで結局 30 分話して以下の規約になりました。

弊プロジェクトの規約

CSS のプロパティは以下の順序で宣言します。
同じ所属のプロパティはアルファベット順で宣言します。

  1. ボックスに関するプロパティ(display, margin など)
    特に、ボックスに関するプロパティは以下の順序で宣言します。
    1-1. display
    1-2. 位置に関するプロパティ(position, top など)
    1-3. margin,padding
    1-4. 大きさに関するプロパティ(width, height など)
    1-5. その他のプロパティ
  2. ボーダーに関するプロパティ(border, border-radius など)
  3. 色に関するプロパティ(background-color, color など)
  4. フォントに関するプロパティ(font-size, font-family など)
  5. その他のプロパティ

要するに半々です。よく使うプロパティだけは、順番が決まってます。
新規メンバーが覚えることは少なめに、かつできるだけ視覚順に。
どっちつかずになるのが一番いけない感はありましたが、とりあえずこれで殴り合いは終結しました。

まとめ

正直どっちが正しいかわかりませんでした。
結局は何を優先するかだと思います。CSS を全く知らない人に見せるコードなら視覚順のほうがわかりやすいと思いますし。
ちなみに私はアルファベット順派でした。