CSS Modules 的命名规范是从 BEM 扩展而来。BEM 把样式名分为 3 个级别,分别是:html
综上,BEM 最终获得的 class 名为 dialog__confirm-button--highlight
。使用双符号__
和 --
是为了和区块内单词间的分隔符区分开来。虽然看起来有点奇怪,但 BEM 被很是多的大型项目和团队采用。咱们实践下来也很承认这种命名方法。spa
下划线模式在选择器名称下应该只能出现一次。BEM表明Block__Element--Modifier
,并非 Block__Element__Element--Modifier
。 所以,须要避免多个元素级别命名。这时若是你存在多层嵌套,你可能就须要从新审视你的组件结构了。code
<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>