Edited at

BEMを使ったサイトを取集してみる

More than 3 years have passed since last update.

BEMを参考にしたCSS設計を更新したいけど、その前に情報収集。

BEMの手法を使ったサイトはどのくらいあるのだろう?

というわけで収集してみる。


BEMでコーディングされたサイト


Wii U|Nintendo

よく見ると部分的にBEMが採用されている感じ。コンテンツを入れ替えた時にコーディングポリシーを変更したのかも。

トップページはBEMではなくOOCSSっぽい。

BEMで書かれている部分は、BEMのお作法に従い(-)ハイフンつなぎ。

フッターとjsを無効にした時の画面用のコーディングはOOCSSらしく、単語は(_)アンスコつなぎ。

SVGのclassは(_)アンスコ、idは(-)ハイフンつなぎのようだ。

BEMはidは使わないのだが、このページにはidが多数使われている。

idはローワーキャメルケースか(_)アンスコで単語をつなげている感じ。

コードの書き方がいくつか混在しているようで、じっくり確認した方がよさそうなものの、ひとまずBEM系のコーディングと言うことでメモ。


SONY

一瞬違うかな?と思いきや、BEMを使ったコーディングであることは間違いなさそう。

s5-はプレフィックスらしく、よーく見るとBEMの形式で書かれている。

「BlockやElementを2つ以上の単語で表すときは(-)でつなぐ」というBEMの基本的なお作法は使用されておらず、単語のつなぎはローワーキャメルケースを使用しているようです。

ちょっと驚いたのが


html

 <meta charset="shift_jis">


の一行でしょうか。

また、インデントがないコーディングなので、コードを見る側としては、ちょっと見づらかったりしますw

以下、確認しながら記事を書いてるので、ちょちょろ追記していく予定ですw