为什么 CSS 选择器 HTML 属性首选破折号？

Question

在 CSS 中，我们可以使用属性选择器来选择具有特定属性值的 HTML 元素。但是，在选择 HTML 属性时，您可能会注意到一些人使用破折号作为属性名称中单词之间的分隔符，而不是使用驼峰或下划线。

好处

使用破折号作为属性名称中单词之间的分隔符是因为它具有以下优点：

1. 可读性

破折号分隔符可以使属性名称更易于阅读和理解。在属性名称中使用破折号可以清晰地分隔单词，使开发者更加容易地理解属性的作用。

例如， font-size 意味着设置字体大小，而 fontSize 可能会被误读为一个单词，导致开发者错误地理解该属性的含义。

2. 语义化

在语义化方面，使用破折号可以使属性名称更具描述性。破折号已经成为了一种约定俗成的方式来描述与 HTML 元素相关的属性。

例如， border-radius 更容易理解为设置元素的圆角，而且用下划线或驼峰命名方式描述时，名称并没有那么直观。

3. 兼容性

使用破折号与关键字匹配更容易。在 CSS 中，伪类使用“:`”来表示，如果以驼峰或下划线命名方式来写选择器，兼容性可能会存在问题。

例如， :first-child 是一个伪类选择器，如果我们使用驼峰命名方式来描述 firstChild ，我们会发现样式并没有生效，在这个例子中，样式选择器应该写作 :first-child 。

总结

总而言之，在 CSS 中，使用破折号作为属性名称中单词之间的分隔符是一种约定俗成的方式，它具有可读性、语义化和兼容性等优点，值得开发者们学习和使用。