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 ...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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.I'd like @sylwia-lask 's thoughts on this :D
Hahaha, that’s such an interesting take! 😄
That “class” thing feels a bit like working on an old legacy project for so long that the bugs eventually start looking like features 😂
"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'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