Learn how to use data attributes to represent UI state and level up your HTML and CSS game.

30Seconds is a platform for sharing and discovering quick tips, life hacks, and practical advice on a wide range of topics. Through user submissions and comments, 30Seconds offers insights into productivity tips, wellness advice, cooking hacks, and parenting strategies. Readers can learn something new in just 30 seconds and contribute their own tips and advice to help others improve their lives.

30 seconds of code

Representing UI state in HTML using data attributes is more flexible and scalable than using classes. It allows for explicit and debuggable representation of state, and avoids problems with conflicting styles.

Use data attributes instead of HTML classes to represent state

<p>data attributes are the most underutilized feature of the web, alongside Query parameters. Those two things alone can do like 98% of everything you need on the web and make the experience easier to understand.</p>
