Hacker News is a community-driven platform for sharing and discussing technology news, startups, and programming-related topics. Through user submissions and comments, Hacker News offers insights into emerging technology trends, industry developments, and entrepreneurial ventures. Readers can participate in discussions, share their insights, and stay informed about the latest advancements in technology and innovation.

Hacker News

The post argues against using CSS classes, considering them an outdated system that leads to various issues, such as combinatorial explosion and specificity conflicts. Instead, it suggests using modern web development tools like attributes, custom tag names, and custom states to better manage and style web components. The author critiques existing methodologies like BEM, Atomic CSS, and CSS Modules, highlighting their limitations and proposing attributes and custom tags as more robust alternatives.

CSS Classes considered harmful

There’s nothing new here, just an unconventional opinion on CSS architecture that’s been brought up before. The article centers on this sentence early in the article:
<blockquote>
If we continue to think of the class property as an analog to OOP Classes
</blockquote>
Don’t. They’re not analogous to OOP classes; they simply share a term. Atomic CSS is a great solution. CSS Modules is a great solution. Shadow DOM is a great solution. Nesting is a great/modern solution. Scoping/proximity is an bleeding edge solution that shows a lot of promise.
If you want to style with data attributes ala AMCSS, then note that you’re giving up niceties like <code>getElementsByClassName</code> and <code>classList</code>. Or if you like the approach above in the article, you can just do the same thing with classes. Yes, you’ll have specificity issues as the article points out but those same issues don’t magically go away with <code>data-*</code> attributes. As the article calls out, <code>:is</code>/<code>:where</code> to the rescue.

I’ve never had an idea to use data attribute to apply CSS styles. It is so simple yet shockingly good solution I’ve ever seen.
Good article.

Cool article, and I love the look and feel of your blog 😎
The article was well written too.
Data attribs seem like they might be overkill for a small project.
But an awesome idea for large projects 🙌🏻

basically AMCSS and stuff which were very much talked about over a decade+ ago:
<a href="https://amcss.github.io" target="_blank" rel="noopener nofollow">https://amcss.github.io</a>

I’m using data-attrs in the past 2 years on multiple applications at work. I always considered, specially on React applications, that the relation of a prop to a class was difficult to scale and to maintain readability. Nowadays, every time we build props related modifiers we use with data-attrs and I feel it is great.