HTML ID 和 CLASS 命名最佳实践答案

【问题标题】：HTML ID and CLASS naming best practicesHTML ID 和 CLASS 命名最佳实践
【发布时间】：2017-06-25 15:58:53
【问题描述】：

您好，感谢您抽出宝贵时间阅读我的问题。我的问题与 html 最佳实践有关。

我有一个看起来像这样的 html 骨架..

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Template</title>
        <meta charset="utf-8">
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

我想开始添加 HTML 元素，稍后我将在 CSS 和 JavaScript 中按 ID 和 CLASS 选择这些元素。我的“最佳实践”相关问题是..

ID 和 CLASS 是否具有相同的命名约定？
建议的最小和最大 ID 和 CLASS 属性长度是多少？
为什么像 facebook 这样的网站名称 ID 和 CLASS 属性是随机的数字和字母？
我应该使用驼峰箱吗？
我应该使用下划线还是数字？
我应该在命名时将带有“Detail”等缩写的单词缩短为“Det”吗？
我是否应该为作为 body 子级的元素赋予 ID 和 CLASS 属性？
我是否需要为 HEAD 元素中的元素指定 ID 或 CLASS 属性？

【问题讨论】：

有用stackoverflow.com/questions/6028211/…

标签： html

【解决方案1】：

其中一些答案取决于个人喜好：

ID 和 CLASS 是否具有相同的命名约定？

命名约定由您决定。

建议的最小和最大 ID 和 CLASS 属性长度是多少？

据我所知，没有这样的建议。

为什么像 facebook 这样的网站用随机数字和字母命名 ID 和 CLASS 属性？

为避免意外重复和用于跟踪目的。

我应该使用 camelCase 吗？

这是一个不错的选择。

我应该使用下划线还是数字？

这些是更好的选择。

我自己的系统（我不知道其他人使用它）如下：

HTML - <div class="my-string"> [连字符]
CSS - .my-string [连字符]
Javascript - var myString = ''; [camelCase]
PHP - $My_String = ''; [下划线]

通过对变量和类使用不同的语法，我避免混淆不同类型的数据。

我应该在命名时将带有“Detail”等缩写的单词缩短为“Det”吗？

你可以，但我个人不会。但这取决于你。

我应该给作为 body 的子元素的元素一个 ID 和 CLASS 属性吗？

不确定我是否理解这个问题。

我是否需要为 HEAD 元素中的元素指定 ID 或 CLASS 属性？

没有。没有这个必要。

【讨论】：