最近書いてるCSSの構造とか

このエントリーは「CSS Architecture Advent Calendar 2014」、8日目の記事です。
以下あたりを先日読みましてなんだか触発されたのと、「CSS Architecture Advent Calendar 2014」が結構あいていたので書いておきます。

基本的にはBEMな感じ

先の3つのエントリーではBEMのような厳格な感じではなく…、という点が重要なようにも読めますけども、僕は基本的にはBEMです。
ただ、「.block__element」のさらに中など、ちゃんと書いてればclassの衝突が起きるはずもないというとことかでは、「.text」だったり「.image」のようなとても一般的なクラス名を利用しています。

BEMだけどELEMENTまではBLOCKを起点にしたセレクタ

BEMの場合、「.block__element」は一意なclassなんで、「.block .block__element」などとセレクトせずに「.block__element」単体でセレクトしましょうっというのが、BEMにおける一般論だと思いますが、僕の場合は必ず「.block .block__element」でセレクトしています。
なんというか、その方が固そうで良さそうということもあるし、一から組むのであればほとんどの案件で「normalize.css」を使ってるということもあります。

normalize.css」を使っている場合、必要に応じてBLOCK単位でmarginを0にするなどの指定をしていまして、そうすると以下のようなスタイルが書かれます。

.block h2,
.block p {
	margin: 0;
}

そうした上で、あるELEMENTではmarginをキッチリ指定したいとなると、「.block__element」でセレクトしただけでは詳細度的に弱いのでダメなんですよね。
まぁ、指定したい値があるんなら最初からELEMENTにだけ指定すれば良いだろっていうことかもしれないんですけど、BLOCK単位で0にしたい時があるじゃないっすか。

SCSSはBLOCK単位で

これは上記のterkel.jpさんの記事で書かれている内容と同じことですね。
今までは昔のmod組みのなごりもあって、_mod_BLOCK名.scssみたいな名前になってたんですけど、これを機に_bl_BLOCK名.scssなんかにしようかなと思います。
やはりterkel.jpさんの記事にあるように、BLOCK名がかぶったりするのを避けられるのが利点です。

だいたいそんな感じでしょうか。

comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

TrackBack URL :