個人的に勉強になったHTMLマークアップ

HTML、CSSを書いていて実務に入った時に、フロントエンドエンジニアにレビューで指摘されたことなどとかをまとめていく（ほぼ自分用）

##前提条件
・HTML、CSSの技術書勉強はやった人向け
・script(vanilla javasccript)は書かない
・なるべくSCSSでかこう

現役のフロントエンジニアからの指摘が怖い...

##IDは使わない
よく詰まった時に見る記事とかHTML,CSSの技術書を見ている時に
idが多用されていることがある。

<div id="hogehoge__1">
  <div id="hogehoge__2">
    <p id="hogehoge__3">pタグの中身</p>
  </div>
</div>

結局実務に入らないと分からなかったし、これはチームのコーディング規則（こーゆーふうに書こうよ！）的なところに依存するかもですけど、僕の師匠はidは指定しないを徹底していて、それに合わせて僕もコーディングしています。

idでできることはclassでできるし、idで指定してしまうと優先度（詳細度）が高すぎて
CSSであとでスタイルを当てた際にスタイルが適用されないです。

まぁそもそもid自体が一つのHTMLに一つしか設定してはいけないというのが鉄則なのですが、
実装方法に迷って記事とかを見た時などにこのパターンがあり、
困ってる人他にいないか？と思って参考にこれを書きました。

##CSSよりSCSS（SASS）を使おう

WEBの勉強をし始めた頃はあまり可読性や再利用可能なコンポーネント思考というものを考えていなかったのですが、基本的にプログラミングをしていくに当たって以下のことはすごく大切なことです。

・再利用
・可読性（わかりやすいコード）
・メンテナンス性
・共通化

そこでのSCSSなのですが、
基本的な書き方はCSSと同様にできて、＋で変数や関数、ネストや、import,mixin,extendとかいろいろあります。
CSSで書くよりSCSSで書いた方がコードの量も少なくなりますし、見やすくなります。

めちゃくちゃ便利なのですが、あまりSCSSの機能全快で頑張ると可読性がガタ落ちするので、便利なところだけ使うと個人的にはいい気がします。どうですかね...？

簡単な例として

<div class="content">
    <div class="main__wrap">
      <p class="main__text">hogehoge</p>
    </div>
    <div class="secondary__wrap">
      <p class="secondary__text">hogehoge</p>
    </div>
  </div>

.main__wrap {
 background-color: red;
}
.secondary__wrap {
 background-color: red;
}

こうゆう風にmain__wrap,secondary__wrapというクラスを持った要素に対して
背景色を赤にしていた場合、赤を青にしたくなったら、

.main__wrap {
 background-color: blue;
}
.secondary__wrap {
 background-color: blue;
}

こうなると思います。

2箇所の修正くらいなら簡単だし漏れがなく修正可能だと思いますが、
プロダクト全体に関わるような修正だとめんどいよねって感じになります。

ここでSCSSを使うと以下のようになります。

main.scss

$primary-color: blue;

.main__wrap {
 background-color: $primary-color;
}
.secondary__wrap {
 background-color: $primary-color;
}

これは$primary-colorという変数に使用する色を定義して(ここではblue)、
background-colorの指定時に定義した色を使用しています。
$primary-colorの色を変更するだけで変更が意図した箇所に反映されます。

もっというと、

_color.scss

$primary-color: blue;

main.scss

@import "./color.scss";

.main__wrap,
.secondary__wrap {
 background-color: $primary-color;
}

こうゆう感じで短く書くことも可能です。

##divを使って文章構造体を意識する

HTMLのタグはめちゃくちゃ多くて、例えば、

これはテスト用の文章です。

↑これを書く時に

<p>これはテスト用の文章です。</p>
<p>これはテスト用の文章です。</p>
<p>これはテスト用の文章です。</p>
<ul>
  <li>これはテスト用の文章です。</li>
  <li>これはテスト用の文章です。</li>
  <li>これはテスト用の文章です。</li>
</ul>

こんな感じでかけます。
何が違うかの話になると、
pタグはパラグラフの意味で、段落を指します。
対してliタグはリストの意味で、こんな感じで親の文があって使います。

【以下のルールを守る】
・Twitterは開かない
・席は立たない
・私語は慎む

要約するとタグの使い分けは明確に自分で作りたい文章に則ってやろうという話。
別にリストじゃないところで<li></li>を使う必要はないし、逆も然り。
たまに<h1>が並んでることがあって戦慄しそうになるのはよくある話。

##まとめ

いかがでしたでしょうか。
比較的初学者に向けたものになっているかと思います。
かくいう自分も最近勉強を始めたものですが、
如何せん調べても載ってなかったり、個人や、界隈の闇が垣間見える箇所になるかなと思います。
諸説あるような話が多いですが、何かの参考になればと思います。