Bem规范 && 命名空间

一个好的架构所需的4个标准:

  • 类必须尽量少地添加,避免HTML膨胀
  • 可以立即知道组件是否使用Javascript
  • 可以立即知道是否可以安全的编辑一个类而不会影响其他
  • 立即知道每个class是适用于什么,以防大脑过载

Bem规范 [block-element-modifier]

  .block { /*styles*/}   // 块
  .block __element { /*styles*/} // 元素
  .block-- modifier{ /*styles*/}  // 修饰符

  eg:
   
     
   
元素

Tips:
Bem规范可以使class的数量尽量少。
可立即知道一个class放在这个伟大工程的哪边,以防大脑过载。
尽量不要链式命名BEM元素 比如:.commnets__commet-title。

命名空间

  • .l- 布局
    面向对象的CSS(OOCSS):表层与结构的分离。
    即影响块或其元素的属性应该被抽象为一个单独的类用于重复利用。
    在CSS中,定位块的行为也称为布局块。
    我们可分为全局布局 & 块级布局。全局布局是应用于所有页面的布局,每个块(对象或组件)有自己的布局。
  • .o- 对象
    最小构建块,它们里面不能包含其他对象或组件。比如button
    对象独立于上下文,不会改变网站结构,即不能包含以下属性:

  • absolute 和 fixed定位

  • margin

  • padding

  • float 等

  • .c- 组件
    组件可以任何位置可以引用的,可以注意下响应式。

  • .js javascript的钩子
    表示该对象/组件是否需要JavaScript

  
  • .is-/.has- 状态类
    表示对象/组件的当前状态, 当应用状态类时,可以立即知道对象/组件是否具有下拉(.has-dropdown)或当前处于打开状态(.is-open)
.object { &.is-animating { /*styles*/}}
  • .t或.s 排版类

  • .t1 - 最大的字体大小。

  • .t2 - 第二大字体大小。

  • .s1 - 第一字体大小较小的基本字体大小

  • .u- 实用类
    通常只包含一个属性,并且包含!important声明。

相关参考:
编写模块化CSS:BEM
编写模块化的CSS:命名空间 © w3cplus.com

你可能感兴趣的:(Bem规范 && 命名空间)