This Website Has No Class

This Website Has No Class Date: September 14, 2025 The author revisits a previous idea from their post “There’s no such thing as a CSS reset” where HTML elements are seen as pre-packed components you can directly use. However, they realized they weren’t fully applying this advice and set out to refactor their site by completely removing CSS classes. This approach was last tried during the CSS Zen Garden era and now revisited with modern HTML and CSS capabilities. --- Doubling Down on Styled Defaults The author structured CSS into three cascade layers: base (tag selectors for default styling) components utilities (fully eliminated in refactor) They began by reviewing markup to increase semantic usage and employed contextual element styling instead of relying on class selectors. For example, styling a header directly inside the body rather than targeting classes like .header-primary. Modern CSS features such as nesting, :where(), and :has() made this method more viable than in the past. However, extreme contextual styling led to complex, overloaded selectors—highlighted by a selector targeting list items containing adjacent links and paragraphs. --- Custom Tags & Custom Attributes To overcome the challenges of complex selectors, the author adopted ideas inspired by custom elements and web components — but without JavaScript. Custom tag names and attributes (e.g., , [shape-type="1"]) are fully valid HTML and allow both: Defining components via custom tags Managing variants via true key-value attribute pairs instead of BEM-style class names Example CSS for a custom tag might be: And for a custom attribute used as a variant: The author argues dropping the data- prefix allows richer semantics and that while these methods resemble class replacements, they offer a more coherent, end-to-end system of tags and attributes. --- Would I Do This Again? Benefits: Significant CSS reduction (~5 KB total CSS sent over the network) Better accessibility thanks to more semantic markup Cleaner and more maintainable HTML Drawbacks: Requires more careful planning and discipline from authors Not ideal for large projects with mixed frontend skill levels Using custom tags can sometimes reduce semantic clarity or require extra wrapper elements, which feels less ideal The author expresses mixed feelings: they don’t yet see this as the perfect universal method but feel it definitely influences their future work. They also note a small compromise—some CSS classes remain due to third-party syntax highlighting plugins, as a fully class-free syntax highlighting solution wasn’t satisfactory. --- Summary This post documents an experiment in building a modern personal website without CSS classes, relying instead on: Styled default elements Contextual CSS selectors Custom tags and attributes to define components and variants This approach results in cleaner markup, smaller CSS payloads, and improved accessibility, though it demands more from the developer and may not suit all projects. It challenges the conventional reliance on classes and could push frontend development toward a new paradigm focusing on meaningful tags and attributes all the way down. --- For more notes, visit: Read more notes