SuperAPI AI 工具集

theme-shopify-css-guidelines

前端与建站

查看项目

更新于 10-16 01:37

技能介绍

用途:为 Shopify 主题的 section 编写 CSS 时提供命名、嵌套与封装规范,适用于命名类名、判断是否使用 CSS 嵌套、以及封装 section 样式等场景。

主要能力与规则: 命名采用 BEM 方法,结构为 .block、.block__element、.block__element--modifier;类名应简短、语义化、有意图,避免通用或基于视觉的描述(如 .red-button、.big-text、.container)。

封装(encapsulation):允许用于避免 section 之间样式泄漏、保护 section 不受主题级样式影响,但仅限 section 作用域内;每个 section 应拥有自己的作用域样式。

CSS 嵌套:允许原生 CSS 嵌套,但规则严格——仅用于需要封装的场合,如 section 级命名空间、section 内 block 到 element 结构、伪类与状态修饰符;嵌套必须保持在 section 作用域内,层级尽量少(最多 1–2 层),用于 BEM 结构时形如 .block { .block__element {} }。禁止超过 2 层的深层嵌套、跨 block 依赖、以及假设嵌套样式可全局复用。

结构建议:每个 section 一个独立 CSS 文件,文件中包含 section 包裹层、头部、主内容区、条目及其 hover 状态和媒体查询等作用域样式;不要把多个 section 混在同一个文件里。

限制:仅适用于 Shopify 主题 section 的 CSS 编写;文档未提供安装命令、收费、价格或平台等其它信息。