Html 我应该如何命名我的CSS类？

我的类名应该是什么

例如，一个用于计票的CSS类，我应该如何命名它

.vote-count-post     (1) // SO uses this
.VoteCountPost       (2)
.voteCountPost       (3)
.vote.count-post     (4)
.vote .count-post    (5)
.vote .count.post    (6)

• 每种方法的优缺点是什么
• 哪个最常用，为什么
• 这其中有什么含意吗
• 我的CSS中可以有大写字母吗
4、5和6是特殊的

• .vote.count post

  将元素与

  class=“vote count post”

  或

  class=“count post vote”

  匹配，甚至与

  class=“vote something count post”

  匹配

• .vote.count post

  将元素与

  class=“count post”

  匹配，这些元素是

  class=“vote”

• 而

  .vote.count.post

  则是两者的混合体

---

在1、2和3之间，最重要的是风格偏好。有些人喜欢一种而不是另一种，就像他们在编程语言中所做的那样。所以，只要选择你个人喜欢的，或者更适合你的。
这只是命名，所以你喜欢什么取决于你自己。你的两个例子都可以。只要选一个并坚持下去
前三个选择器处理单个元素，第四个选择器处理具有两个类的单个元素，第五个选择器处理另一个元素内部的元素，第六个选择器处理相同的操作，但内部元素具有两个类
我可能会将

class=“Vote”

放在surronding元素上，并将

class=“count”

放在其中的count元素上以解决它。我对周围的元素使用pascal case，对其中的子元素使用小写，因此我将使用：

.Vote .count

我投票支持（1）在CSS中始终使用小写。这样你就不必记得你在哪里把东西资本化了。这样就消除了（2）和（3）
（5）实际上是两个不同的元素，因此不能应用于单个元素

---

（4）和（6）对于单个元素无效（4）假设您对同一元素应用了两个类，例如

class='vote count post'

（6）是（4）和（5）的组合。我经常看到第一种方法（CSS框架使用它，我发现它是一个很好的CSS示例）
我个人不喜欢（2）和（3）中的类名，因为很容易出错（只需编写VotecountPost，它就不起作用）
（4） ，（5），（6）并不是一个惯例，而是其他人已经指出的不同的选择器。
我认为没有“正确”的答案。我倾向于做更具可读性的事情，所以我选择（3）。在我看来，html/css中已经有足够的word样式的文本了。当设计Wordpress之类的样式时，我认为它就像一个充满破折号的混合器，很难导航

---

但这是我的意见，我认为你应该对你喜欢的东西有个感觉。你觉得容易阅读的东西，当你每天花8个小时看这些东西时，你应该选择你觉得舒服的东西
我建议使用这个

.VoteCountPost

更少的空间和可读性
我同意Keltex的观点，即始终使用小写更容易维护。。。特别是对于可能需要对您的工作进行故障排除或修改的其他人

---

不过，我也建议在css类名中添加前缀。在大型项目中，这有助于快速确定它们的来源以及它们适用于什么。它还有助于防止异构环境中的名称冲突（和不可预测的行为）。
在使用jQuery的项目中，我确定我以两种不同的方式使用类名。第一个是用于样式化，其中定义几乎完全位于.css文件中。第二种是jQuery选择器，它倾向于被隔离到单个函数中，并且与脚本更相关。由于这种划分，我选择使用#1作为样式，使用#2作为jQuery元素选择器。如果有人选择查看源代码，他们现在可以确定每种类型的类的函数。
如果在

count

中有另一个子元素，您会怎么做？这样，它既可以作为子元素，也可以作为周围的元素。@poke:这取决于它们的使用方式。所有子类都是小写的，但有时我会将一个周围的类放在另一个类中。我所有的选择器都以pascal大小写名称开头。Wordpress、Drupal、Django都倾向于使用类似于（1）的样式。