This isn't a long article, just a quick thought I just had.
It's no secret that one can use <custom-element>s in HTML without defining them in JS and use them only for styling.
One of the cool things about this is, ironically a restriction: Any element can only have one tag name, not several. A tag name isn't just a long list of different things that apply to an element, it's a singular statement on what it is.
That leads to an obvious question though: Isn't this what classes should be? And if that's how classes should really work, what should HTML/CSS classes be called instead?
I don't have strong thoughts on what it should be called; could be traits="...", could be mixin="...", could be anything else.
Point is, class="..." is a terrible name and should be thought of as one of those big mistakes in early web technology design, next to calling it "border-radius" rather than "corner-radius".
And despite the naming confusion, it is nice that we now have the tools to distinguish what an element is from what it does.
Top comments (16)
In most cases, you probably wouldn't need classes at all. Use props/data-attributes to define the variants. So instead of doing
<custom-element class="variant-1 primary"></custom-element>, maybe something like<custom-element variant="1" type="primary"></custom-element>... But that's like my opinion and me being me.Generally I agree, however that
typeattribute you use is exactly what I thinkclassis best used for: narrow down what kind ofcustom-elementsomething is supposed to be.classcould be a list of basically anything, the props/data-attributes would be unique value from an enum of values. Maybetypeis not the best name I could have picked for it (naming is complicated in programming), instead oftypeit could bevariantorpriorityorwhatever, that would be up to the team to decide. If you put it that way,classandtype(or however it is called) are similar but far from the same."traits" would have been quite a good name.
But there's nothing wrong with "class". It's "class" as in classification. We "classify" things, we don't normally "traitify" them.
And that's the point: Classes aren't a classification, they're traits. You don't normally "classify" an element by giving it a class tag, you assign additional traits to it.
CSS classes don't actually tell you what "class" of paragraph a
<p>is.For a start, classes are not CSS classes. They're a content attribute of HTML. Their purpose, when they were invented, not how they've been abused since, was not to classify the element, but to provide classifications of the content of the element.
Yes, and
border-radiuswas originally meant to add a radius to an element's border.I've never thought of it that way. I just think that class is good because it has one syllable and it's easy to remember.
I'd like @sylwia-lask 's thoughts on this :D
I'm not really sure I follow.
I suppose there's a benefit to using custom elements even if they're just for styling - if they have potential semantic meaning then they are there to be used in the future. It's just that maybe YAGNI and future developers are going to have to go on a little side-quest to find out if there's code somewhere that references it.
"class" as an attribute name works fine for me. This paragraph is in the same bucket as these others, etc. It only seems odd if you're using "class" the same as you might in an OO language. Coming from that background it might be better to use, "extends" or something. Yes, "traits" would probably be fine. But it's not an OO language!
Semantically, "utility-class framework" is the worst naming I've seen. You'd might say this paragraph has things in common with others, but it'd never be "others that have a padding of 5 pixels" because that's mind-blowingly unreasonable.
"Class" implies exclusivity, that's not just an OO thing. You're either in one class or another, but not both.
That's incorrect. You can be in the class of people who are over 18, the class of people with red hair, and the class of people who like kittens, all at the same time.
None of those are things people usually call "classes"
they named it
classso we forever have a brain fart (at least) once a year:document.querySelector("foo").class ="bar";Ah.. yes..
document.querySelector("foo").className ="bar";or
document.querySelector("foo").classList.add("bar");(if you are a bit younger)Maybe we should focus on real problems:
<h7>???My English (as non-native language) is pretty good, but I had to look up the word
trait.My first association was
traitorThe fact that there's numbered tags at all is honestly quite silly
🛡️ SHARD — Autonomous AI SIEM in one command:
docker run -d -p 8080:8080 shard19/shard-siem
✨ 10 neural networks
🛡️ Real-time defense
🤖 RL autonomous blocking
📱 Telegram alerts
github.com/misha622/shard-siem