.cn-
2.class前缀
除了添加全局命名空间之外，给类添加前缀是用来表明这个类的主要职责是什么。常见的前缀有以下几种：
c: 表示UI components，如.cn-c-card或.cn-c-headerl: 表示layout相关的样式，如cn-l-grid__itemorcn-l--two-columnu: 表示utilities, 工具，如.cn-u-margin- Bottom-doubleor .cn-u-padding-rightis- , has-: 表示特定的状态，如.cn-is-activeor.cn-is-disabledjs-: 表示js特定的功能，如.js-modal-trigger，该类不能绑定样式，只能对行为负责010- 1010 BEM 表示Block-Element-Modifier:
Block: 是基本组件块，例如cn-c-cardor.cn-c-btnElement: 是基本组件块下的子元素，例如cn-c-card__titleModifier:是组件样式的变体，例如.cn-c-alert--error。这个比喻很流行。结合命名空间和类前缀，它允许我们创建更明确且封装良好的类名。
3.BEM 语法
组合全局命名空间、类前缀和BEM 语法会产生显式（是的，也是详细的）类字符串，可用于推断UI 的功能。
看一下示例1：
.cn-c-btn--次要
//分析
cn-: 为系统中所有样式设计全局命名空间
c-: 类别分类，“c-”表示组件
btn: 区块名称(Block)
--secondary:修饰符，表示样式变体（Modifier）示例2：
.cn-l-grid__item
//分析
cn-: 命名空间
l-:类的分类，"l-"表示布局相关
grid: 区块名称(Block)
__item: 元素示例3：
.cn-c-primary-nav__submenu
//分析
cn-: 命名空间
c-: 类分类，指示组件
Primary-nav: 块名称
__submenu: 元素
4.把所有的结合起来： 一个class的解剖
5.其他技巧
在哪里放置给定的CSS 规则是一个问题。如果我们想调整位于标题组件中的主导航组件的对齐方式，我们可以使用sass 父选择器：
.cn-c-primary-nav {
/*
* 导航出现在标题中，右对齐
*/
.cn-c-标头{
margin-left: 自动
}
}这意味着主导航样式可以放置在主导航Sass 部分中，而不是将它们拆分为单独的文件。
1.SASS 父选择器
SASS嵌套非常方便，但是可能会导致选择器特别长，有个原则就是：嵌套永远不要超过3层， 保持CSS设计扁平的原则。我们可以通过以下4种方式减少嵌套：
将修饰符（样式块的修饰符）添加到块（媒体查询） 父选择器（状态）组件块修饰符对于修饰符，如果规则只有几行，修饰符可以嵌套在符号元素中：
.cn-c-警报{
border: 1px实心#ccc；
颜色：灰色；
//错误警告
- 错误{
边框颜色：红色；
颜色： 红色
}
媒体查询特定于组件的媒体查询可以嵌套在组件块内：
.cn-c-primary-nav {
//基本样式
@meida all 和(min-width: 40em) {
显示：柔性；
}
}状态状态包括悬停、焦点、活动和工具类is-, has-.cn-c-accordion__panel {
溢出：隐藏；
最大高度： 0;
.cn-is-active {
最大高度： 40em；
}
}总结
关于高效CSS设计：BEM命名规范指南到此分享完毕，希望能帮助到您。
【高效CSS设计：BEM命名规范指南】相关文章：
用户评论
BEM 指导规范 really useful for 大规模项目吧
有15位网友表示赞同！
学了 BEM 后发现我的代码可读性提高了很多
有9位网友表示赞同！
平时写 CSS 总是混乱，学习一下 BEM 试试看!
有12位网友表示赞同！
BEM 可以帮助我们更精准地定位样式元素，太赞了！
有19位网友表示赞同！
之前没听过 BEM，今天开始学习，感觉很有意思。
有10位网友表示赞同！
理解 BEM 的思路很关键，这样才能更好地运用它。
有7位网友表示赞同！
推荐大家学习 BEM，不仅提高代码效率，而且更容易维护。
有19位网友表示赞同！
想做个整齐美观的网页，BEM 是不错的选择！
有16位网友表示赞同！
项目越来越大了，BEM 就显得愈发重要了。
有18位网友表示赞同！
现在很多前端规范都提倡用 BEM 了啊！
有5位网友表示赞同！
BEM 的命名规则让我感觉清爽了不少。
有11位网友表示赞同！
CSS 代码整洁，也让调试变得更加方便。
有11位网友表示赞同！
学习新技术需要不断实践，试试 BEm 在实际项目中的应用效果吧！
有11位网友表示赞同！
BEM 可以有效避免 CSS 的重复使用和命名冲突。
有6位网友表示赞同！
看了一些 BEm 示例案例，感觉很有灵感。
有15位网友表示赞同！
BEM 确实能让我们写出更清晰、可维护的 CSS 代码。
有9位网友表示赞同！
学习 BEM 后，CSS 代码的组织架构更加明了了！
有15位网友表示赞同！
前端开发要不断学习新知，BEM 就是一个很好的学习方向。
有15位网友表示赞同！
BEM 使代码结构更加合理，提高了团队合作效率。
有12位网友表示赞同！
想要打造更专业的前端作品，BEM 是必不可少的技能！
有12位网友表示赞同！