跳到主要内容

CSS SASS 编码规范和命名约定

我们的规范基于 Calypso 所使用的规范，而 Calypso 本身遵循 BEM 方法论。请参考 此文档 获取完整详情。但是，WooCommerce 存在一些差异，具体内容如下：

前缀​

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

类名​

Calypso 是使用 React 构建的，并使用组件名称来构建 CSS 类名。WooCommerce 核心没有这些组件，因此使用更传统的 BEM 方法来 命名类。

在添加类时，请记住以下内容：

  • Block - 独立的实体，本身具有意义。
  • Element - 块的组成部分，没有独立的意义。它们在语义上与块相关联。
  • Modifier - 块或元素的标志。使用它们来更改外观或行为。

示例​

  • .woocommerce-loop {} (块)。
  • .woocommerce-loop-product {} (嵌套块)。
  • .woocommerce-loop-product--sale {} (修饰符)。
  • .woocommerce-loop-product__link {} (元素)。
  • .woocommerce-loop-product__title {} (元素)。
  • .woocommerce-loop-product__price {} (元素)。
  • .woocommerce-loop-product__rating {} (元素)。
  • .woocommerce-loop-product__button-add-to-cart {} (元素)。
  • .woocommerce-loop-product__button-add-to-cart--added {} (修饰符)。

注意： .woocommerce-loop-product 不是选定的类名，因为 该块嵌套在 .woocommerce-loop 中。这是为了更具体，以便我们可以为单个产品、购物车产品等设置单独的类。嵌套块不需要继承其父级的全名。

您可以阅读有关 BEM 关键概念的更多信息，请参考 BEM 方法论文档。

简而言之​