CSSの命名規則について

[miminari]

CSSの命名規則についてご意見いただきたいです。 叩きとして私がよく使ってる書き方を晒します。

---

CSS命名規則　草案

SMACSSとBEMをベースに。

prefix-block__element--modifier

でblockに接頭語を付けて区別。

ex. l-global__header

prefix-

• l- --- Layout
• c- --- Component
• is- --- State
• t- --- Theme
• a- --- Animation

CSSの構成案

• vender/_normalize.css --- normalize（npmで入れてもいいかも？）
• base.css --- タグに直接何か設定したい時はここに。
• styles.css --- メイン。
• config.css --- フォントサイズとかの設定。
• component/*.css --- 各種コンポーネント
• layout/*.css --- 各種レイアウト
• animation/*.css --- 各種アニメーション
• wp_block/*.css --- WordPress BlockEditor対応

CSSのコーディングガイドライン

• 基本的にIDにスタイルを振らない。（ボタンにアニメーションなど動きを付ける場合はOK）
• タグ単独でスタイルを振らない。ふる場合は親に.prefix-blockを少なくとも一つ指定していること。
• WordPressのクラス名にスタイルを振らない。ふる場合は親に.prefix-blockを少なくとも一つ指定していること。
• z-index, positionはcomponentは持たずにlayoutに持たせる。
• componentのmarginを指定する場合はtopのみ。
• cssアニメーションはanimationで分けて書く。

異論は大いに認めます。extendどうしようかな…。

[waviaei]

異論とか提案よりは、ただ思う付くことを書き殴っただけです😆

Prefix

is- 以外はなし。理由：

• c- とか l- とか 覚えてられない
• is-でもあり a- でもある場合はどうするか？l- でもあり c- でもある場合は？という場面が必ずあり、その都度悩む

CSS構成案

ITCSSをベースにあまり細かくせず。

settings/
generic/
layout/
blocks/
vendor/
utlities/
screen.scss
editor.scss

（あ、でも脱SCSSにしようってはなしでしたっけ）

考え方

• 色々な"レベル"の componentsが存在してくるため、「components」として分けない。
• 今後WordPressのテーマでフォーカルポイントとなる component のレベルは「ブロック」なので 「blocks/ = メインコンポーネント」として捉えながらつくっていく

[miminari]

わー嬉しい、そういうの待ってました！ありがとうございます！ 最近すっかり私流の書き方で固まっているので、みんなの最近のTIPSを教えてもらってアップデートしたいなあと思っています。

結局、こういう複数でやる場合って、WordPressの命名規則ママか、他の一般的なルールに沿のが一番なのかなあとも思うのですが、みんなの自己流がまず知りたいなあって。

脱SCSSはするけれど、importとnestedは使いたいなと思っています。がこれもご意見求む！

[miminari]

l-とc-の切り分けで悩むって話は、昨夜も出てました。 コーディングリーダーが居なかったり、ドキュメント化が定着していないチームや案件ではcomponents化って結構難しいのかなあ。

[miminari]

昨夜のMTGからのメモ。とろゆにさん曰く is-styleを使うGutenbergには、BEM（modifier）は合わない、とのこと。

[miminari]

あ、あと私の場合、Figmaでデザイン起こす時から、componentはコレ、layoutはコレ、という風に命名規則も決めてデザインするから迷わないのもあるかも。