5.0 KiB
5.0 KiB
下面给你 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 合并时顺序建议：
item_base.cssitem_poster.css / item_media.css / item_rank.cssitem_01~05.css（若存在）behavior.css（若你还需要通用兜底）
2）Class 命名协议（决定“继承关系”）
每个 item 根节点必须同时包含：
- 通用根类：
{$TpStyle.dom_prefix}-item - 母型类（必须）：
poster/media/rank - 编号类（可选但推荐）：
item01/item02… - 行为类（来自 cfg.class）：
compact loose emphasis top collapsed grouped
示例（poster 强化）：
<article class="{$TpStyle.dom_prefix}-item poster item04 {$cfg.class}">
示例（榜单 Top 强化）：
<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
<article class="{$TpStyle.dom_prefix}-item poster item04 {$cfg.class}">
media：item_02
<article class="{$TpStyle.dom_prefix}-item media item02 {$cfg.class}">
rank：item_03 / item_05
<article class="{$TpStyle.dom_prefix}-item rank item05 {$cfg.class}">
你会发现：item_type 变量可以弱化 直接用母型类
poster/media/rank做继承入口最稳。
7）你接下来要做的两件事（落地清单）
- 把现有
item_01~05.css中“母型布局”部分迁移到：
- item_poster.css
- item_media.css
- item_rank.css
item_01~05.css只保留编号差异（可选）
如果你愿意，我可以下一步把你现有的 item_0105（你现在项目里的版本）按这份协议“自动拆分重构”，并给你一套最终文件清单：
05 的 CSS（或压缩包路径）贴一下即可。item_base.css + item_poster.css + item_media.css + item_rank.css + item_01~05.css（只保留微差异）。
你把当前 01