gpttemp

doc/gpt1/item_01~05「继承母型 CSS 协议」（终版规则）.md

@@ -0,0 +1,212 @@
+下面给你 **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（或压缩包路径）贴一下即可。