BEMというCSSの命名規則がある。とても冗長的で、コーディングには時間がかかる。
しかし保守運用フェーズに移った時に効力を発揮する。
BEMは3つの概念で考える。
1. Block→箱(親要素)
2. Element→箱の中の部品(子要素)
3. Modifier→部品の中の装飾(状態)
1. Blockは出来るだけ2つ以上の単語として命名。
2. BlockにつながるElementsは__(アンダースコア2つ)で繋ぐ。
3. Modifierは–(ハイフン2つ)で繋ぐ
例えば以下のように宣言していく。非常に冗長的だ。
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="mainBlock"> <h1 class="mainBlock__title">タイトルです。</h1> <p class="mainBlock__paragraph">てすとてすと</p> <div class="mainBlock__underAria"> <div class="mainBlock__left"> <p>ししししししししし</p> </div> <div class="mainBlock__right"> <p class="mainBlock__right__paragraph">てすとととととと</p> </div> </div> </div> |
そしてCSSは以下のように書く。
スポンサードリンク
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.mainBlock { width: 980px; &__title { font-weight: bold; font-size: 3.6rem; } &__mainBlock__paragraph { font-weight: normal; font-size: 1.6rem; color: #333; } &__mainBlock__underAria { width: 100%; background-color: #5a2a50; $__mainBlock__left { float: left; p { font-size: 1.6rem; } } $__mainBlock__right { float: right; $__mainBlock__right__paragraph { color: #456127; } } } } |
あまりにも冗長的なので、アンダースコアを一つにしたりする人も多い。