信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

2020

13

2月

CSS設計

テクログ

結構最近ブログ記事を書いた気がしたのですが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設計はじめてみるのもいかがでしょうか。

この記事を書いた人

マスオさん

ひこ

所 属:
WEBインテグレーション事業部
出身地:
群馬県
仕事内容:
マークアップ