細かいけど個人的にはこだわりたいコーディングのあれこれ【CSS編】

これから記述するのは**個人のこだわりに近い細かい話**です。
もし共感してもらえる部分があれば大変嬉しいです！

:::note info
【こんな方にオススメ！】
・CSSの記述について他の観点を知りたい方
・自分の書いているコードにいまいち納得いかない部分がある方
:::

もしかすると何かのヒントになるかもしれないので一度読んでいただけると嬉しいです！

## CSSを記述する時のこだわり
**個人の感覚によるこだわりが多くなる**と思います。
なので共感してもらえたら嬉しいですし、そうでない方は1つの意見として捉えてください。

### HTML要素とCSS命名がずれるのが気持ち悪い
個人的にHTMLタグと命名にずれが違和感を感じます。

どのようなプロパティーが設定されているかによりますが、私なら**divではなく直接ulにclassを当てられるようにモジュールを切り出す、スタイルを変更などで調整します**。
下記は極端な例ですが…。

```diff_HTML:ulにarticle-list-item、親にarticle-list
- <div class="article-list">
-  <ul class="article-list-item">
+  <ul class="article-list">
-    <li></li>
+    <li class="article-list-item"></li>
  </ul>
</div>
```

```scss
.article-list {
  border: 1px solid #ccc;

  &-item {
    padding: 8px 12px;
  }
}
```

### CSSの命名でtextは使いたくない
`〇〇-text`というclass名を利用することがあると思います。
**classをつけスタイリングしているならそのテキストには明確な役割があるはず**だと考えています。
にもかかわらず「text」と命名されてしまっていることに違和感を感じます。

```diff_html
<div class="card">
  <div class="card-header"></div>
  <div class="card-body">
-    <p class="card-text"></p>
+    <p class="card-title"></p>
  </div>
</div>
```

```scss
// テキストと命名している割にはリッチにスタイリングされている例
.card-text {
  font-size: 18px;
  line-height: 1.5;
  color: red;
  position: relative;

  &::before {
    content: '';
    position: absolute;
  }
}

// 逆にclassを定義するほどでもない例
.card-text {
  font-size: 12px;
  line-height: 1.5;
}
```

どうしても意味を持たせられないような要素ではない場合は、汎用的に利用するために作ったクラスをマルチクラスで当てることでデザインを実現させます。

```html
<div class="card">
  <div class="card-header"></div>
  <div class="card-body">
    <p class="text-small line-height-small"></p>
  </div>
</div>
```

```scss
.text-small {
  font-size: 12px;
}

.line-height-small {
  line-height: 1.5;
}
```

### ショートハンドは便利だが、一方でわかりにくい
ショートハンドは楽で便利なので積極的に使っていくことに異論はありません。

margiは上、右、下、左の時計回りに指定するシンプルなショートハンドなので積極的に利用する方針で問題ないと思います。

```scss
// 冗長的な例
.margin {
  margin: 5px 5px 5px 5px;
  margin: 5px 0 5px 0;
  margin: 5px 10px 20px 10px;
}

// ショートハンドを使った例
.margin {
  margin: 5px;
  margin: 5px 0;
  margin: 5px 10px 20px;
}
```

下記のコードを見てbackgroundのどのプロパティーが何を指定しているか瞬時に判断できた人はいるでしょうか？
**私はわからなくなる時があるので調べて確認します…**。

```scss
.background {
  background: url('/test.png') top left / 50px no-repeat #ddd;
}
```
backgroundプロパティーはショートハンドで書くと何が指定されているかわかりづらい点から**冗長的ではありますがショートハンドで記述するのは控えたい**と考えています。

```scss
.background {
  background-image: url('text.png');
  background-position: top left;
  background-size: 50px
  background-repeat: no-repeat;
  background-color: #ddd;
}
```

:::note warn
backgroundプロパティーをショートハンドで記述する場合は`position / size`の順番を守らないと正しくスタイルが当たらない点も注意が必要です…
あと「/（スラッシュ）」で区切ることも忘れなく。
:::

### 順番やカテゴリーはまとまっていた方が見やすいと思っている
そこまでこだわらんでも…というポイントですが個人的には**プロパティーごとにまとまりが合った方が見やすい**と思っています。

```scss
// まとまりがない
.title {
  font-size: 2rem;
  background-color: #602a08;
  color: #fff;
  padding: 8px 12px;
  font-weight: 700;
  line-height: 1.3;
  width: 100%;
}

// まとまりがある(要素外側から内側にプロパティーを書いていくイメージ）
.title {
  // コンテンツの大きさlayout系、大きいカ所の指定を上の方に
  width: 100%;
  padding: 8px 12px;
  background-color: #602a08;
  // text系のプロパティーをまとめる
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}
```
上記の例だとtextに関する設定をカテゴライズして、バラバラになっていたのをまとめて下に記載しています。

### 引用符はシングルで！
本当にどっちでもいいのですが、シングルの方が見やすいな…と思っているぐらいです。

```scss
.content {
  content: "";
  background-image: url("text.png");
  position: absolute;
  top: 50%;
  left: 50%;
}

.content {
  content: '';
  background-image: url('text.png');
  position: absolute;
  top: 50%;
  left: 50%;
}

```

ちなみにHTMLはGoogleがダブルクォートを推奨しているので引用符はダブルにしています。

https://google.github.io/styleguide/htmlcssguide.html#HTML_Quotation_Marks

## まとめ
あまりにも独創性が高いこだわりは個人だけにとどめておく方が良いと思いますが、**命名の気持ち悪さとか見やすさは誰かが混乱することになるのでこだわっておいた方が良い**と考えています。

チーム開発の時は個人の感覚をすり合わせて全員でコーディング規約を作り直すことがあっても良いと思います。

:::note info
共感や意見があればぜひ教えていただきたいです！
また、こんなこだわりがある！などあればぜひコメントで教えてください！
:::