Over a million developers have joined DZone.

Classes and IDs: No CSS Exclusives

DZone's Guide to

Classes and IDs: No CSS Exclusives

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

When reading about classes and IDs these days, you'd start believing that they were invented exclusively for CSS and JS targeting. To the point where CSS and JS are actually dictating the rules for using classes and IDs. While it's true that CSS and JS are the primary languages that make use of them, they are not the ones laying down the rules. Classes and IDs are part of the HTML and are the HTMLer's responsibility.

Concessions can be made of course, after all we're talking web design here, but coming up with class/ID-related best practices based on the needs of CSS or JS is just plain wrong. The needs of different languages should definitely be consIDered, but in the end it's the responsibility of the CSSer or javascripter to adapt to the HTML, not the other way around.

The true function of classes and IDs is to open up the HTML to a variety of interested parties. Classes and IDs are hooks that other languages use to find what they need. Classes and IDs may not need semantic, but thinking of them as semantic abstractions makes it a lot easier for a HTMLer to IDentify what classes and IDs are needed to make the code accessible to all. A class like .fancyHeading is not a valID class under normal circumstances. It's a CSS-specific class that no other interested party would benefit from and only solves a problem that could've been better solved using CSS preprocessors.

The problem is that lack of HTML consistency is preventing other languages from actively querying our HTML code, so the dominance of CSS and JS remains. Forgoing the wealth of opportunities here and focusing on CSS and JS just further diminishes the power of classes and IDs. So let's stop messing up our HTML with language-specific classnames and IDs, instead focusing on drawing up HTML components and leaving the responsibility to deal with them in each respective language.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Published at DZone with permission of Niels Matthijs, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}