【问题标题】:Is using camelCase in CSS ids or classes ok or not?在 CSS id 或类中使用 camelCase 是否可以?
【发布时间】:2012-07-10 10:39:44
【问题描述】:

问题在标题中。我习惯于在开发中使用驼峰式,并且由于设计中有交叉,我想知道是否有任何技术原因(不管意见如何)反对在 HTML 中使用它。提前感谢您的回复。

【问题讨论】:

  • 没有技术原因,没有。使用项目中的任何标准(如果当前不存在,则制定标准)。

标签: css camelcasing


【解决方案1】:

如果您在 CSS 中使用 camelCase 标识符,则存在一个技术限制 - |= 选择器说明符:

<form class="registration"></form>
<form class="search-movies"></form>
<form class="search-actress"></form>

要只匹配搜索表单,你可以这样写:

[class|="search"] { font-size: 150% }

你不能用 camelCase 类名来做到这一点。

【讨论】:

  • 耶啊啊啊啊。我希望永远不要在项目中使用这个或遇到这个规则。
  • 您可以使用[class^="search-"] 达到完全相同的效果,但我支持连字符,一致性规则。
  • 不,你不能。 [class|="search"] 将匹配“search”和“search-whatever”,但您的解决方案不匹配。
  • 更多关于|=(管道等于)at MDN here
【解决方案2】:

从技术上讲,不,不存在技术问题。做你喜欢的事。

请尽量遵循良好的风格指南,like this one

【讨论】:

  • 我之所以寻找这个,是因为我正在考虑对用于脚本编写的 html 元素使用 eElementID,在脚本中为脚本中的对象使用 oElementID,以使 HTML 和编码更具可读性。在此之前,我一直对 CSS ID 和类使用严格的小写字母。
  • 这个风格指南其实有很多优点。 (我的题外话是)除了this part:我们为什么要弃用制表符而使用空格来缩进?我发现此建议不一致。
  • @vintproykt 人们普遍认为我们不应该混合使用空格和制表符。除此之外,这在软件开发领域是一场有点宗教性的战争,没有明确的答案是“更好”。我主要用两个空格缩进。如果我在编写的 Haskell 代码中使用制表符,编译器会报错。另一方面,当您编写 Makefile 时,您必须使用制表符缩进。还要记住,Google 员工并非无所不知,而本指南就是这样——指南;不是生活的硬性规则。
  • @JezenThomas 是的,格式/扩展名一如既往地重要 :) 我可以接受空格,例如,在 JSON 文件中,编辑其中的一些条目并不紧张。其他问题取决于团队。
【解决方案3】:

我在今天之前一直在使用 camelCasing,让我讲个故事:我通过用 camelCasing 编写的 id 名称创建了一个引导模式。我无法使用引导程序自己的 JQuery 函数来操作它。经过几天的搜索,我的同事终于发现是camelCasing造成的。 JavaScript 区分大小写可能很棘手且不可预测。所以我建议你使用连字符。

【讨论】:

    【解决方案4】:

    好问题。我个人在类/ID 名称中使用 camelCase。没有技术原因您不能这样做。

    但是,在快速阅读了一些意见之后,似乎很多其他开发人员/设计人员使用连字符而不是驼峰式,因为它具有更好的可读性。

    使用您喜欢的编码。我使用 camelCase 很好,我在团队环境中工作,并且从未遇到过其他开发人员的可读性问题。

    可以在此处找到我一直在阅读的关于此的意见: http://css-tricks.com/new-poll-hyphens-or-dashes/

    【讨论】:

    • 脚本的其他一些实现使用第一个字母进行标识。我发现这变得非常可读,可以将样式更改为驼峰式,第一个字母是标识符。但需要检查旧浏览器的技术问题;这是 IE 的习惯。
    【解决方案5】:

    没关系,但请注意有一些一般技术区分大小写的issues 需要注意。从技术角度来看,如果你的 css 和 html 保持一致,你应该没问题。

    【讨论】:

      【解决方案6】:

      Twitter 甚至使用 Pascal Case。

      【讨论】:

      • 是的,显然它们在有意义的时候将两者混合在一起。喜欢的方法。感谢分享!
      猜你喜欢
      • 1970-01-01
      • 2023-02-23
      • 1970-01-01
      • 1970-01-01
      • 2012-08-22
      • 2020-03-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多