D7460N dragontheory
By: Adam Marostica
Posted: 2025.10.15
In this article, I want to explore how we can use CSS's powerful attribute selectors to manage component states (traditionally handled by JavaScript) directly within our stylesheets.
Why? Because too often, our styling logic ends up living in our JavaScript, wrapped in ternaries, helper functions, and conditional class names. Sure it works, but it also couples behavior and appearance more tightly than it needs to. Moving some of that logic into CSS makes our components simpler, more declarative, and easier to reason about. With a minor shift in mindset, we can get CSS to do more of what it's already great at: styling by state.
| [user] | |
| name = Pavan Kumar Sunkara | |
| email = [email protected] | |
| username = pksunkara | |
| [init] | |
| defaultBranch = master | |
| [core] | |
| editor = nvim | |
| whitespace = fix,-indent-with-non-tab,trailing-space,cr-at-eol | |
| pager = delta |
Date: 2025-04-25
In web development, declarative means expressing desired outcomes using standard browser features—without scripting how to achieve them.
You describe what the browser should do. The browser handles how to do it.
By contrast, imperative code tells the browser step-by-step how to perform a task using JavaScript or external logic.
Source: MDN Web Docs
Maintainer: Mozilla Contributors
Last Reviewed: 2024
To be framework-agnostic means building user interfaces that are not tied to—or dependent on—any specific JavaScript framework. It’s not about rejecting frameworks, but about building with portability, independence, and longevity in mind.
- ✅ Compatible, Not Exclusive: This approach works alongside React, Vue, Angular, or Web Components. It’s additive—not competitive.
- ✅ Decoupled Architecture: Native HTML/CSS structure stays intact no matter which framework (if any) is layered on top.
- ✅ Progressive Integration: Teams can adopt or phase out frameworks without rewriting foundational UI code.
- ✅ Flexible Use of Frameworks: You can introduce a framework only where needed, keeping the rest declarative and native.