はじめに

BEM, OOCSS, SMACSS, FLOCSSなどなど先駆者が築き上げてきた設計を読んである程度は理解したつもりですが、どれも採用しようとしているプロダクトに合わない部分があったため、それぞれの良いところだけ盗んで独自のcss設計（命名規則）を作った

というお話です。

ディレクトリ構成

FLOCSSをベースにして少しだけ作り変えています。
本家ではObjectの中にComponent, Project, Utilityの3つがぶら下がっていますが
階層が違うと呼び出す時、綺麗に揃わないというのとプレフィックスを付ける手間を省きたかったので階層を揃えました。
_utilities.css と _variables.css は参照される場面が多いので外に出して見つけやすくしてみました。

foundation　サイト全体のデフォルト指定など
├ _reset.scss
├ _base.scss
└  etc...

Layout　サイト全体の枠組みのスタイル
├ _header.scss
├ _main.scss
├ _footer.scss
└  etc...

Component　サイト全体で再利用できるパーツ
├ _button.css
├ _card.css
├ _list.css
└  etc...

Page　各ページ固有のスタイル
├ _top.css
└  etc...

_utilities.css　どこでも使える汎用的なスタイル　少しだけ他と違う時に頼る
_variables.css　サイト全体で使える変数
app.css　エントリーポイント

命名規則

この記事を書いている途中にたまたま同じ設計をされている方の記事を見つけました。

長年使っている独自のCSS設計（命名規則）を紹介します

一個だけ違うのは modifier の接頭辞に _ を付けるか付けないかだけという…
書きたかったことがわかりやすくまとめられている素晴らしい記事なのでこちらを参考にしていただければと思います。
あわよくば流行ってほしい

.parent {}
.parent-child {}
.parent-child-grandChild {}
.parent-child-grandChild._modifier {}

utilitiesの命名規則

utilitiesは書きやすさを優先して プロパティの頭文字-値の頭文字としています。

.ta-c { text-align: center; }
.fw-b { font-weight: bold; }
.jc-sb { justify-content: space-between; }

まとめ

・先人の知恵は素晴らしい
・育ってきた環境が違うから好き嫌いは否めない