BEM等の設計手法を用いるメリット

大体の運用方法、書き方は理解しているつもりだけど、実際に導入したことが無いので何とも言えないというのが本音。ただ、どういったものかを調べた過程で自分が感じた印象はこんな感じです。

メンテナンス性が高い

「このセクションの、このパーツの、この状態に適用させるCSS」とかなり細かく記述していくので、ちょっとした修正等があったときに目的のCSSを見つけやすい。そして、きちんとルールが守られていれば、意図しない箇所に影響を与えることがないので「今度はこっちがおかしい」なんてことも無いはず。

複数人でCSSを書くときに便利

何人かで手分けをしてHTMLとCSSを書くとき、idやclassの命名規則を書いた仕様書等をわざわざ用意する必要が無くなるのかと。「BEM記法に則って」と一言で済んでしまうので。ただし、これはメンバー全員がその設計手法をしっかりと理解していないと全く意味がなくなってしまうので、デメリットにもなり兼ねないと思います。

というか、コーディング部分を手分けすること自体がかなり面倒なことなんですけどね。

BEM等の設計手法を用いるデメリット

デメリット、というよりは僕が導入に踏み切れない理由です。

idやclass名が長くなる

上でも書いた通り、どの設計手法もそのCSSを用いている場所やパーツをかなり細かく指定していくので、自ずとidやclass名が長くなります。単純にソースが見づらくなるような気がするし、パッとソースを見たときにげんなりしてしまいます。

英単語を調べるのが面倒

idやclass名には英語をつかうようにしています。CSS的には絶対にそうじゃないといけないわけではないと思うのですが。「.box」というのを「.hako」って書くのも、「んん・・・」って感じです。

ただ、BEM記法等をつかってCSSを記述する場合、汎用性があり過ぎる単語よりは、一言で「この部分」というのを表すようなある程度限定的な単語を使わないといけないはず。そうなると英語が全くわからない僕なんかは、一々英単語を調べなくてはいけなくなります。これがかなりストレスになりそう。

もちろん「書けない」よりは「書けるけど書かない」方が良い

とは言っても、こういった設計手法に則ったCSSを「書けない」よりは「書けた」方が絶対に良いです。「書けない」のと「書けるけど書かない」のは全く別物なので。それに、しばらく我慢して意識していけば恐らく慣れてしまうものだとも思います。

ただ、それでも何が何でもという気持ちにならないのも事実。個人的には、ある程度常識の範囲内で記述していくのであれば、これらの設計手法に無理にこだわる必要もないのかな、と思っています。