デザインパターンを使わないという選択

CSSを制作するうえで、BEM記法や、FLOCSSなどと言ったデザインパターンがありますが、私の場合は、それらを全然使用していません。
なら、デタラメにCSSを書いているのかと思われるかもしれませんが、私は私なりに、理解のしやすいCSSを組む事を考え、それを洗練できるよう研究を続けています。

デザインパターンを導入しない理由

FLOCSSの場合、まず第一に、FLOCSSの構造自体が超大作すぎる事です。
役割ごとに、かなり細分化されたディレクトリ構造を持ちますが、Webサイトひとつにしては、その量がかなりのものになっている気がします。

BEM記法に関しては、クラスが長くなってしまう事にあります。
クラスが長く,それもほぼ全てのタグに長いクラスが付与されていると、HTMLのコードが見づらいのです。

特に人間の目は、超長い文章の構造は、もはや文字情報として捉える事は困難で、マンガのスクリーントーンのような、ひとつの模様のようにしか見えなくなるうえ、記述が長くなるほど画面も横長になるため、要素の親子関係を把握する事も困難になります。
Full HD画面の横幅をフルに活かしたテトリスのように、めんどくさくなってしまいます。

HTML・CSSにおいては、親子関係が重要なので、その親子関係がわかりにくくなるという理由からも、BEM記法を使用しておりません。

IDを使おう

HTML・CSS制作でつくづく疑問に思っているのが、IDを使おうよという事です。
ひと昔前の考えでは、クラスセレクタが動作が最も軽いから、BEM記法で一意なクラスを作って、ピンポイントで適用してしまおうというのが理想だったかもしれませんが、はっきり言ってCSSセレクタで動作が遅くなるような端末は、もはやジャンク品レベルの品物でしょうし、気にする必要などありません。

IDはクラスと違って、同じページに同じIDは複数存在できないルールがあります(ルールを破って同じIDを記述してしまうのは論外ですが)。
ゆえにIDは、その箇所をピンポイントで指定するセレクタとしても信頼できるものであり、いちいちクソ長いクラスなど必要ありません。

また、各セクションの親要素にIDをひとつ付けるだけで、適用範囲を狭める事が出来るので、極端な話、IDひとつだけでも後はCSSのセレクタを駆使すれば、それだけで成り立つのです(動作が遅くなるという進歩のない話は置いといて…)

クラスは同じ名前が存在できる

クラスではIDと違って、同じ名前が存在できます。
それは汎用的なスタイルを付与するには有用ですが、一意の要素を指定するうえでは、曖昧になってしまいます。

たとえBEM記法で綴られたクラス名にしても、それがクラスである限り、よそで同じクラスが使われている事も、もしかしたらあるかもしれないと疑ってしまいます。
そしてBEM記法が使われている場合、たいていCSSセレクタはクラスセレクタ1つだけなので、もし同じクラス名がページをまたいだ他の箇所に存在していたとしたら、そこにも影響を与えかねません。

人間は完全な生き物ではないため、当然一度入力したクラス名も、もう一度入れてしまうという事もあるでしょう。
特にBEM記法を採用している場合は、それを守っていれば大丈夫という意識も生まれてしまったり、長いクラス名は把握するのが難しいという点もあるため、同じクラス名を作ってしまう可能性もあります。

デザインパターンを盲目的に使ってはいけない

これが一番大事です。
デザインパターンの目的も考えずにデザインパターンを導入するのは、もはや何も考えていないのと同じで、コードをゴミにしてしまうと宣言しているようなものです。

コーディング規約にしろデザインパターンにしろ、それを守ったうえでスパゲティなコードを書く事は可能なのですから、「コードを複雑化しない」という意識そのものが抜けていると、意味がありません。

重要なのは、わかりやすくするという気持ち

個人的には、BEM記法もFLOCSSも、クラスセレクタ以外は重いと言われ、ほぼクラスセレクタだけで運用していくような時代に考えられたものなのかなと思います。

しかし今は、CSSセレクタの重さも全く気にならないほど端末も進化しましたし、クラスセレクタもIDセレクタも最も重いと言われる兄弟セレクタも、自由に使っていいと思います。

そして、やるべき事は、デザインパターンを勉強する事でもなく、CSSのセレクタの重さを気にする事でもなく、とにかく「わかりやすく書く事」を心がければいいと思います。
そして「適用範囲を狭める」「共通化できる物を共通化する」これを心がければいいのではないかと思います。

100人いれば100のコードが出来上がると言われていますが、たとえコードに個性が出来てしまっても、わかりやすければ大丈夫です。
大切なのは、デザインパターンを勉強する事ではなく、むしろ素でわかりやすい構造を考えられるようになる事。
将来の自分や、他人が見る事も考え、こうすれば今後の編集がラクになるという事を考えられるようになる事が大切でしょう。


この記事が気に入ったらサポートをしてみませんか?