title: "CSS SASS 编码规范和命名约定" post_status: publish comment_status: open taxonomy: category: - woocommerce post_tag: - Contributing - Contribution - Repos

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 方法论文档。

简而言之

• 遵循 WordPress CSS 编码规范，除非它与此处的内容相矛盾。
• 遵循 Calypso 指南。
• 使用 BEM 进行 类名 的定义。
• 为所有内容添加前缀。