これは自分の悩みの覚え書きです、いわゆるチラシの裏です。

なんか気付きがあったら逐次更新します。

BEM(MindBEMding)のつらいとき

• 基本的にはSassなんかを使ってシングルクラスで書くようなんだけど、そうすると各CSSプリプロセッサで継承を多用していかないといけなくなる。
  • 継承強力すぎ
  • どっかでつらくなる。結局どこに書いてあるかわからなくなるし、ある一定の量を超すと複雑性を増すと思う。
• Blockは要素そのものの装飾を指定するものであって、配置に関するスタイルは書かないとする。
  • すると、じゃあページそれぞれで違う、Blockの「配置」に関するスタイルはどう書く？となってくると、BEMのルール上で綺麗に解決するのが面倒。
  • 多分、その親にまた別のBlockを用意してそのElementとして配置を指定していけばよいのだけど… なんかうまく命名するのにとても疲れる
  • ページごとに大枠をBlockと定義して(class=“page aboutus”とか)、それのElementとしてレイアウトを定義するとか考えられるけど、面倒。というかよくわからなくなる。
    • とにかく、コンポーネントのデザインを表現するスタイルと、その配置を指定するスタイルをうまく分離するときにもうちょっと楽したい

で、結局なんか適当にしちゃう

• BEMをマルチクラスパターンで書いていた
• コンポーネントをとにかくBlockでつくったあと、配置する際のスタイルもそのBlockに書いてしまったりしていた
  • うまくコンポーネント化できないやつは、コンテンツの内容を訳したそれっぽい名前をつけてなんとなくしのいでいた(デザインとコンテンツが依存した形を許容してしまった)

特にElementを連結しないためBlockに切り出すために使うエネルギーで参る。

FLOCSSは割りと楽

FLOCSS(フロックス)と呼ばれるCSS構成案を発見し、自分の困っているところを解決できそうだったので使っている。

好きな所 1

それぞれのレイヤーに適切な接頭辞がついてる。使ってみると、結構しっくりくる。

好きな所 2

見てもらえば分かるのだけど、Objectに’Project’というレイヤーがある。個人的にこれが一番助かる。

雑に例をあげますが、あるコーポレートサイトの、「アクセス」ページにポツンとボタンのコンポーネントがあったとして、こいつは右上から20pxのところにあるとする。

BEMだと多分こう？

<main class="contents access">
  <a class="access__button button--blue">地図アプリで見る</a>
  <div class="access__map map">地図が入る</div>
</main>

こういう感じで、contentsというBlockにaccessというBlockも作ってあげて、それのElementとしてボタンを置いていくべきだと思うんだけど、命名時にこれが多発して結構疲れる。

FLOCSSだと多分こう？

<main class="contents p-access">
  <a class="p-access__button c-button c-button--blue">地図アプリで見る</a>
  <div class="p-access__map c-map">地図が入る</div>
</main>

TODO: すごく例が悪くて良さが伝わらない〜〜〜〜〜〜〜〜 ほとんど一緒じゃ〜〜〜〜〜ん なんかいい例を出せないものか

言いたいこと/気づいたこと

• Projectレイヤーをうまく使えば、classの命名がコンテンツに依存していても、結構破綻しない。
  • コーポレートサイトなんかだと、コンテンツやページとデザインが依存してるので、自然に命名できることが多い。
  • 逆にWebサービスなんかだと、デザインに依存しているのはコンテンツやページではなく「機能」なので、MindBEMdingでも問題なくいけそう。
• 無理して抽象化した命名にしなくても良くなる部分もあるので、少し楽できる…
  • 前提としてはできるだけ抽象的な命名でコンポーネント化していきたいけど… ツラいケースもあるから割り切っちゃお

その他のアレ

• 黙ってSassを使う(Stylusには死を)
• Rails案件でうまくCSSスプライトを使うやり方がわからない なんかGemつかえばいいのかな

なんかよくわかんなくなったけど、とりあえずあげちゃお

更新はつづく…🐶