D7460N dragontheory

Styling by State: How to make CSS do JS

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.

The Problem with Classes

💡 What Does "Declarative" Mean?

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.

Occam’s Razor Law in UX

Source: uxhints.com

Entia non sunt multiplicanda praeter necessitatem
(Latin): Entities should not be multiplied beyond necessity.

When faced with multiple competing explanations or hypotheses, one should prefer the simplest explanation with the fewest assumptions.

🔍 `<search>`: The generic search element

Source: MDN Web Docs
Maintainer: Mozilla Contributors
Last Reviewed: 2024

✅

Baseline 2023 - `Newly available`

Since October 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

🧷 What does "Framework-Agnostic" Mean?

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.

🔍 Why This Matters (Especially for Framework Developers)

✅ 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.

🧩 Benefits of Microinteractions in Web Designing

💡 Micro-interactions are small moments where the user and design interact. When they are well designed, micro-interaction enhances the user’s experience with the design. When they are poorly designed, they damage the experience.

🎯 The micro-interactions are small, suitable animations or feedback that occur in an app or website. They give a better user experience by providing visual cues and responsiveness. For example, a button changing color when clicked is a micro-interaction.

🔄 Various Types of Micro-interactions are:

🔘 Buttons: The buttons are usually interactive elements that respond when you click or tap.

🧩 UI Is Not UX

Author: D7460N
Context: Architecture principles for framework agnostic, standards-based, role-aware, accessible SPAs

🧠🖼️ UI Is Not UX

UI (User Interface) is what users see and interact with 🖱️. It’s the visible structure: HTML markup, CSS styles, and controls that expose functionality.

UAT Documentation (Part 2) : : Accessibility and Usability Acceptance Criteria

Companion to : : UAT Documentation (Part 1) : : Accessibility and Usability Requirements

📚 References

UAT Documentation (Part 1) : : Accessibility and Usability Requirements

✨ Context

Federal mandates and corporate policies require digital products to meet defined accessibility and usability standards. Incorporating them early in the development process aligns with compliance requirements and helps avoid rework, audit issues, and preventable user barriers.

	[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