# Blog CSS Split Mapping

**Last Updated:** 2026-02-24

## Overview

This document records the selector-to-page-type mapping used to split `blog.css` into `blog-base.css`, `blog-index.css`, and `blog-post.css`. The mapping is generated by `v2/scripts/blog/blog-selector-page-mapping.py` and stored in `blog-selector-page-mapping.json`.

## Split Assignment Summary

| File | Selectors | Purpose |
|------|-----------|---------|
| **blog-base.css** | 75 | Shared across index, category, post, topic-hub (variables, post-card, breadcrumbs, pagination, post-header-category-link) |
| **blog-index.css** | 88 | Index/category/topic-hub only (hero, category cards, filters, pillar visuals) |
| **blog-post.css** | 29 | Post-only (post-header, post-content, TOC, related, FAQ, lightbox) |

## Spot-Check Validation (15 selectors)

| Selector | Assigned | Verified In |
|----------|----------|-------------|
| `post-card` | base | PostCard.php (index, category, post, topic_hub) ✓ |
| `post-card-category` | base | PostCard.php, PillarCardCarousel.php ✓ |
| `breadcrumbs` | base | Breadcrumbs.php (post, category, topic_hub) ✓ |
| `pagination` | base | Pagination.php (index, category) ✓ |
| `post-header-category-link` | base | PillarHeroSideBySide.php (index), PostHeader.php (post) ✓ |
| `blog-index-hero` | index | BlogIndexHero.php (index only) ✓ |
| `category-card` | index | CategoryCards.php, CategoryCardsRelated.php (index) ✓ |
| `blog-filter-button` | index | index.php (index only) ✓ |
| `pillar-hero-sidebyside` | index | PillarHeroSideBySide.php (index) ✓ |
| `topic-hub-hero` | index | TopicHubHero.php (topic_hub) ✓ |
| `post-content-inner` | post | PostContent.php (post only) ✓ |
| `blog-toc` | post | BlogTOC.php (post only) ✓ |
| `blog-faq` | post | BlogFAQ.php (post only) ✓ |
| `blog-image-lightbox-modal` | post | BlogImageLightbox.php (post only) ✓ |
| `post-header-title` | post | PostHeader.php (post only) ✓ |

## Content HTML Selectors

Selectors used in `.post-content-inner` (e.g. `h1`, `h2`, `p`, `ul`, `blockquote`, `.wp-block-*`, `.formula-block`, `.blog-note`) are treated as post-only since they appear in content HTML rendered by PostContent.php.

## Shared vs Page-Specific Rules

- **Shared (base):** Variables (`:root`), `body.blog-page`, `[x-cloak]`, post-card, breadcrumbs, pagination, related-posts, skeleton-card, post-header-category-link (used by PillarHeroSideBySide on index and PostHeader on post)
- **Index-only:** blog-index-hero, category-card, category-nav, blog-filter, pillar-hero, pillar-visual, topic-hub-hero, blog-posts-section
- **Post-only:** post-header (full), post-content, post-content-inner, blog-toc, blog-faq, blog-image-lightbox, blog-related-carousel

## How to Run

```bash
python3 v2/scripts/blog/blog-selector-page-mapping.py
```

Output: `docs/analysis/blog-selector-page-mapping.json`

## Split Logic

1. **base:** All 4 page types OR 3+ page types OR used by both index-side (index/category/topic_hub) and post
2. **post:** Post-only (no index, category, topic_hub)
3. **index:** Index/category/topic_hub only (no post)