theme-shopify-css-guidelines

Shopify CSS 指南

Shopify 主题开发中的 CSS 命名约定、嵌套规则和封装实践。

适用场景

• 为 Shopify 主题分区编写 CSS
• 为 CSS 类命名
• 决定何时使用 CSS 嵌套
• 封装分区样式

CSS 命名——BEM 方法论

在分区内部使用 BEM（Block Element Modifier） 方法论来组织结构：

.block {}
.block__element {}
.block__element--modifier {}

命名规则

• 类名应当简短、语义明确且有目的性
• 避免使用笼统或基于视觉外观的命名
• 使用 BEM 结构：.block__element--modifier

示例

/* Good - BEM structure */
.product-card {}
.product-card__image {}
.product-card__title {}
.product-card__price {}
.product-card__button {}
.product-card__button--primary {}

/* Bad - generic or visual naming */
.red-button {}
.big-text {}
.container {}

CSS 作用域与封装

允许封装：

• 避免不同分区之间的样式泄漏
• 保护分区不受主题级样式影响
• 仅限分区作用域内

每个分区都应使用自身的作用域样式，以防止冲突。

CSS 嵌套

允许使用原生 CSS 嵌套，但必须遵守严格规则。

何时使用嵌套

仅在需要封装时使用嵌套：

• 分区级命名空间
• 分区内部的 Block → element 结构
• 伪类和状态修饰符

嵌套规则

• 嵌套必须保持在分区作用域内
• 尽量减少嵌套深度（最多 1–2 层）
• 使用嵌套来组织 BEM 结构：.block { .block__element {} }

允许的使用场景

/* Section-level namespacing */
.featured-collection {
  padding: 2rem;
}

.featured-collection__grid {
  display: grid;
  gap: 1rem;
}

.featured-collection__item {
  /* Block element */
}

.featured-collection__item:hover {
  /* Pseudo-class */
}

.featured-collection__item--featured {
  /* Modifier */
}

不允许

• 深层嵌套（超过 2 层）
• 跨 Block 依赖
• 假设嵌套样式可全局复用

/* Bad - too deep */
.section {
  .block {
    .element {
      .sub-element {
        /* 3+ levels - avoid */
      }
    }
  }
}

/* Bad - cross-block dependency */
.section-a {
  .section-b__element {
    /* Don't style other sections' elements */
  }
}

分区 CSS 结构

每个分区都应有自己的 CSS 文件，并使用作用域样式：

/* featured-collection.css */
.featured-collection {
  /* Section wrapper */
}

.featured-collection__header {
  /* Section header */
}

.featured-collection__grid {
  /* Main content area */
}

.featured-collection__item {
  /* Grid item */
}

.featured-collection__item:hover {
  /* Hover state */
}

@media (max-width: 749px) {
  .featured-collection__grid {
    /* Mobile styles */
  }
}

Shopify 主题文档

请参考以下 Shopify 官方资源：

• Shopify 模板
• Liquid 过滤器（用于处理 CSS 资源）

说明

1. 分区中的所有类名都使用 BEM 命名
2. 保持名称具有语义——描述用途，而非外观
3. 在分区作用域内封装样式
4. 将嵌套限制在最多 1–2 层
5. 每个分区对应一个 CSS 文件——切勿混用多个分区
6. 仅将嵌套用于 BEM 结构和伪类