Jonathan Dallas2d ago
Roma Komarov

#HTML attribute names and #CSS values should be camelCased.

- “shadowRootMode”, not “shadowrootmode”
- “deepPink”, not “deeppink”
- etc.

They’re case-insensitive, and there is no reason to choose the worse version.

Mar 25 at 12:53pmWeb
Show threadRoma Komarov2d ago
This post is brought to you by shadowRootCustomElementRegistry.
Show threadDima2d ago
@kizu look, this naming convention is a traditional ancestral right of Java, and CSS should not appropriate it. Consider the reverse camel case instead: sHADOWrOOTcUSTOMeLEMENTrEGISTRY, isn't it a beauty? /s
Show threadDima2d ago
@kizu (I've been using Java for work last three years, and I miss python's snake_case)
Show threadmasukomi1d ago

@kizu or snake_cased or kebab-cased because both are far more readable especially for people with lower vision or reading disabilities.

If you’re going to choose a superior option because it is supported than choose one that isn’t just slightly better, but *much* better for more people

Show threadVadim Makeev2d ago
@kizu That’s what I keep telling to the German language 🥲 But seriously, it somehow seems to me like lowercase attributes say “I’m case-insensitive”, and lowerCase ones say “I’m case-sensitive”. For example, viewBox in SVG is a good example: it’s case-sensitive, and I want to convey this message. But also, currentcolor in my CSS is always lowercase for visual consistency, sorry!
Show threadBrian Douglas2d ago
@kizu how does the data-* thing work? Does that require the dash? Eg; “data-myValue”
Show threadRoma Komarov2d ago
@brianwdouglas For custom things, I'd use kebab-case all the time to make those attributes stand out even more, so `data-my-value`, and only use camelCase for built-in attributes.
Show threadBrian Douglas2d ago
@kizu Looks like the snake case attributes for data-* are converted to camelCase by default. See image.
Show threadBrian Douglas2d ago

@kizu Docs for the above.

> note that dashes are converted to camel case

https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes#javascript_access

Use data attributes - HTML | MDN

HTML is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

MDN Web Docs
Show threadGrace Vulpes Alopex2d ago
@kizu

I'd have to actively be paying attention to what I'm typing to type in camelcase, and I just don't do that
Show threadAmelia Bellamy-Royds2d ago

@kizu I agree on CSS colors, because I haven't found any cases where I've had issues from that.

Mixing case on HTML attributes gets messy if you're also doing any scripting that references or sets those attributes, since you don't get parser clean-up in all cases & DOM properties use camel-case to represent things that are hyphen-separated in the markup attributes.

Show threadRoma Komarov2d ago

@AmeliaBR Ah, the benefits of only using CSS :D

But even when scripting, I’d rather jump through more hoops when writing JS and keep the HTML more readable than do otherwise.