HTML＆CSS（SCSS）のアンチパターンとかよくある話

前に勉強になった書き方みたいな記事書いたのですが、
明確にしてなかったので再掲
自分用メモに書いておくことにします。
※新米なので、あしからず.....


## アンチパターンとは？？
やっていけないわけではないけど、やらない方がいいもの。
古い技術のままトレンドに混ざっているものが多く、もっといい書き方があるやーつ



### id属性にスタイルが当てられている

```style.css
#teat {
  color: #fff;
  padding: 1rem;
  margin: 2rem;
}

```

基本的に`idセレクタ`に当てるものはjsの処理などのみ。
勉強したてに本などを読んでいると、平気でidにスタイルを当てているがよくないと思います。
ここはclassを付与してスタイルを当てるだけでいいです。
結局レビューとかで指摘されあいとわからないけど、なんでidはダメなのかが書いてない。

これは`idセレクタ`に当てたスタイルに対して後からスタイルを上書きできず、
当てたいスタイルが当たらなくなってしまうからです。
逆にjsではidで要素を取りに行く方がいいです。

話が若干それますが、`document.getElementsByClassName('test')`より、
`document.getElementsById('test')`の方が取得速度がはやくSEOにつながります。



---------------------------------------



### ！importantが使用されている
必殺技ですね。
`!important`は一番優先度が高く、上に書かれたものからブラウザは解釈していくので、
急な仕様変更などが重なった際に`!important`で指定した箇所の上書きにまた`!important`を使用しなければならなくなります。
これが重なるともう手がつけられなくなり、記述内に本来一つの制限がある`!important`が複数出現します。

```style.css
div {
  color: green!important;
}
.test {
  color: blue!important;
}
.test__hoge {
  color: red!important;
}
.test__moge {
  color: blue;
}
.test__foo {
  color: yellow!important;
}
.test__bar {
  color: black!important;
}
```

そもそも`!important`を使用しないCSS設計が望ましいです。

---------------------------------------

### CSSバラバラ殺人事件


これよく見る気がします。
簡単な例として

```index.html
<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="header"></div>
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="footer"></div>
</body>
</html>
```

```style.css
.center{
  font-size: 1.5rem;
}
.right {
  padding: 1rem;
}
.header{
  background-color: black;
}
.footer{
  margin: auto;
}
.left{
  display: flex;
}

```

流石にこんな分かりやすくはないですが、割とこんなのあります。
グルーピングしましょう。


```style.css

/* css mainStyle */
/*  */
/*  */
/*  */
/* header */
/*  */
/*  */
.header{
	background-color: black;
}

/* left */
/*  */
/*  */
.left{
	display: flex;
}

/* center */
/*  */
/*  */
.center{
	font-size: 1.5rem;
}

/* right */
/*  */
/*  */
.right {
	padding: 1rem;
}

/* footer */
/*  */
/*  */
.footer{
	margin: auto;
}

```

基板の時点でグルーピングしておくと、可読性が上がるので
どこを修正したいのか、どこに書くのかが明確になります。
※適当に書いてるのでそもそもみたいな話は聞きたくないです.....

### キラキラ命名
まずはキラキラ命名について。
要約しましたが、かっこいい命名になっちゃったやつとか、タグ名であるものを命名しているものですね。

```style.css
/* かっこいいやつ */
.anotherSky{
  font-size: 1.5rem;
}
/* タグ名にしちゃった */
.section{
  padding: 1rem;
}


```

これに関してはケースバイケースなのですが、
リファクタした時や修正時、レビューや他人が見たときに分かりやすいものが良いかと思います。
かっこいい命名にしたくてそれっぽいのをつけたけど、もっとシンプルで良いし、
`class="section"`とかにしてしまうと、`<section></section>`が使い辛くなってしまうし、
理解できなくなってしまいます。


### 統一性のないもの
```style.css
.mainBnr{
  background-color: white;
  font-size: 32px;
}
.main_Secondbnr{
  background-color: #fff;
  font-size: 2rem;
}

```
簡単に記載しましたが、ポイントとしては2点

`・カラーネームとカラーコード等が入り混じっている`
`・命名規則が異なる`

になります。

---------------------------------------



では1つ目、
`カラーネームとカラーコード等が入り混じっている`について

※cssよりscssだから変数化しとるやろというツッコミは一旦Stay
ここはカラーだけではなく、フォントサイズの指定も含みますが、

・`px` > `rem`に統一
↑主にレスポンシブ対応として。

・`white` > `#fff`に統一
↑なんでも良いけど`color: #fff;`の方がバイト数が少ない

こんな感じになります。



では2つ目、
`命名規則が異なる`について

命名記法には以下の3つがあります。

| 記法名 | 例 | 備考 |
|:-:|:-:|:-:|
| スネークケース | example_case | すべて小文字で複合語のスペースをアンダースコアで区切る。 |
| キャメルケース | exampleCase | 先頭を小文字で書き始め、複合語のスペースをなくし要素の先頭は大文字にする。 |
| パスカルケース | ExampleCase | 先頭を大文字で書き始め、複合語のスペースをなくし要素の先頭は大文字にする。 |

一般的なのは、キャメルケースなのかなと思います。
また、BEM設計などとかぶってスネークケースが混同しがちなので
`_`は2個付ける派です。

例
`sample_exampleCase` > `sample__exampleCase`


## 最後に

長くなりましたが、いかがでしたでしょうか。
まだまだ拙い部分もありますが、参考にしていただければ幸いです。
※あとなんかあったかなぁ...色々書きたいけど紆余曲折するので、
また今度書きたいと思います。

ほな！