html/css + MVC 的命名约定？

Posted 2023-05-08

【中文标题】html/css + MVC 的命名约定？

【英文标题】：Naming conventions for html/css + MVC?

【发布时间】：2011-03-17 05:19:19

【问题描述】：

有没有关于命名综合命名约定的好文章？

我正在清理一些代码...从资产到模型 (Codeigniter) 再到 html 和 CSS。

我也很好奇如何构建 CSS... 是给所有东西一个唯一的类（即 search-bar-icon）更好，还是重复像 .search span.icon 这样的类更好？

谢谢， 沃克

【问题讨论】：

+1 我无法告诉你我在 CSS 中的连字符分隔、驼峰式和下划线分隔的 id 和类之间切换了多少次。我很想看到一些关于为什么一个人优于另一个人的可靠逻辑......

@kingjeffrey - 不是说我的逻辑是可靠的，但我的逻辑是这样的……camelCase: html 应该都是小写的，所以 camelCase 似乎不合适。下划线实际上在早期版本的 CSS 中是被禁止的，所以很多人仍然在类/id 名称中避免使用它们（尽管它们现在完全合法使用并且已经使用多年了）......所以留下连字符分隔的方法用最少的行李。从打字的角度来看，连字符是唯一不需要使用 shift 键的选项 =)

【参考方案1】：

在 HTML/CSS 中，id 和 class 选择器是不等价的。 id 的重量更大，因此应谨慎使用。将它用于具有后代选择器的页面部分，这些部分的类名与其他部分相同，但您希望它们的样式不同。将 id 想象成一个穷人的页面区域命名空间。

【讨论】：

我喜欢 a/the - 在 HTML 中考虑 ID 和类的方式。具有 ID 的元素是 the (id)，而具有类的元素是 a/an (class)。这是有道理的，很容易理解，而且有点干净优雅。

【参考方案2】：

给每个东西一个唯一的 id 会使你的选择器最快，但会使你的标记膨胀，并且可能会成为一个难以处理的问题。使用唯一的类是没有意义的（类用于对象组）。

您的第二个选项是更简洁的代码，但选择器通常要慢得多。

【参考方案3】：

在你的 CSS 中给所有的东西一个独特的类违背了“级联”样式表的目的。有效的 CSS 会利用级联，以便您尽可能少地重复样式设置。

请记住，大多数 HTML 元素都可以直接设置样式。我不需要使用<span class="something"><label>...，因为我可以在不使用跨度的情况下设置标签本身的样式。大多数人使用的 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 
...

【参考方案4】：

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

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

命名 HTML 类/ID 不是标准化的，完全取决于您认为最好的方法。我通常会尝试给我的 ID 和类起一个有意义的名称。例如，包含徽标的 DIV 将被命名为“site_logo”。包含博客文章的 DIV 将被命名为“article”，依此类推。

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

【参考方案5】：

请记住，您可以堆叠和继承 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 中命名有点奇怪，但我坚持 UpperCase 用于 ID，lowerCamel 用于类的约定。它只是帮助我区分。

我遵循的 CSS 命名禅是：

ID 越少越好 应为主要布局部分保留 ID ...并识别用于 DOM/AJAX 操作的元素 使用通用类名（日志、图标、人物、按钮等） ...然后将它们与 ID 或父类结合起来形成细节，例如#Header a.icon.person 标题中的个人资料链接

最重要的是，保持精简。 CSS 越少越好 - 使用通用的、可重复使用的样式，您将受益于 a) UI 的一致性和 b) 更少的页面膨胀。

HTH

【参考方案6】：

使用类的全部意义在于您可以多次使用它们。对于特定元素的 CSS，您应该使用 id。如前所述，CSS 代码越少越好。