213 lines
5.0 KiB
Markdown
213 lines
5.0 KiB
Markdown
下面给你 **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（或压缩包路径）贴一下即可。
|