CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM

「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追

[div1]

“CSSコーディングルール”

[etakaha]

BEMを元にしたMindBEMding

[ginzi009]

CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM

[s99e209]

命名規則のルールはCSSを書くうえで必要なこと

[dikn]

コンポーネントとかプロジェクトとかって一度作ったあとで一部だけ微調整して！って依頼がくる事が多くて、共通化されてることをデザイナーと共有できない環境だと仕事しないんだよなぁ

[hachibeechan]

よさそう。でもプログラマーの感覚でコードだけをみて綺麗なCSSとか共通化とか考えてるとデザインの調整に対する柔軟性がなくなって確実に死ぬのでComponentレイヤーは諦めたほうが良さそう

[kuraruk]

“FLOCSS”

[amagitakayosi]

なんか色々あるな ".t- Themeレイアー" ".s- Scopeレイヤー" ".qa- .te- QA/Testレイヤー"

[efcl]

FLOCSSベースのCSSのレイヤー管理について