跳到主要内容

CSS/Sass 命名规范

简介​

我们的规范基于 Calypso 的规范，而 Calypso 又遵循 BEM 方法论。

请参考 Calypso CSS/Sass 编码规范 以获取完整详情。

更多关于 BEM 核心概念 的信息，请阅读相关文档。

在 WooCommerce 中，有一些与上述规范略有不同的地方，具体内容如下所述。

前缀​

由于 WooCommerce 是一个 WordPress 插件，因此必须与 WordPress 核心以及其他插件/主题兼容。为了最大限度地减少潜在的冲突，所有类名都应以 .woocommerce- 开头。

类名​

在命名类名时，请记住以下几点：

  • Block (块) - 独立的实体，本身具有意义。例如，组件的名称。
  • Element (元素) - 块的组成部分，本身没有独立意义。它们在语义上与所属的块相关联。
  • Modifier (修饰符) - 用于块或元素的标志。使用它们来改变外观或行为。

示例​

/* Block (块) */
.woocommerce-loop {}

/* Nested block (嵌套块) */
.woocommerce-loop-product {}

/* Modifier (修饰符) */
.woocommerce-loop-product--sale {}

/* Element (元素) */
.woocommerce-loop-product__link {}

/* Element (元素) */
.woocommerce-loop-product__button-add-to-cart {}

/* Modifier (修饰符) */
.woocommerce-loop-product__button-add-to-cart--added {}

注意: .woocommerce-loop-product 并非以这种方式命名，因为该块嵌套在 .woocommerce-loop 内部。 这样做是为了更具体，以便我们能够为单个产品、购物车产品等设置单独的类名。 嵌套块不需要继承其父级的全名。

总结​