在CSS类名中，我可以使用驼峰命名法吗？

Question

我想给一个CSS类命名为imgSuper。在CSS类中可以使用camelCasing吗？

- KJai

Answer 1

从技术上来说，是的，但这样做很有风险，因为尽管CSS语法大多不区分大小写，在某些浏览器特定情况下，类名被视为区分大小写。因为规范没有指定浏览器在匹配CSS规则和HTML类名时如何处理大小写。

根据规范，第4.1.3节：

  

所有CSS语法在ASCII范围内都不区分大小写...

  

在CSS中，标识符（包括选择器中的元素名称、类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U+00A1及更高版本，还可以包含连字符（-）和下划线（_）；它们不能以数字或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（见下一项）。例如，标识符“B&W?”可以写成“B\&W\?”或“B\26 W\3F”。

  

...HTML属性“id”和“class”的值、字体名称和URI的大小写敏感性超出了本规范的范围。

与其了解大小写敏感的浏览器和条件，不如意识到最兼容的最佳方法：对于给定的CSS类，在所有代码中使用相同的大小写，并且不要创建两个或更多仅在大小写上有所区别的CSS类名。

- Warren Young

Answer 2

当然。 这里 是官方规则; 基本上，您不应以数字开头命名，可以使用字母、数字、连字符、下划线以及转义或编码字符。

然而，惯例上通常使用连字符而不是驼峰式命名法。

- Jacob Mattison

---

类名中使用连字符，ID中使用驼峰命名法，特别是因为原生JavaScript无法在元素ID中使用连字符。 - doublejosh

HTML5官方规范指出：“HTML文档中HTML元素上的所有属性名称都会自动转换为ASCII小写字母”，那么“属性名称”是否包括类名？如果是，那么避免使用大写字母只会是一件好事。请参见http://www.w3.org/html/wg/drafts/html/master/single-page.html#attr-data-%2a。 - Adriano

哦，我刚注意到它说的是“属性名称”，而不是“属性值”。感到困惑。所有这些有关属性名称和值是否自动转换为小写的混淆可能是每个人都采用不使用驼峰命名约定的主要原因。请参见http://reference.sitepoint.com/css/casesensitivity和http://www.w3.org/TR/html401/types.html＃h-6.1。 - Adriano

Answer 3

是的，类名区分大小写，所以这很好运作。

然而，你应该知道有些浏览器处理不正确，不能将类名视为区分大小写。因此，你应避免同时使用相同名称的大写和小写变体。一些浏览器可能会将类imgSuper和imgsuper视为同一类。

- Guffa

---

为什么要点踩？如果你不解释哪里有问题，那么回答就无法得到改进。 - Guffa

我称它们为“袭击和逃跑”，“巨魔”...你可能在其他帖子中冒犯了某个人。或者他们不喜欢你的图片等等。我们可能永远不会知道。这是SO可能永远无法解决的问题之一。 - Isaac Pak

哪些浏览器对类或ID不区分大小写？ - Yukulélé

Answer 4

可以的。只需确保在 CSS 文件中调用类名为 "fooBar" 时，在标记中分配 class="fooBar" 时使用一致的大小写。

- ozona