Component Tagging Strategies

Methods for identifying and tracking design system components in production code

Core Insight: Tag components to enable gradual migration and automated tracking

When to Apply

Legacy system migration → Updating existing products gradually
Adoption measurement → Tracking design system usage
Component auditing → Understanding current component landscape

Why This Works

✓ Gradual migration - Lukas (Microsoft): "Adoption slows when teams hesitate to rework entire products"
✓ Automated tracking - Enables tools to identify design system components
✓ Searchable codebase - Easy to find and update components across applications
✓ Testing integration - Data attributes work excellently for automated testing

Alternative Approaches

Generic HTML elements - Simpler to implement → Impossible to track or migrate systematically
Custom CSS classes only - Works for styling → Doesn't provide component metadata
Manual tracking - Full control → Doesn't scale, becomes outdated quickly

Quick Example

<!-- Class-based (Fluent UI) -->
<button type="button" class="fui-Button r1alrhcs">Click me</button>

<!-- Element renaming (Nord) -->
<nord-input id="email" label="Email"></nord-input>

<!-- Data attributes (Carbon) -->
<div class="c4d--masthead" data-autoid="c4d--masthead__navigation"></div>

Markdown Documentation Strategy - Documenting tagged components
Multiple Themes - Managing tags across theme variations

Sources: Microsoft Fluent 2 Session • March 2025