首页 文章

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

提问于
浏览 次
200

在过去，我总是使用下划线来定义HTML中的class和id属性 . 在过去的几年里，我改为破折号，主要是为了让自己与trend in the community保持一致，不一定是因为它对我有意义 .

我一直认为破折号有更多的缺点，我没有看到它的好处：

代码完成和编辑

大多数编辑器将破折号视为单词分隔符，因此我无法通过选项卡切换到我想要的符号 . 说该课程是“ featured-product ", I have to auto-complete " featured ", enter a hyphen, and complete " product ” .

下划线“ featured_product ”被视为一个单词，因此可以一步填充 .

这同样适用于浏览文档 . 通过单词跳转或双击类名会被连字符打破 .

（更一般地说，我认为类和ID是标记，所以对我来说，标记应该在连字符上很容易拆分是没有意义的 . ）

算术运算符的歧义

使用破折号会破坏JavaScript中的object-property access to form elements . 这只能用下划线表示：

form.first_name.value='Stormageddon';

（不可否认，我自己并不以这种方式访问表单元素，但是当决定破折号和下划线作为通用规则时，请考虑某人可能 . ）

像Sass这样的语言（特别是在整个Compass框架中）已经以破折号作为标准，即使对于变量名也是如此 . 他们最初也开始使用下划线 . 这被解析的事实让我感到奇怪：

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

跨语言的变量命名不一致

在当天，我曾经在PHP，ruby，HTML / CSS和JavaScript中为变量编写 underscored_names . 这是方便和一致的，但为了"fit in"我现在使用：

HTML / CSS中的

  • dash-case
    JavaScript中的
  • camelCase
    在PHP和ruby中
  • underscore_case

这对我来说并没有太多困扰，但我想知道为什么这些看起来如此错位，似乎是故意的 . 至少使用下划线可以保持一致性：

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

差异造成了我们不必要的情况，以及潜在的错误 .

所以我问：为什么社区几乎普遍以破折号为主，是否有任何理由超过下划线？

从这个开始的时候开始有一个related question，但是我没有（或者不应该）仅仅是品味问题 . 我想了解为什么我们都认为这个大会只是一个品味问题 .

html css coding-style naming-conventions

6 回答

  • 60

    代码完成

    我猜，破折号是否被解释为标点符号或不透明的标识符取决于所选择的编辑器 . 但是，作为个人偏好，我倾向于能够在CSS文件中的每个单词之间进行选项卡，如果用下划线分隔并且没有停止，则会觉得很烦人 .

    此外，使用连字符允许您利用|= attribute selector，它选择包含文本的任何元素，可选地后跟一个破折号：

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

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

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

    算术运算符的歧义

    从可怕的JavaScript实现的早期开始，我就是一个糟糕的构造，并且无论如何都不想使用CSS Selectors从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使用带连字符分隔符的小写字母和XML Schema使用驼峰套接字 .

    一般来说，你会发现，采用你所写的语言感觉和看起来最“本土”的风格比试图将自己的风格融入每种不同的语言更好 . 既然你不能避免使用本机库和语言结构，你的风格将被本机风格“污染”，无论你喜欢与否，所以即使尝试它也是徒劳的 .

    我的建议是不要在各种语言中找到最喜欢的风格，而是让自己在每种语言中都有自己的家，并学会爱上所有的怪癖 . CSS的一个怪癖是关键字和标识符以小写字母书写并用连字符分隔 . 就个人而言，我觉得这非常具有视觉吸引力，并认为它适合全小写（尽管没有连字符）HTML .

    回复于
  • 7

    也许HTML / CSS社区与破折号而不是下划线对齐的一个关键原因可能是由于规范和浏览器实现的历史缺陷 .

    来自2001年3月发布的Mozilla文档@ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

    CSS1规范于1996年以最终形式发布，不允许在类和ID名称中使用下划线，除非它们被“转义” . 转义下划线看起来像这样：p.urgent \ _note {color：maroon;}
    然而，当时浏览器并没有很好地支持这种做法，而且这种做法从未流行过 . CSS2于1998年出版，也禁止在类和ID名称中使用下划线 . 然而，2001年初发布的规范的勘误表首次强调了合法性 . 不幸的是，这复杂化了已经复杂的景观 .

    我通常喜欢下划线，但反斜杠只是让它变得难以置信，更不用说当时的稀缺支持了 . 我可以理解为什么开发人员像瘟疫一样避开它 . 当然，我们现在不需要反斜杠，但礼仪礼仪已经牢固确立 .

    回复于
  • 3

    我不认为任何人都可以肯定地回答这个问题，但这是我的有根据的猜测：

    • 下划线需要按Shift键，因此难以键入 .

    • CSS选择器是官方CSS规范的一部分，使用破折号（例如伪类，如：first-child和pseudo-elements：first-line），而不是下划线 . 属性相同，例如文本装饰，背景颜色等 . 程序员是习惯的生物 . 如果没有充分的理由，他们会遵循标准的风格是有道理的 .

    • 这个更进一步在窗台上，但是......无论是神话还是事实，有一个长期以来的想法，谷歌将由下划线分隔的单词作为单个单词处理，并将单词用短划线分隔为单独的单词 . (Matt Cutts on Underscores vs. Dashes.)出于这个原因，我知道我现在对创建页面URL的偏好是使用带有破折号的单词，至少对我来说，这已经渗透到我的其他东西的命名约定中，比如CSS选择器 .

    回复于
  • 12

    近年来，在连字符分隔的全字段URL中有明显的上升 . 这是SEO最佳实践的鼓励 . Google明确"recommend that you use hyphens (-) instead of underscores (_) in your URLs"：http://www.google.com/support/webmasters/bin/answer.py?answer=76329 .

    如上所述，不同的惯例在不同的情况下在不同的时间流行，但它们通常不是任何协议或框架的正式部分 .

    我的假设是，谷歌的位置将这种模式固定在一个关键环境（SEO）中，并且在类，id和属性名称中使用这种模式的趋势只是在这个大方向上缓慢移动 .

    回复于
  • 127

    原因有很多，但最重要的一点是保持一致性 .

    我认为this文章全面地解释了它 .

    CSS是一种以连字符分隔的语法 . 我的意思是我们写的东西有font-size，line-height，border-bottom等 .

    所以：

    你不应该混合语法：它是不一致的 .

    回复于
  • 38

    我认为这是程序员依赖的事情 . 有些人喜欢使用短划线，有些则使用下划线 .
    我个人使用下划线（ _ ），因为我也在其他地方使用它 . 如：

    • JavaScript变量（ var my_name ）;
    • 我的控制器动作（ public function view_detail ）
      我使用下划线的另一个原因是，在大多数IDE中，由下划线分隔的两个单词被视为1个单词 . （并且可以使用double_click进行选择） .
    回复于

相关问题