読みやすく、簡略化されたコードを作る（HTML,CSS）

本記事は主にフロントエンド始めたての方向けになると思います。
自分自身フロントを始めて、2か月程度でまだまだ改善するところがあります。
今回デザインからコーディングする際のお話です。

#これを書こうと思ったきっかけ
理由は簡単で、HTML,CSSで使うクラス名の書き方に統一性がなく、コードも長かった為、色々な問題が起きたためです。
CSSのプロパティもある程度使いこなせていた為、その頃はとにかく早く作ろうと思い、コードの見やすさはあまり重要視せずにやってたと思います。

#起きた問題
・チームで作業する際、他の方が修正やコード追加するのが大変
・自分でも後から見直して、どこを修正していいか分からなくなる、修正に時間がかかる
・とにかく余計な時間がかかる

#原因
・HTML,CSSの設計でBEMを使うことになっていたが、正しく使えていなかった
・CSSで共通化を意識せず、一つ一つの要素をゼロから作成していた

※BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。
https://tech-dig.jp/bem-css-html/

#改善・意識したこと
・見た目からCSSで共通化できるところを探し、なるべくゼロから作らないようにする。

例としてwebサイトをコーディングする際、↓のようなレイアウトがよくあると思います。
https://www.dentsusciencejam.com/
このコンテンツ内に様々なセクションがあり、ページ検証を行うと分かりますが、セクションごとのタイトル、本文、配置など同じクラスが使われており、多少違うものは、その要素にクラスを追加して上書きするような形になっています。

・クラス名などBEMを正しく使い、Sassの記述も見やすくする
まずは↓のように、使う命名を整理する。
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

#結果
・コード量が非常に減った
　とある案件でのコーディングで、TOPページだけでも意識前後で半分以下になったと思います
・HTML、SASS（CSS)が見やすくなった
　何が、どういう要素かが一目で分かる（↓一例ですが、BEMは破綻しないように意識）

あるTOPページの業務内容セクション（例）
<section class="content-section service">
  <div class="content-section__inner">
    <div class="content-section__head">
      <div class="content-section__logo">
      </div>
      <h2 class="content-section__title">
        <div class="content-section__title--eng">SERVICE</div>
        <div class="content-section__title--jp">業務内容</div>
      </h2>
    </div>
    <div class="content-section__body">
      <article class="card">
        <div class="card__image"></div>
        <h2 class="card__title">業務内容（例）</h2>
        <div class="card__body">
          <div class="card__body--top">テスト本文</div>
          <div class="card__body--center">テスト本文</div>
          <div class="card__body--foot category">
            <div class="category__item">カテゴリーA</div>
            <div class="category__item">カテゴリーB</div>
            <div class="category__item">カテゴリーC</div>
            <div class="category__item">カテゴリーD</div>
          </div>
          <div class="card__body--link">
            <a href="#" class="arrow">詳しくみる</a>
          </div>
        </div>
      </article>

Sass(css)もBEMを正しく使えばこのようにまとめられます

//コンテンツ(共通)例
.content-section
  &__inner
    max-width: 1110px
    margin: 0 auto
  &__head
    display: flex
    justify-content: flex-start
  &__logo
    width: 60px
    height: 60px
  &__title
    margin-left: 15px
    &--eng
      color: #3E3838
      font-size: 38px
      font-weight: bold
    &--jp
      font-size: 20px
      font-weight: bold
  &__body
    font-weight: 500
    letter-spacing: 2px
    margin-top: 50px
    color: #FFFFFF

#まとめ

デザインどうりに反映していく事に意識がいき、コードの見やすさなど後回しになることがあると思いますが

Webサイトは修正、変更追加、メンテナンス作業など定期的に入ってきますので、チームで作業する際は、

他の方が見てもすぐに分かるように特に意識した方が良いと思います。

自分自身もっと良い書き方、まとめ方を取り入れていきたいと思ってます。

#参考サイト
CSSのクラス名を決めるときに使うリストをつくりました
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470
HTML・CSSの設計にBEMを取り入れてみよう！
https://tech-dig.jp/bem-css-html/