エンジニアスタンプラリー～フロントエンド編＃6

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

CSSアーキテクチャ
ツールとかではなく設計手法のようだ。

CSS Architectures

BEM

Block, Element, Modifierで構成や命名をする。筆者的には初めましてキーワード。
公式サイトQuick start / Methodology / BEMを参考にしてクラス名を決めた。
&を使ったSCSSの記述は良くないって聞いたけど、スタンプ獲得できれば問題なし。

index.html

<header class="header">
  <h1 class="header__title">Frontend Developer Roadmap スタンプラリー</h1>
  <nav class="top-bar row justify-content-center">
    <h2 class="top-bar__item top-bar__item_active col-sm-6"><a class="top-bar__link top-bar__link_front" href="#">フロントエンド</a></h2>
    <h2 class="top-bar__item top-bar__item_inactive col-sm-6"><a class="top-bar__link top-bar__link_back" href="#"> バックエンド</a></h2>
  </nav>
</header>

main.scss

.header {
  &__title {
    font-size: 3em;
    text-align: center;
    margin: 0;
    padding: 30px 0;
    color: #00539f;
    animation: fadeInTitle 3s ease-in;
  }
}

.top-bar {
  &__item {
    margin: 0;
    padding: 20px 0;
    text-align: center;

    &_active{ background-color: $bg-color; }
    &_inactive{ background-color: white; }
  }

  &__link {
    display: block;
    text-align: center;
    &:hover { text-decoration: none; }
  }
}

成果物

厳密な命名をすればコードの統一感は増すし、依存関係とかもはっきりするかな、といったところ。
https://tonchan1216.github.io/WDR-frontend/v6/
https://github.com/tonchan1216/WDR-frontend/tree/v6.0