class 命名技巧

class 命名技巧

CSS Modules 的命名規範是從 BEM 擴展而來。BEM 把樣式名分爲 3 個級別，分別是：

• Block：對應模塊名，如 Dialog
• Element：對應模塊中的節點名 Confirm Button
• Modifier：對應節點相關的狀態，如 disabled、highlight

綜上，BEM 最終獲得的 class 名爲 dialog__confirm-button--highlight。使用雙符號__ 和 -- 是爲了和區塊內單詞間的分隔符區分開來。雖然看起來有點奇怪，但 BEM 被很是多的大型項目和團隊採用。咱們實踐下來也很承認這種命名方法。

 

下劃線模式在選擇器名稱下應該只能出現一次。BEM表明Block__Element--Modifier,並非 Block__Element__Element--Modifier 。 所以，須要避免多個元素級別命名。這時若是你存在多層嵌套，你可能就須要從新審視你的組件結構了。

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Title text here</h2>
    </div>

    <div class="c-card__body">

        <img class="c-card__img" src="some-img.png" alt="description">
        <p class="c-card__text">Lorem ipsum dolor sit amet, consectetur</p>
        <p class="c-card__text">Adipiscing elit.
            <a href="/somelink.html" class="c-card__link">Pellentesque amet</a>
        </p>

    </div>
</div>