結構最近ブログ記事を書いた気がしたのですが2回目の執筆回がやってきました、ひこです。

今回は名前だけは知っていたのですが実践していなかったcss設計について、仕事で使う機会があったので書きます。

cssは書けば動く、というシンプルな言語なので気軽に学習・実践が可能ですが、その分クラスの命名規則など個人差が出やすいです。

チーム開発では人によって命名方法が違うとどんどんコードがぐちゃぐちゃになって補修性が悪くなるので、一定の法則で命名してチーム内で理解しやすく保守しやすいhtmlを書こうというようなものです。

既存のコードの改修などだといきなり途中からcss設計を導入する＝命名方法が異なるコードの作成なので難しい部分もあるのですが、「新規ページである」「比較的シンプルなデザイン」「繰り返し使うオブジェクトが多い」などから勉強もかねて導入してみました。

導入したcss設計は「BEM」と「flocss」を使い分けるような形です。

いきなり複数のcss設計が入ったのは色々理由がありますが、私の計画性の無さとかで、誠に申し訳ないと思っています。_:(´?`」 ∠):_

具体的な命名は以下のような形です。

<nav class="nav__gloval>
?  <ul class="p-boxFlex nav__gloval__list">
    <li class="nav__gloval__item">
      ?<a class="nav__gloval__link" href="">リンク</a>
    </li>
  </ul>
<??/nav>

「nav__~~」はBEMのBlock Element modifierの命名方法ですね。

「p-boxFlex」はflocssのprojectになっています。

本で読みつつ学習を進めているのでBEMやflocssとは違うのかもしれませんがこれには理由があります。

flocssの命名規則では最小単位のcompornent「c-」があるのですが、素直に最小要素を「c-～～」と命名しているとcompornentの個所が膨大になり、css設計で管理しづらくなる為、繰り返し利用するcompornentのみ「c-」を付け、他はBEMで書いています。

また、はじめから何でもcompornent、projectと設定していくと、再利用性のない要素までflocssの命名規則にあてはめられ、無駄に種類が増えてしまう為です。

これらは私の経験値不足によるところも大きいかと思うので、どんどん改良していけるかと思っています。

まだまだcss設計初級者な私が今回感じたメリットですが、これをブラッシュアップしていくとクラス名のコピペだけでページを作成していけそうな気がします。

また、知名度のある設計思想なので学習コストが低い（ネットで記事など探しやすい）点も良いと思いました。

まだ試したことが無い方はcss設計はじめてみるのもいかがでしょうか。