Roma Komarov3d ago

#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.

Show threadBrian Douglas
@kizu how does the data-* thing work? Does that require the dash? Eg; “data-myValue”
Mar 25 at 2:18pmWeb
Show threadRoma Komarov3d 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