微信小程序CSS命名示例

小程序CSS命名方式尽量使用 BEM 命名 , Block+Element+Modify.

例如:

1
2
3
4
<view class="view__container">
    <icon class="view__container__icon"></icon>
    <text class="view__container__text"></text>
</view>

BEM规范

BEM 即(block,element,modifier)的命名方式

如:

1
2
3
4
-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态
type-block__element_modifier
B (block) 块

就是一个块级元素,类似于树的顶层,可以根据具体的页面内容的容器来分,或者根据页面来分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <div>
        <p>
            <span></span>
        </p>
    </div>
</html>

可以把上述结构分解成2种
1. html作为此页面的块级元素
2. div标签作为p标签和span标签的块级元素

一个块是设计或布局的一部分，它有具体且唯一地意义 ，要么是语义上的要么是视觉上的。
不过一般我个人并不会以第一种方式来分页面的结构.
我们可以在这个页面给html定义一个标识,如A(为此页面所有块级元素的前缀)
则div的类名可以为A-wrapper
<div class="A-wrapper"></div>
或
<div class="wrapper"></div>

一个块的正式（实际上是半正式的）定义有下面三个基本原则：

  1. CSS中只能使用类名（不能是ID）。
  2. 每一个块名应该有一个命名空间（前缀）
  3. 每一条CSS规则必须属于一个块。

如上,css选择器则可为:

1
2
3
.wrapper{}
/*或*/
.A-wrapper{}
E (element) 元素

块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。

如上例子,wrapper.text 是上述p标签

1
2
3
4
5
.wrapper{}
.wrapper .text{}

.wrapper{}
.wrapper__text{}
M (modifier) 修饰符

一个“修饰符”可以理解为一个块的特定状态，标识着它持有一个特定的属性。

  • 用一个例子来解释最好不过了。一个表示按钮的块默认有三个大小：小，中，大。为了避免创建三个不同的块，最好是在块上加修饰符。这个修饰符应该有个名字（比如：size ）和值（ small，normal 或者 big ）。
  • 如上面的例子中，表示一个选中的列表，和一个激活的列表项
1
2
3
4
5
6
7
8
9
.wrapper{}
.wrapper.active{}
.wrapper .text{}
.wrapper .text.active{}

.wrapper{}
.wrapper_active{}
.wrapper__text{}
.wrapper__text_active{}

__END__

o0Chivas0o
文章作者：o0Chivas0o
文章出处：微信小程序CSS命名规范
作者签名：Rich ? DoSomethingLike() : DoSomethingNeed()
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处