以下内容若有问题烦请即时告知我予以修改,以免误导更多人。
- 连字符分隔
- OOCSS
- NEC
- 区分
- 示例
- BEM
- 区分
- 连接
- 示例
- 痛点
连字符分隔
1 | <div class="card"> |
OOCSS
结构和样式分离
需求:有一个容器是页面page的1/4宽,有一个蓝色的背景,1px灰色的边框,10px的左右边距,5px的上边距,10px的下边距
- 非OOCSS写法
1 | <div class="size1of4"></div> |
1 | .size1of4 { |
- OOCSS写法
1
<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>
1 | .size1of4 {width: 25%;} |
NEC
区分
布局(grid)
.g-
: eg:头部,尾部,主体,侧栏等模块(module)
.m-
: 较大整体,eg:导航、登录注册、搜索等元件(unit)
.u-
: 不可再分个体,eg:按钮、input框等功能(function)
.f-
: 使用频率较高样式,eg:清除浮动皮肤(skin)
.s-
: eg:文字色,背景色,边框色等状态
.z-
: eg:hover,选中等特殊
.j-
: 被专用于JS获取节点,请勿使用.j-定义样式。
示例
1 | /* 布局 */ |
BEM
区分
B
块(block)E
元素(element)M
修饰符(modifier)
连接
__
双下划线: 间隔 块和元素.block__elem
-
中划线: 间隔块、元素、修饰符中多个单词.block-name__elem-name
.block-name--modifier-modifier1
--
双中划线: 间隔 块和修饰符 或 元素和修饰符.block__elem--modifier
示例
- B嵌套E
1 | <div class="card"> |
- B多层嵌套E
1 | <div class="card"> |
1 | .card { |
- M修饰B/E
1 | <div class="card card--red"> |
1 | <button class="button"> |
痛点
- 命名较长
- 会存在修饰符下的元素结构不清晰
1 | .card { |
更多内容可以订阅本人微信公众号,一起开启前端小白进阶的世界!