Pushing BEM to the next level with Sass 3.4
With the release of the new parent selector in Sass 3.4 it is possible to deal with your selector as you do with lists. I thought this must be damn usable for your BEM (block element modifier) mixins. .test { @debug type-of(&); //returns list }Problems with the parent selector in Sass 3.3The parent selector has already been reworked in Sass 3.3. Since then you could combine the selector with any k
Sassの変数命名規則とBEM
$type-subtype-component-contextというような形でSassの変数を命名していたけど、これにもBEMを使うかという感じになってきた。ただでさえ長いのが、セパレーターで更に長くなるけど、元々そんなに短くないので気にしないことにした。BEMをクラス名で使うような形で単純に利用するケースと、3.3で導入される予定のマップを使って構造化して定義し、複雑に参照するケースを比較して検証している。 検索ボックスに使う、以下の8つの色の変数定義を例にする。 検索フォーム 背景色 入力フォーム 文字色 背景色 枠線色 フォーカス 枠線色 ボタン 文字色 背景色 オンマウス 枠線色 BEMを使った簡単な実装 $color-bg_searchbox: #f9f9f9; $color-fg_searchbox__input: black; $color-bg_searchbox__inp
SassとBEM
SCSSファイルを整理し直している時、一気にBEMなクラスを使って書きなおしてやろうかとも考えていた。けど途中でSassならSCSSファイルの分割とその中での工夫によってBEMの構造を表現できそうと感じたので、今はそういう方向で試行錯誤している。実際BEMのウェブサイトでもファイルシステムを使ったBEMの表現方法という似た話が書かれているので荒唐無稽な考えではなさそう。 SCSSファイル名でblockを表現 その中でplaceholder selectorを使ってelementとmodifierを表現 外からはこのplaceholder selectorは使わない 既存のマークアップを利用したセレクターから@extendでBEM構造を関連付け HTMLファイルではBEMなクラスは振らない 必要な場合はシンプルなクラスを振る イメージはこのような感じ。HTMLでのマークアップの簡潔さは維持で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
