# Blog CSS Component-Specific Analysis Report

**Generated:** 2026-01-18

## Post Card Component Analysis

### Classes Defined
- `.post-card` - Base card container
- `.post-card--compact` - Compact variant
- `.post-card-link` - Card link wrapper
- `.post-card-image-wrapper` - Image container
- `.post-card-image` - Image element
- `.post-card-content` - Content container
- `.post-card-category` - Category badge
- `.post-card-category--lexikon` - Lexikon variant
- `.post-card-category--ratgeber` - Ratgeber variant
- `.post-card-category--inside-ordio` - Inside Ordio variant
- `.post-card-category--dienstplan` - Dienstplan variant
- `.post-card-category--zeiterfassung` - Zeiterfassung variant
- `.post-card-title` - Title element
- `.post-card-excerpt` - Excerpt text
- `.post-card-dates` - Date container
- `.post-card-date` - Publication date
- `.post-card-date-icon` - Date icon
- `.post-card-date-text` - Date text
- `.post-card-updated-date` - Updated date
- `.post-card-updated-icon` - Updated icon
- `.post-card-updated-text` - Updated text

### Usage Status
**✅ All classes are USED** - Found in `PostCard.php`:
- Classes are used via PHP string concatenation: `class="post-card <?php echo $is_compact ? 'post-card--compact' : ''; ?>"`
- Category classes are dynamically added: `post-card-category--<?php echo $category; ?>`
- Static analysis may miss PHP concatenation

### Recommendations
- **Keep all classes** - All are actively used
- **No changes needed** - Component is well-structured

## Blog TOC Component Analysis

### Classes Defined
- `.blog-toc` - Main TOC container
- `.blog-toc-nav` - Navigation element
- `.blog-toc-item` - TOC item
- `.blog-toc-item--active` - Active state
- `.blog-toc-item--h2` - H2 level item
- `.blog-toc-item--h3` - H3 level item
- `.blog-toc-item--h4` - H4 level item
- `.blog-toc-group` - H2 group container
- `.blog-toc-toggle` - Expand/collapse button
- `.blog-toc-chevron` - Chevron icon
- `.blog-toc-children` - H3 children container

### Usage Status
**✅ All classes are USED** - Found in `BlogTOC.php`:
- `.blog-toc-item--active` is used dynamically via Alpine.js: `x-bind:class="...blog-toc-item--active..."`
- Static analysis doesn't detect Alpine.js dynamic classes
- `.blog-toc-item--h4` may be used for future H4 support

### Recommendations
- **Keep all classes** - All are used (some dynamically)
- **Consider**: `.blog-toc-item--h4` might be future-proofing, verify if H4 headings exist in posts

## Image Lightbox Component Analysis

### Classes Defined
- `.blog-image-lightbox-modal` - Modal container
- `.blog-image-lightbox-close` - Close button
- `.blog-image-lightbox-container` - Image container
- `.blog-image-lightbox-image` - Lightbox image
- `.blog-image-lightbox-trigger` - Clickable image wrapper

### Usage Status
**✅ All classes are USED**:
- `.blog-image-lightbox-trigger` is added dynamically during content extraction/wrapping
- Found in `PostContent.php` processing and content extraction scripts
- Static analysis doesn't detect classes added by content processing

### Recommendations
- **Keep all classes** - All are actively used
- **No changes needed**

## Post Header Component Analysis

### Classes Defined
- `.post-header` - Header container
- `.post-header-content` - Content wrapper
- `.post-header-category` - Category container
- `.post-header-category-link` - Category link
- `.post-header-category--lexikon` - Lexikon variant
- `.post-header-category--ratgeber` - Ratgeber variant
- `.post-header-category--inside-ordio` - Inside Ordio variant
- `.post-header-title` - Title (H1)
- `.post-header-meta` - Meta information container
- `.post-header-date` - Publication date
- `.post-header-updated-date` - Updated date
- `.post-header-author` - Author information
- `.post-header-reading-time` - Reading time
- `.post-header-image-wrapper` - Featured image container
- `.post-header-image` - Featured image

### Usage Status
**✅ All classes are USED** - Found in `PostHeader.php`:
- `.post-header-category-link` is used: `class="...post-header-category-link <?php echo $category_class; ?>"`
- Static analysis may miss PHP string concatenation

### Recommendations
- **Keep all classes** - All are actively used
- **No changes needed**

## Post Content Component Analysis

### Classes Defined
- `.post-content` - Content wrapper
- `.post-content-inner` - Inner content container

### HTML Element Styles
Extensive styling for HTML elements within `.post-content-inner`:
- Headings (h1-h6)
- Paragraphs
- Lists (ul, ol, li)
- Links (a)
- Images (img)
- Blockquotes
- Code (code, pre)
- Tables
- Figures
- Videos
- Embeds

### Usage Status
**✅ All styles are USED** - Blog post HTML content uses these elements:
- Content is pre-processed and stored in JSON
- HTML elements are rendered in post content
- All element styles are needed for proper formatting

### Recommendations
- **Keep all element styles** - All are used in blog post content
- **Consider**: Some WordPress embed classes (`.wp-block-*`) may be legacy - verify if still needed

## Pagination & Filter Component Analysis

### Classes Defined
- `.blog-pagination` - Pagination container
- `.blog-pagination-wrapper` - Wrapper element
- `.blog-pagination-button` - Pagination button
- `.blog-pagination-button--prev` - Previous button
- `.blog-pagination-button--next` - Next button
- `.blog-pagination-button--number` - Number button
- `.blog-pagination-numbers` - Numbers container
- `.blog-filter-buttons-wrapper` - Filter wrapper
- `.blog-filter-buttons` - Filter buttons container
- `.blog-filter-button` - Filter button
- `.blog-filter-label` - Filter label
- `.blog-filter-badge` - Filter badge/count

### Usage Status
**✅ All classes are USED** - Found in blog index and category pages:
- Used in `index.php` and `category.php`
- Alpine.js may add active states dynamically

### Recommendations
- **Keep all classes** - All are actively used
- **No changes needed**

## Summary

### Key Findings

1. **False Positives in Unused Analysis**: Many "unused" classes are actually used via:
   - PHP string concatenation (not detected by static analysis)
   - Alpine.js dynamic classes (`x-bind:class`)
   - Content processing (classes added during extraction)

2. **All Component Classes Are Used**: Every component class identified is actively used in templates or dynamically added

3. **WordPress Classes**: Some `.wp-block-*` classes are still used for embed styling - verify if these are needed after migration

### Recommendations

1. **Improve Static Analysis**: Update analysis scripts to detect:
   - PHP string concatenation in class attributes
   - Alpine.js `x-bind:class` patterns
   - Content processing that adds classes

2. **Verify WordPress Classes**: Check if `.wp-block-embed*` classes are still needed or can be replaced

3. **Document Dynamic Usage**: Add comments in CSS explaining classes added dynamically

4. **No Removal Needed**: Based on this analysis, component classes should NOT be removed without further verification