0909note | ワクワクノテ

GW空けに鹿児島へ旅行。4年ぶりか。飛行機で2時間とは楽な世の中だ。

悩み。Modifierによるクラス名の冗長

自分のメモ。クラス名が長くなりがちになるBEM。特に長くなる時ってのは深い階層のModifierを付与するとき。

【例】main-content__header-titleに赤色のModifierを付与しようとしたとき

class=”main-content__header-title main-content__header-title–red”

Modifierが頻発しないとは思うけどhtml側で長くなるのがちょっと面倒。

そんな時@extendをscss側に付与すれば

【html】class=”main-content__header-title–red”
【scss】@extend main-content__header-title .&–red{…}

だけで済むようになる。ただcssの記述が

【css】.main-content__header-title, .main-content__header-title–red {…}
　　　.main-content__header-title–red{…}

となるので特定の条件下（cssで管理のみとか）になった時、ややこしくなる。

となると@mixinを使えばいいという事になるかもしれんけど、これも増えるとstyle.css内に同じような記述が増えることになり、管理が面倒になる。

【css】.main-content__header-title{…}
　　　.main-content__header-title–red{…（上段と同じスタイル）+変更スタイル}

htmlの記述が増えるか、cssの記述が増えるか。どっちにしろ増えるのであれば、一貫性を持たせる方がいい。つまりBEMの徹底。

もしくはModifierのみマルチクラス化。

【html】class=”main-content__header-title –red”
【css】.main-content__header-title.–red

ただこれもModifierが多くなりすぎると、ややこしい事になるので

【html】class=”main-content__header-title –red –fz20 –mt100″

一つに限定する必要はある

【html】class=”main-content__header-title –red-fz20-mt100″
【css】.main-content__header-title.–red-fz20-mt100

色々考えていくと、Modifierを多く出現させないこと自体が大切なんだろう。

結論。elementまでで完結させるようにした方が良い。

基本的にシングルクラス。Modifierには@extendを使用。ただマルチクラスを使う事は否定しない。

ブロックの中にブロックを作ることはOK。クラス名でブロックにするか、エレメントにするか深く考えない。
下記どちらでもよし。（ブロック内で一貫性は保つ）
【html】header__list-title
【html】header-list__title

SCSSでネストは擬似要素等のみ（検索引っ掛かりにくくなるので）。
※scss使っている理由はブロック管理しやすくする為。

コロナ禍の影響、各々の予定が合わずなかなか出来なかった集まりが4年ぶりに出来た。

4年も空くと色々な心境の変化や積もる話もたくさん。とり串も美味しく楽しいひと時だった。

それにしても週末の大宮、都内に負けないくらい人が居た。ここ数年で一番の衝撃。

ここ最近あまりなかったんだけど、心がとげとげ。原因は分かっているので、離す必要があるね。

それとは別に定期的なストレス発散を行うのって大事。それは散歩だったり、ドライブだったり、読書だったり、カフェだったりするんだけど、何より大事なのはすぐに実行できること。

もしくは時間を決めて習慣化すること。

どうも時間あるだけ使いたくなっちゃうので、タイマー使って制限時間設ける。これが意外と良い。ノーリスクだし。

自分で課す制限は楽しむための調味料。上手く使っていこう

何事においても没入感は心地よい。目的の達成のために、目標は見定め、日々粛々と。

大切なのは目的。全てに目的がある。

それもしっかりと確認する事。誰のために。何のために。