为什么普通的HTML / JS（和React）使用camelCase进行样式设置，而CSS不这样做？

Question

有关样式的不同技术需要使用不同的约定来命名某些属性，主要是camelCase与连字符样式

直接通过JS在HTML DOM节点上设置样式-element.style.paddingTop =“ 12px”;

在React中内联设置样式-<组件样式= {{paddingTop：“ 12px”}} />

在.CSS文件中进行设置-.selector {padding-top：12px}

使用不同规则的根本原因是什么？我不明白为什么这比使用camelCase的所有HTML / CSS / JS更好，或者比所有使用连字符样式的HTML / CSS / JS更好。

Answer 1

在JavaScript中，由于语法规则， kebab-case 不适合。标识符中不允许使用-，因此padding-top对于变量或属性名称无效。

在CSS中， camelCase 不是一个好习惯，因为CSS不区分大小写。 className和classname是CSS的相同标识符。