HTML/CSS和MVC的命名约定是什么？

Question

有没有关于综合命名规范的好文章？

我想要整理一些代码...从资产到模型（Codeigniter）再到HTML和CSS。

我也很好奇如何构建CSS...是给每个东西都一个唯一的类，比如search-bar-icon，还是重复使用类，比如.search span.icon {？

谢谢， Walker

- Walker

---

+1 我无法告诉你我在CSS中将id和class切换为连字符、驼峰命名和下划线命名的次数有多少。我希望能看到一些坚实的逻辑，说明其中一种方法优于其他方法... - kingjeffrey

@kingjeffrey - 不是说我的逻辑很牢固，但我的逻辑是这样的...camelCase：HTML应该全部小写，所以camelCase似乎不合适。在早期版本的CSS中，下划线实际上是被禁止使用的，因此许多人仍然避免在类/ID名称中使用它们（尽管现在它们是完全合法的，并且已经使用了多年）...所以这就留下了连字符分隔作为最少负担的方法。从打字的角度来看，连字符是唯一不需要使用Shift键的选项 =) - Andy Ford

Answer 1

在HTML/CSS中，id选择器和class选择器并不相等。id选择器权重更高，因此应该谨慎使用。将其用于页面的某些节选，其中您具有后代选择器，其类名与其他节选相同，但希望它们以不同的样式呈现。将id视为页面区域名称空间的较差替代方案。

- Robusto

---

我喜欢在HTML中关于ID和类的思考方式。一个带有ID的元素是“the”（id），而一个带有类的元素是“a/an”（class）。这很有道理，易于遵循，而且干净优雅。 - Arve Systad

Answer 2

在你的CSS中给每个元素都分配一个唯一的类，这样做就违背了“级联”样式表的初衷。有效的CSS利用级联，以便尽可能地减少重复的样式努力。

请记住，大多数HTML元素可以直接进行样式设置。我不需要使用<span class="something"><label>...，因为我可以直接对标签进行样式设置而不使用span。大多数人使用的div和span比他们实际需要的要多得多。

您还可以通过推断进行样式设置。例如，我可能有一个

，后面跟着一个搜索结果的UL，我想将其与页面上的其他UL区别开来。我可以使用以下规则，而不是给UL指定特定的类（例如“searchResultsList”）： H3.searchResults + ul {some styling...;} 或者 H3.searchResults + div > * {some styling...;} 关于CSS组织，我发现按元素类型分类有帮助，从最简单和最常见的情况开始，比如a、p等，然后再处理更复杂的元素，比如表格。我按照特异性对所有内容分组，因为这是级联规则的一部分。元素首先按它在文件中出现的顺序处理，然后按受影响的规则的特异性排序。我把所有只用一次和实用类放在最后（.iconWhichAppearsOnceEver，.noBordersTable等）。

body{}
a {}
p {}
h1,h2,h3,h4,h5,h6 {}
h3.searchResults {}
...
table {}
thead {}
thead th {}
thead th a {}
thead th.noFill a {}
...

- user164226

Answer 3

请记住，您可以像下面这样堆叠和继承 CSS 类：

.icon { background: left center no-repeat; padding-left: 20px; /* leave space for icon */
#SearchBar .icon { background-image: url(../images/icons/search.png); }

我以前使用过的一个不错的技巧是设置多个CSS类（在这种情况下，用于显示审计日志）：

/* the icon is displayed by each entry; if it has no other class,
   it will show a "generic" icon */
.log .entry {
    padding-left: 20px; /* leave space for icon */
    background: url(../images/icons/log-generic.png) top left no-repeat;
}

/* slot a generic delete icon in */
.log .icon.delete {
    color: red;
    background-image: url(../images/icons/log-delete.png);
}

.log .icon.delete.person {
    background-image: url(../images/icons/log-delete-person.png);
}

这是一种定义一系列通用样式的好方法（适用于带有图标的链接、工具栏按钮、头像等），您可以在特定实例中覆盖它们（将其视为类继承）。

在CSS中，我对命名有点奇怪，但我坚持大写字母用于IDs，小驼峰用于类。这只是帮助我区分它们。

我遵循的CSS命名禅是：

• 越少ID越好
• ID应保留给主要布局部分
• ...以及用于DOM / AJAX操作的元素标识
• 使用通用类名称（log，icon，person，button等）
• ... 然后将它们与ID或父类组合以形成特定的内容，例如标题中的个人资料链接 #Header a.icon.person

最重要的是，保持简洁。 CSS越少，越好 - 使用通用的可重用样式，您将从中受益：a）UI一致性，b）页面膨胀较少。

希望能帮到您

- Keith Williams

Answer 4

给每个元素分配一个唯一的ID可以使您的选择器更快，但会使您的标记膨胀并且难以处理。使用唯一的类有点不太合理（类用于对象组）。

从代码清晰度的角度来看，第二个选项更为简洁，但选择器通常会慢得多。

- µBio

Answer 5

这完全取决于你认为什么最好。约定并不是规则，它们只是可以让你的生活更轻松的指南。由于Codeigniter加载所有必需类的方式，它具有相对严格的命名约定。

例如，控制器的文件名是小写的，但类名是大写的，并且应与文件名匹配。例如，test.php将导致一个名为Test的类。

命名HTML类/ID并没有标准化，完全取决于你认为什么最好。我通常尝试给我的ID和类一个有意义的名称。例如，包含徽标的DIV将被命名为“site_logo”。包含博客文章的DIV将被命名为“article”，等等。

此外，不要让整个“IDs/classes速度较慢”的事情欺骗你，因为速度增加非常小。如果您想优化您的网站，您最好优化您的PHP或CSS代码，而不是删除HTML ID或类。

- user290102

Answer 6

使用类的整个目的是可以多次使用它们。对于特定元素的CSS，应该使用ID。正如所说，CSS代码越少越好。

- user393964