Question

我的班级名称应该如何？

例如，投票计数的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中可能有任何大写字母吗？

Answer 1

4,5和6是特殊的

.vote.count-post与class="vote count-post"或class="count-post vote"甚至class="vote something-else count-post"的元素匹配。
.vote .count-post匹配class="count-post"元素，这些元素是具有class="vote"
和.vote .count.post是两者的混合

在1,2和3之间，重要的是风格的偏好。有些人比编程语言更喜欢一个人而不是另一个人。所以，只需选择您个人喜欢的内容，或者更适合您的内容。

Answer 2

我投票赞成（1）总是使用小写字母为您的CSS。这样你就不必记住你在哪里大写东西了。这样就消除了（2）和（3）。

（5）实际上是两个不同的元素，因此无法应用于单个元素。

（4）且（6）对单个元素无效。 （4）假设您将两个类应用于同一元素，例如class='vote count-post'。 （6）是（4）和（5）的组合。

Answer 3

它只是命名，所以取决于你喜欢什么。你的任何一个例子都可以正常工作。只需选择一个并坚持下去。

三个第一选择器解决单个元素，第四个选择器解决一个元素有两个类，第五个解决另一个元素，第六个相同但内部元素有两个类。

我可能会将class="Vote"放在surronding元素上，并在其内部的count元素上输出class="count"来解决它。我对其周围的元素和子元素使用pascal case，所以我会使用：

.Vote .count

Answer 4

我看到第一种方法很多（jQuery UI CSS框架使用它，我发现它是一个很好的CSS好例子。）

我个人不喜欢来自（2）和（3）的类名，因为它很容易弄错（只写VotecountPost并且它不起作用）。

（4），（5），（6）实际上并不是常规事物，而是其他人所指出的不同选择者。

Answer 5

我同意上面的Keltex，总是使用小写更简单，更易于维护......特别是对于可能需要排除故障或修改您工作的其他人。

然而，我还建议为你的css类名添加一个前缀。在大型项目中，这有助于快速确定其来源及其适用的内容。它还有助于防止异构环境中的名称冲突（和不可预测的行为）。

Answer 6

我认为没有“正确”的答案。我倾向于做更可读的东西，所以我选择（3）。在我看来，html / css中已经有足够的单词 - 单词样式文本了。造型时例如Wordpress我认为它就像一个充满破折号的混音器，难以导航。

但是我认为，我认为你应该感受一下你喜欢的东西。你觉得容易阅读的东西，当你每天看8小时时，你应该选择一些你觉得舒服的东西。

Answer 7

我建议使用这个.VoteCountPost更少的空间并且可读..

Answer 8

在我使用jQuery的项目中，我已经确定我以两种不同的方式使用类名。第一个是样式，其中定义几乎只在.css文件中。第二个是jQuery选择器，它们往往被隔离到一个函数，并且与脚本更相关。由于这种分裂，我选择按＃1表示样式，＃2表示jQuery元素选择器。如果有人选择查看源，他们现在可以确定每种类的功能。

我该如何命名我的CSS类？

8 个答案: