A Classless CSS Experiment: Components via Custom Tags and Attributes

The author rebuilt their site without CSS classes, first trying deep contextual selectors and ultimately adopting custom element names and custom attributes to define components and variants. This yielded cleaner markup, better accessibility, and about 5KB of total CSS, but requires more planning and is not ideal for large teams. They’re convinced it’s valuable for personal projects, yet they still use classes where necessary (e.g., syntax highlighting).

Key Points

• Refactored the site to be class-free, leaning on semantic elements, contextual selectors, and styled defaults.
• Contextual styling alone became overly complex, prompting a move to custom tags and custom attributes for components and variants.
• Custom attributes provide true key–value semantics and, together with custom elements, align with progressive enhancement and potential web components.
• Outcomes: less CSS (~5KB), better accessibility, and cleaner markup—but increased authoring burden and planning complexity.
• Not absolutist: kept classes for syntax highlighting; approach is great for a personal site, less so for large, mixed-skill teams.