Sassの変数を使って少し快適にBEMを使う - Qiita
cssのクラスをBEMを参考に命名しています。これにより名前の衝突の可能性を下げ安心してcssを書いていくことができます。反面、文字数が長くなるので打つのも読むの大変になります。 .my-awesome-block { padding: 20px; } .my-awesome-block__element-1 { > p { font-size: 16px; } } .my-wesome-block--modifier { .my-awesome-block__element-1 { > p { font-size: 24px; } } } $block: ".my-awesome-block"; $block-modified: "#{$block}__modifier": $element1: "#{$block}__element-1"; #{$block} { padding: 2
現在のプロジェクトで使用している CSS 設計ルール (BEM ベース) のまとめ - Qiita
この記事は、現在僕が携わっているひだまりプロジェクト (仮称) で使用している CSS 設計ルールについてまとめたものです。 ベースとなる CSS 設計 BEM (MindBEMding) BEM 自体についての説明は省略します。 一部 SMACSS を参考にした独自ルールを取り入れています。詳しくは後述します。 (1) Element をネストしない BEM を使用する際の大原則として block__element という対応関係を厳守します。 NG category__item__name は block__element1__element2 と Element がネストしています。 <head> <style> .category-list {} .category-list__item {} .category-list__item__name {} </style> </hea
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
