Why does vanilla HTML/JS (and React) use camelCase for stylings, while CSS does not? [closed]

Question

Different pieces of technology regarding styling require different conventions for naming certain properties, mainly camelCase vs. hyphenated-style

Setting styles directly on an HTML DOM Node via JS - element.style.paddingTop = "12px";

Setting styles inline in React - < Component style={{paddingTop: "12px"}} />

Setting it in a .CSS file - .selector {padding-top: 12px}

What is the underlying reason for the different rules? I don't see why this is better than all of HTML/CSS/JS using camelCase, or all of it using hyphenated-style.

Answer 1

In JavaScript, kebab-case doesn't fit because of syntax rule. - is not allowed in identifier so padding-top is not valid for variable or property name.

In CSS, camelCase is not a good practice because CSS is case-insensitive. className and classname is the same identifier for CSS.