CSS设计 命名规范 BEM

1.全局命名空间

所有与设计系统相关的classes都添加一个全局命名空间，这个空间名一般是公司名(company name):

.cn-

2.class前缀

除了添加全局命名空间，给类添加前缀用于表明这个类主要职责是什么，有以下几种常用前缀：

1. c: 表示UI components，例如 .cn-c-card 或者 .cn-c-header
2. l: 表示layout相关的样式， 例如 cn-l-grid__item or cn-l--two-column
3. u: 表示utilities, 工具， 例如 .cn-u-margin-bottom-double or .cn-u-padding-right
4. is- , has-: 表示特定的状态， 例如 .cn-is-active or .cn-is-disabled
5. js-: 表示js特定的功能， 例如 .js-modal-trigger,这种类不能绑定样式，只负责行为方面

3.BEM 语法

BEM 表示 Block-Element-Modifier:

• Block: 是基本的组件块(component block), 例如 .cn-c-card or .cn-c-btn
• Element: 是基本组件块下的子元素， 例如 .cn-c-card__title
• Modifier: 是组件样式的变种， 例如 .cn-c-alert--error

这种比喻方式很流行，结合命名空间，类前缀，允许我们创建更加显示的，封装性良好的class names.

4.把所有的结合起来： 一个class的解剖

结合全局命名空间，类前缀和BEM语法导致一个显式的(没错，同时也很冗长)类字符串，这能够推断出UI的作用是什么。

看下示例1：

.cn-c-btn--secondary
// 分析
cn-: 设计系统中所有样式的全局命名空间
c-: class的分类， 'c-' 表示 组件
btn: block name(Block)
--secondary: 修饰符，表示样式的变种(Modifier)

示例2：

.cn-l-grid__item
// 分析
cn-: 命名空间
l-: class的分类， 'l-' 表示布局相关
grid: block name(Block)
__item: 元素（Element）

示例3：

.cn-c-primary-nav__submenu
// 分析
cn-: 命名空间
c-: class的分类， 表示组件
primary-nav: block name
__submenu: 元素

5.其他技巧

1.SASS 父选择器

在哪里放置给定的CSS规则是一个问题，假如一个我们想给一个primary navigation组件调节对齐问题，这个primary navigation位于一个header组件中，我们可以使用sass 父选择器：

.cn-c-primary-nav {
    /*
     * Nav出现在Header,右对齐
     */
    
    .cn-c-header & {
        margin-left: auto
    }
}

这意味着primary navigation的样式能放在 primary navigation Sass partial中，而不是把它们拆分成对各文件

2.SASS嵌套显式规则

SASS的嵌套十分的方便，但是可能会导致特别长的选择器，有个原则就是：嵌套永远不要超过3层， 保持CSS设计扁平的原则，我们可以通过下面4中途径减少嵌套：

1. 给block添加Modifiers(Modifiers of a style block)
2. 媒体查询(Media queries)
3. 父选择器(parent selectors)
4. 状态(states)

组件块修饰符

对于修饰符，如果规则只有几行，修饰符可以嵌套在符元素中：

.cn-c-alert {
  border: 1px solid #ccc;
  color: gray;

  // 错误警告
  &--error {
    border-color: red;
    color: red
  } 
}

媒体查询

组件特定的媒体查询能够嵌套在组件块里面：

.cn-c-primary-nav {
  // 基本样式

  @meida all and (min-width: 40em) {
    display: flex;
  }
}

状态

状态包括 hover, focus, active, 还有工具类 is-, has-

.cn-c-accordion__panel {
  overflow: hidden;
  max-height: 0;

  &.cn-is-active {
    max-height: 40em;
  }
}

总结

1. 原文链接 CSS设计架构
2. SASS嵌套选择的规则
3. 很详细的一份指导：CSS指南 BEM
4. CSS 架构探讨及BEM
5. CSS轻设计指导（书）
6. BEM命名规范探讨
7. 维护设计系统