下面给你 **A：item_01~05「继承母型 CSS 协议」（终版规则）**。
目标是：以后你再加 item_06/07… 或做子变体，只需要“挂 class + 少量覆写”，不再复制粘贴一堆 CSS、也不会互相污染。

---

# 1）目录与加载顺序协议（必须固定）

> 关键：**先 base，再 type，再 item，再 behavior（可选）**

推荐文件结构：

```
/static/css/list/
  item_base.css            （所有 item 的共用基础，必须）
  item_poster.css          （poster 母型：item_01 / item_04）
  item_media.css           （media 母型：item_02）
  item_rank.css            （rank/text 母型：item_03 / item_05）

  item_01.css              （可选：仅做微差异）
  item_02.css              （可选）
  item_03.css              （可选）
  item_04.css              （可选）
  item_05.css              （可选）

  behavior.css             （可选：通用行为兜底）
```

CSS 合并时顺序建议：

1. `item_base.css`
2. `item_poster.css / item_media.css / item_rank.css`
3. `item_01~05.css`（若存在）
4. `behavior.css`（若你还需要通用兜底）

---

# 2）Class 命名协议（决定“继承关系”）

每个 item 根节点必须同时包含：

* **通用根类**：`{$TpStyle.dom_prefix}-item`
* **母型类（必须）**：`poster` / `media` / `rank`
* **编号类（可选但推荐）**：`item01` / `item02`…
* **行为类（来自 cfg.class）**：`compact loose emphasis top collapsed grouped`

示例（poster 强化）：

```html
<article class="{$TpStyle.dom_prefix}-item poster item04 {$cfg.class}">
```

示例（榜单 Top 强化）：

```html
<article class="{$TpStyle.dom_prefix}-item rank item05 {$cfg.class}">
```

---

# 3）CSS 分层协议（禁止越界）

## 3.1 item_base.css（只做“骨架”，不做形态）

允许写：

* link 基础
* 标题/元信息基础字体
* cover img 通用 object-fit
* 通用截断/间距（轻）

禁止写：

* grid 列数
* poster/media/rank 的布局（这些归 type）
* 任何写死颜色（只用主题变量）

---

## 3.2 type CSS（母型决定“形态”）

### item_poster.css（封面型）

只负责：

* `.poster` 的 cover 比例
* poster 信息区排布
* poster 的角标位置规范

### item_media.css（横向信息流）

只负责：

* `.media` 使用 flex row
* media cover 宽度/比例
* info 区垂直居中

### item_rank.css（榜单型）

只负责：

* `.rank` 的序号/标题/meta 横向布局
* Top 强化钩子（`top`）

---

## 3.3 item_0X.css（编号层：微差异，不允许改母型核心）

允许：

* 字体大小微调
* border-radius 微调
* meta 显示/隐藏（通过 class）
* badge 形态

禁止：

* 改 poster/media/rank 的整体布局方式
* 写通用选择器污染其他 item（例如 `.poster .__PFX__-item-cover{}` 这种应该在 type）

---

## 3.4 behavior.css（行为兜底层，可选）

如果你已经在 type 里适配了 `compact/loose/emphasis/top`，这里可以很薄。

允许：

* `.collapsed` 隐藏第 N 条后内容
* `.emphasis` 容器弱装饰兜底
* `.grouped` 兜底边框背景

禁止：

* 具体 item 的细节样式（那属于 item_0X 或 type）

---

# 4）选择器范围协议（避免串样）

必须遵守“前缀+组件域”：

* ✅ `.__PFX__-item ...`
* ✅ `.__PFX__-item.poster ...`
* ✅ `.__PFX__-item.media ...`
* ✅ `.__PFX__-item.rank ...`

禁止：

* ❌ `.poster .__PFX__-item-cover`（范围太大，可能影响别的模块）
* ❌ `img{}` / `a{}` / `.title{}` 这类全局污染

---

# 5）主题色协议（v1.4 已定，这里重申到 item）

item CSS 禁止写死颜色，只能用：

* `var(--primary-color)`
* `var(--secondary-color)`
* `var(--accent-color)`
* `var(--bg-color)`
* `var(--bg-soft-color)`
* `var(--text-color)`
* `var(--text-muted-color)`
* `var(--border-color)`
* `var(--shadow-color)`

例外：
**仅允许**类似 `rgba(0,0,0,.65)` 这种“遮罩透明度”，但不允许固定纯色背景块。

---

# 6）推荐你现在的“继承落地模板”（最终写法）

## poster：item_01 / item_04

```html
<article class="{$TpStyle.dom_prefix}-item poster item04 {$cfg.class}">
```

## media：item_02

```html
<article class="{$TpStyle.dom_prefix}-item media item02 {$cfg.class}">
```

## rank：item_03 / item_05

```html
<article class="{$TpStyle.dom_prefix}-item rank item05 {$cfg.class}">
```

> 你会发现：**item_type 变量可以弱化**
> 直接用母型类 `poster/media/rank` 做继承入口最稳。

---

# 7）你接下来要做的两件事（落地清单）

1. 把现有 `item_01~05.css` 中“母型布局”部分迁移到：

* item_poster.css
* item_media.css
* item_rank.css

2. `item_01~05.css` 只保留编号差异（可选）

---

如果你愿意，我可以下一步把你现有的 item_01~05（你现在项目里的版本）按这份协议“自动拆分重构”，并给你一套最终文件清单：
`item_base.css + item_poster.css + item_media.css + item_rank.css + item_01~05.css`（只保留微差异）。
你把当前 01~05 的 CSS（或压缩包路径）贴一下即可。