为什么在CSS选择器/ HTML属性中首选使用破折号？

小编典典

为什么在CSS选择器/ HTML属性中首选使用破折号？

css

过去，我一直使用下划线在HTML中定义类和 id 属性。在过去的几年中，我改用破折号，主要是为了使自己适应社区中的趋势，而不一定是因为这对我来说很有意义。

我一直认为破折号有更多弊端，但我看不出这样做的好处：

代码完成和编辑

大多数编辑器都将破折号视为单词分隔符，因此我无法浏览所需的符号。假设课程为“ featured-product”，我必须自动完成“
featured”，输入连字符，然后完成“ product”。

带下划线的“ featured_product”被视为一个单词，因此可以一步完成。

这同样适用于浏览文档。单词跳动或双击类名会被连字符打断。

（更一般而言，我将类和id视为令牌，因此对令牌而言，令牌应该很容易拆分对我来说没有任何意义。）

算术运算符的歧义

使用破折号会中断对象属性对JavaScript中表单元素的访问。只有下划线才有可能：

form.first_name.value='Stormageddon';

（不可否认，我本人不是以这种方式访问表单元素的，但是在将破折号和下划线作为通用规则时，请考虑可能有人使用。框架中）已经以破折号作为标准，甚至对于变量名也是如此。他们最初也使用下划线。这被不同地解析的事实令我感到奇怪：

$list-item-10
$list-item - 10

与跨语言的变量命名不一致

以前，我曾经用underscored_namesPHP，ruby，HTML / CSS和JavaScript
编写变量。这是方便且一致的，但是再次为了“适合”我现在使用：

dash-case 在HTML / CSS中
camelCase 在JavaScript中
underscore_case 在PHP和ruby中

这实际上并没有给我带来太大的困扰，但是我想知道为什么它们似乎如此故意地错位了。至少使用下划线可以保持一致性：

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

所以我问：为什么社区几乎普遍使用破折号，并且有什么理由超过下划线？

在开始时有一个相关的问题，但我认为这不是（或 不应该
）只是一个品味问题。我想了解一下，如果确实只是出于口味问题，为什么我们都同意这个约定。

阅读 493

2020-05-16

共1个答案

小编典典

代码完成

我猜破折号是解释为标点符号还是不透明标识符取决于选择的编辑器。但是，根据个人喜好，我更喜欢能够在CSS文件中的每个单词之间切换，并且如果它们之间用下划线分隔并且没有停顿的话，会很烦人。

另外，使用连字符允许您利用| =属性选择器，该选择器选择包含文本的任何元素，并可以选择后面跟一个破折号：

span[class|="em"] { font-style: italic; }

这将使以下HTML元素具有斜体字体样式：

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

算术运算符的歧义

我想说的是，通过JavaScript中的点符号访问HTML元素是一个错误而不是功能。这是从可怕的JavaScript实现的早期开始就构成的可怕结构，实际上并不是一个好习惯。对于如今使用JavaScript所做的大多数事情，无论如何，您都想使用[CSS选择器从DOM中获取元素，这使得整个点符号变得毫无用处。您想要哪一个？

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

我发现前两个选项更为可取，尤其是因为'#first-name'可以将其替换为JavaScript变量并动态构建。我还发现它们在眼睛上更令人愉快。

Sass在其对CSS的扩展中启用算术的事实并不真正适用于CSS本身，但我确实理解（并接受）Sass遵循CSS的语言样式（$变量的前缀除外，这一事实当然应该一直@）。如果Sass文档的外观和感觉像CSS文档，则它们需要遵循与CSS相同的样式，即使用破折号作为分隔符。在CSS3中，算术仅限于该calc函数，这表明在CSS本身中，这不是问题。

与跨语言的变量命名不一致

所有语言（作为标记语言，编程语言，样式语言或脚本语言）都有自己的样式。您可以在XML之类的语言组的子语言中找到它，例如XSLT使用带连字符分隔符的小写字母，而XMLSchema使用驼峰式。

通常，您会发现，采用一种感觉和外观对您正在编写的语言最“原生”的样式比尝试将自己的样式塞入每种不同的语言要好。由于无法避免使用本机库和语言构造，因此无论您是否喜欢，您的样式都会被本机样式“污染”，因此即使尝试也不用。

我的建议是不要在所有语言中找到喜欢的样式，而要使自己在每种语言中都处于家中，并学会热爱它的所有怪癖。CSS的一个怪癖是关键字和标识符以小写形式并由连字符分隔。就个人而言，我觉得这在视觉上非常吸引人，并认为它与全小写（尽管没有连字符）的HTML都适合。

2020-05-16