我应该如何命名我的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中有大写吗？

来源

2011-01-22 BrunoLM

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

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

我大概会把class="Vote"放在surronding元素上，并且在内部的count元素上输出class="count"来解决它。我用帕斯卡情况下周围的元素和小写，它们内部的子元素，所以我会用：

.Vote .count

来源

2011-01-22 15:44:32 Guffa

如果`count`内有另一个子元素，你会怎么做？这样它就可以作为一个孩子和一个周围的元素。 – poke 2011-01-22 15:46:33

@poke：这取决于它们如何使用。所有的孩子班级都是小写字母，但有时我会把周围的班级放在另一班。我所有的选择器都以一个pascal案例名称开头。 – Guffa 2011-01-22 15:52:11

4，5和6是特殊

.vote.count-post匹配元件与class="vote count-post"，或class="count-post vote"甚至class="vote something-else count-post"。与class="count-post"能与class="vote"
和.vote .count.post一个元素的子元素
.vote .count-post匹配元素是那些的混合物既

之间1，2和3，所有重要的是风格的偏好。就像他们在编程语言中一样，有些人更喜欢一个人。所以只要选择你个人喜欢的东西，或者更适合你的东西。

来源

2011-01-22 15:43:09 poke

我投（1）总是使用小写为你的CSS。这样你就不必记住你在哪里利用资源。因此，消除了（2）和（3）。

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

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

来源

2011-01-22 15:44:39 Keltex

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

我个人不喜欢在（2）和（3）的类名中使用camelcasing，因为它很容易出错（只写VotecountPost而不起作用）。（4），（5），（6）不是真正的约定事物，而是其他人已经指出的不同选择器。

来源

2011-01-22 15:45:46 Daff

我认为没有“正确”的答案。我倾向于做更可读的事情，所以我选择（3）。在我看来，HTML/CSS中已经有足够的单词 - 单词样式文本。并且，当例如造型时WordPress的我认为这就像一个充满破折号的混音器，很难导航。

但是，这是我的看法，我认为你应该只是感觉你喜欢什么。你发现容易阅读的东西，当你每天看8小时的时候，你应该选择你喜欢的东西。

来源

2011-01-22 15:53:00 plebksig

我建议使用此.VoteCountPost更少的空间和可读性..

来源

2011-01-22 20:45:38 Abudayah

我Keltex同意上面总是使用小写更容易，更易于维护......尤其是为别人谁可能需要检查或修改您的工作。

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

来源

2013-10-02 19:19:00 Roberto

在我使用jQuery的项目中，我确定我以两种不同的方式使用类名。第一种是定义几乎完全在.css文件中的样式。第二个是针对jQuery选择器，它们往往被隔离到一个单一的功能，并与脚本更相关。由于这个分割，我选择按照＃1的样式和＃2的jQuery元素选择器。如果有人选择查看源代码，他们现在可以确定每种类型的功能。

来源

2014-01-04 19:20:40 user3071858

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

回答

相关问题