112 lines
No EOL
5.7 KiB
Markdown
112 lines
No EOL
5.7 KiB
Markdown
---
|
||
post_title: CSS styling for themes
|
||
sidebar_label: CSS styling for themes
|
||
---
|
||
|
||
# 主题的 CSS 样式
|
||
|
||
## 区块和组件类名
|
||
|
||
> [!IMPORTANT]
|
||
> 我们强烈建议不要基于现有的区块类名编写 CSS 代码，并优先使用全局样式。我们尤其不建议编写依赖于特定区块作为另一个区块后代的 CSS 选择器，因为用户可以自由移动区块，所以这些选择器很容易失效。与 WordPress 本身类似，我们认为组件、区块和区块模板内的 HTML 结构是“私密”的，未来可能会进一步更改，因此**不建议或不支持**使用 CSS 来定位区块或区块模板的内部结构。
|
||
|
||
WooCommerce Blocks 遵循 BEM 命名规范，如[我们的编码指南中所述](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/client/blocks/docs/contributors/coding-guidelines.md)。所有类名都以以下两个前缀之一开头：
|
||
|
||
- `.wc-block-`：特定于单个区块的类名。
|
||
- `.wc-block-components-`：特定于组件的类名。该组件可能被不同的区块重复使用。
|
||
|
||
区块类名和组件类名的组合允许主题全局地或仅在特定区块中对每个组件进行样式设置。例如，您可以使用以下代码将所有价格设置为斜体：
|
||
|
||
```css
|
||
/* 这将应用于所有区块价格 */
|
||
.wc-block-components-formatted-money-amount {
|
||
font-style: italic;
|
||
}
|
||
```
|
||
|
||
但如果你只想在结账区块中将其设为斜体，可以通过添加区块选择器来实现：
|
||
|
||
```css
|
||
/* 这将应用于结账区块中的价格 */
|
||
.wc-block-checkout .wc-block-components-formatted-money-amount {
|
||
font-style: italic;
|
||
}
|
||
```
|
||
|
||
**注意：** 为了向后兼容，某些组件可能同时具有两种前缀的类名（例如：`wc-block-sort-select` 和 `wc-block-components-sort-select`）。在这些情况下，带有 `.wc-block-` 前缀的类名已被弃用，不应在新代码中使用。它将在未来版本中被移除。如果一个元素同时具有两个类，请始终使用带有 `.wc-block-components-` 前缀的类进行样式设置。
|
||
|
||
## 容器查询类名
|
||
|
||
我们的一些组件具有根据容器宽度变化的响应式类。使用这些类而非 CSS 媒体查询的原因是为了适应区块被添加到的容器（CSS 媒体查询仅允许响应视口尺寸）。
|
||
|
||
这些类如下：
|
||
|
||
| 容器宽度 | 类名 |
|
||
| ------------ | ------------ |
|
||
| \>700px | `is-large` |
|
||
| 521px-700px | `is-medium` |
|
||
| 401px-520px | `is-small` |
|
||
| \<=400px | `is-mobile` |
|
||
|
||
例如，如果我们希望在容器宽度为 521px 或更宽时，将结账字体大小增加 10%，可以使用以下代码实现：
|
||
|
||
```css
|
||
.wc-block-checkout.is-medium,
|
||
.wc-block-checkout.is-large {
|
||
font-size: 1.1em;
|
||
}
|
||
```
|
||
|
||
### 购物车和结账区块的 CSS 容器查询
|
||
|
||
WooCommerce 将购物车和结账区块的顶层包装器定义为 CSS 容器。这些容器使用 `container-type: inline-size`：
|
||
|
||
```css
|
||
.wp-block-woocommerce-checkout {
|
||
container-type: inline-size;
|
||
}
|
||
```
|
||
|
||
开发者可以使用 CSS 容器查询 (`@container`) 根据父容器宽度来设置子组件的样式，从而无需使用由 JS 添加的类（例如被视为遗留的 `.is-large`）。为了向后兼容，遗留类仍然保留，但我们建议使用容器方法，以实现更简洁的样式和更少的布局偏移。
|
||
|
||
**注意：** 只要在结账区块包装器和要设置样式的元素之间没有其他容器，容器查询就能正常工作。如果您在主题或插件中定义了额外的 CSS 容器，它们可能会干扰容器查询的行为。
|
||
|
||
我们提供了 SCSS 混合宏作为便捷的辅助工具，用于定位之前由 `.is-large`、`.is-medium`、`.is-small` 和 `.is-mobile` 等类定义的相同宽度断点。这些混合宏使得根据容器宽度来设置购物车和结账区块内部内容的样式变得更加容易。
|
||
|
||
```scss
|
||
// 之前，使用 JS 生成的 CSS 类
|
||
.is-large {
|
||
.your-class {
|
||
padding: 2rem;
|
||
}
|
||
}
|
||
|
||
// 之后，使用容器混合宏
|
||
@include cart-checkout-large-container {
|
||
.your-class {
|
||
padding: 2rem;
|
||
}
|
||
}
|
||
```
|
||
|
||
// 后，使用纯 CSS
|
||
@container (min-width: 700px) {
|
||
.your-class {
|
||
padding: 2rem;
|
||
}
|
||
}
|
||
```
|
||
|
||
## WC 区块与主题样式在语义元素上的冲突
|
||
|
||
WooCommerce Blocks 根据语义含义而非默认布局来使用 HTML 元素。这意味着有时区块可能使用锚链接（`<a>`），但将其显示为按钮。或者反过来，一个 `<button>` 可能被显示为文本链接。同样，标题也可能被显示为常规文本。
|
||
|
||
在这些情况下，区块包含一些 CSS 重置，以撤销主题引入的大多数默认样式。一个显示为文本链接的 `<button>` 可能会重置背景、边框等样式。这将解决大多数开箱即用的冲突，但在某些情况下，如果主题具有更高特异性的特定 CSS 选择器，这些 CSS 重置可能不会生效。当这种情况发生时，我们强烈鼓励主题开发者降低其选择器的特异性，以便区块样式获得优先权；如果无法做到这一点，主题可以在顶部编写 CSS 重置。
|
||
|
||
## 隐藏元素
|
||
|
||
WC 区块使用 [`hidden` HTML 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) 来隐藏用户界面中的某些元素，使其既不在屏幕上显示，也不被辅助技术阅读。如果您的主题有一些通用的样式来调整区块元素的 CSS 显示属性（例如：`div { display: block; }`），请确保正确处理 hidden 属性：`div[hidden] { display: none; }`。
|
||
|
||
## WooCommerce 遗留类（.price、.star-rating、.button...）
|
||
|
||
WooCommerce Blocks 尽可能避免使用未加前缀的遗留类。但您可能会发现，为了向后兼容性，其中一些类已被添加。我们仍然鼓励主题在可能的情况下使用带前缀的类，这可以避免与其他插件、编辑器等发生冲突。 |
