CSS的BEM規範學習筆記

時間 2019-11-10

標籤 css bem 規範學習筆記欄目 CSS 简体版

原文原文鏈接

塊（Block）

/* 常規寫法和BEM寫法相同 */
.list

元素(Element)

塊中的子元素是塊的子元素，而且子元素的子元素在 bem 裏也被認爲是塊的直接子元素。一個塊中元素的類名必須用父級塊的名稱做爲前綴。
如上面的例子，li.item 是列表的一個子元素css

/* 常規寫法 */
.list{}
.list .item{}

/* BEM寫法 */
.list{}
.list__item{}

修飾符(modifier)

一個「修飾符」能夠理解爲一個塊的特定狀態
好比html

多種顏色的按鈕前端

.btn-list{}
.btn-list .btn_red{}
.btn-list .btn_green{}

.btn-list{}
.btn-list__btn_red{}
.btn-list__btn_green{}

被激活的列表項sass

.list{}
.list.select{}
.list .item{}
.list .item.active{}

.list{}
.list_select{}
.list__item{}
.list__item_active{}

書寫原則

原則上不會出現2層以上選擇器嵌套

推薦寫法

<ul class="xxx">
    <li class="xxx__item">第一項
        <div class="xxx__product-name">我是名稱</div>
        <span class="xxx__ming-zi-ke-yi-hen-chang">看類名</span>
        <a href="#" class="xxx__link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_current">第二項 且 當前選擇項
        <div class="xxx__product-name">我是名稱</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_hightlight">第三項 且 特殊高亮
         <div class="xxx__product-name">我是名稱</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
</ul>

.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

// 嵌套寫法
.xxx__item_current{
    .xxx__link{}
}

無心義的__

<section class="comments"> 
    <h2 class="comments__title"></h2> 
    <article class="comments__comment"> 
        <h3 class="comments__comment-title"></h3> 
    </article> 
    <article class="comments__comment"> 
        <h3 class="comments__comment-title"></h3> 
    </article> 
    <!-- ... --> 
</section>

用新的塊來保存新元素

<section class="comments"> 
    <h2 class="comments__title"></h2> 
    <article class="comment"> 
        <h3 class="comment-title"></h3> 
    </article> 
    <article class="comment"> 
        <h3 class="comment-title"></h3> 
    </article> 
    <!-- ... --> 
</section>

這樣作更有意義less