CSS BEM 命名

【命名空间】

.ciss-

【类型】

1. 组件 / alert, card

.ciss-c-

2. 布局 / grid, column, row

.ciss-l-

3. 当前状态 / hover, focus, active, disable

.ciss-is-

4. 工具 / margin-top, padding-left

.ciss-u-

5. 行为 / trigger

.ciss-js-

【BEM命名示例】

1. Block 弹出框

.ciss-c-alert

2. Element 弹出框标题

.ciss-c-alert__title

.ciss-c-alert__content

.ciss-c-alert__input

.ciss-c-alert__content-input

3. Modifer 弹出框变种

.ciss-c-alert--error

【SASS】

1. 父

.ciss-c-alert { .ciss-l-header & { } }

2. 子

.ciss-c-alert { .ciss-c-alert__title { } }

3. 修饰符 交集

.ciss-c-alert { &--error { } }

4. 状态 交集

.ciss-c-alert { &.ciss-is-active { } }

5. 媒体查询

.ciss-c-alert { @meida all and (min-width: 40em) { } }