This Website Has No Class
15 hours ago
- #HTML
- #Web Development
- #CSS
- The author reflects on their previous advice about using HTML elements like components and realizes they weren't fully following their own guidance.
- They decide to refactor their website by removing all CSS classes, embracing a class-free approach inspired by the CSS Zen Garden days.
- The CSS structure is organized into three layers: base, components, and utilities, with a focus on using tag selectors and eliminating utilities.
- The author explores contextual styling with modern CSS features like nesting, :where(), and :has(), but finds it can lead to overly complex selectors.
- They propose using custom tags and attributes as a solution, inspired by custom elements and web components, without relying on JavaScript.
- This approach leads to cleaner markup, reduced CSS size (~5KB), and improved accessibility, though it requires more careful planning.
- The author acknowledges that this method might not be suitable for all projects, especially those with varied frontend expertise.
- They admit to not fully eliminating classes, as they kept Eleventy's syntax highlighting plugin which uses classes.
- Overall, the author feels this exercise has significantly influenced their approach to web development, though they're not ready to adopt it universally.