公開日:2020.02.13

結構最近ブログ記事を書いた気がしたのですが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設計はじめてみるのもいかがでしょうか。
テクログに関する記事一覧
-
2013.02.25 テクログ
【gridster.js】パネル移動【すいすい動くよ】 -
2021.10.05 テクログ
あの時助けて頂いたお礼に、今から使えるかもしれないPhotoshopの機能を紹介します。 -
2019.07.11 テクログ
高機能スライダー「Swiper」の魅力的なオプションについて -
2017.12.15 テクログ
CloudFront で爆速サイトに!