CSS和HTML中命名ID和类的最佳方法是什么？

Question

CSS和HTML中命名ID和类的最佳方法是什么？

14

在为CSS命名类和ID时，最好使用哪种方法？在这种情况下，我需要有一种命名约定，以便其他人可以接收规则并了解如何使用相同的模式命名自己的ID和类。有什么建议吗？我们创建的一些网站可能会变得非常复杂，但使用总体结构头部、内容和页脚。命名也必须高效。

我对CSS不是很陌生。我知道要给它们命名代表它们的结构等，但只是想知道人们的意见和做法。

- Cool Hand Luke

实际上并没有一个标准，只要你的描述准确，并且正确使用ID和类即可。 - Ben Everard

8个回答

5

IDs（标识符）在每个页面中只能使用一次，因此它们对于像“header”和“footer”（直到HTML5出现并用本机元素替换这些元素）这样的主要结构元素非常有用。

类可以多次使用，并且您可以在一个元素中使用多个类。它们应该保持相当通用-因此，例如，您可以创建一个带有基本布局样式的样式message，而不是warningMessage，然后使用不同颜色的warning、info和error样式。然后使用<div class="message warning">etc</div>

您还应该在适用的情况下使用HTML元素。而不是<span class="title">，使用标题标记如<h2>。

正如其他人所说，您可以使用下划线、连字符或驼峰式命名法-即my_style或my-style或myStyle。只需选择一种约定并坚持使用它（我个人使用my-style）。Jitendra在评论中建议在使用gzip压缩时小写字母更好，这在所有方面都是正确的-对于字体名称、十六进制颜色，以及最好使用小写字母命名文件（例如背景图像）。

有时候想出好的名称可能很难。考虑您可能在其他地方使用相同格式的情况。例如，如果您想在标题下方以较小的灰色文本放置文章的作者和日期，则可能会使用.authorAndDate，但更好的方法是.byline。这仍然相当描述性，并且可以在其他地方使用，例如，图片标题。

- DisgruntledGoat

一个很棒的回答...那就是我的应该说的！;-) - Jonny Haynes

1

header
footer
container
.post
.title

这些是我大多数项目中经常遇到的，但显然这取决于你正在做什么。只需尽量保持逻辑性。

- Ben Shelock

1

要有描述性，以语义方式命名您的ID和类，赋予它们含义

- knittl

0

在编程中，没有真正的命名规范。只需与您的团队达成一致并保持一致即可。例如，不要混合使用驼峰式和下划线式。

在为类命名时，尽可能详细地描述。例如：

.menu: bad
.head_menu: better

.wrapper: very bad
.main_content_wrapper: better

编辑：我见过的最糟糕的命名约定是使用样式的实际内容。例如：

.redButton

因为当我看到那段代码（遗留代码）时，"红色按钮"并不是红色的，而是蓝色的（或者类似的颜色）。

尽量使用一些不太可能改变的东西，比如类的目的。

- marcgg

我不知道有没有这样的。在编程语言中使用连字符并不是很常见。 - marcgg

尽管浏览器似乎接受名称中的下划线，但我认为在早期的 CSS 规范中是不允许使用下划线的，并且这也是不被鼓励的。连字符万岁。http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/ - tosh

1

@tosh - 那个链接表明它们只在Netscape Navigator 4.0中出现问题。如果是这样，你也不能使用divs。 - kibibu

0

个人而言，我喜欢使用小写字母命名 ID 和 Class，长度在 1 到 3 之间。例如...

.user
.user-profile
.user-profile-picture

如果我想使用类来为另一个用户设置样式...

.user-2
.user-2-profile
.user-2-profile-picture

就像其他人所说的那样，您不应该将属性用作名称，而应该使用元素，例如...

user, picture, header, message, text, input, output.

等等。

不要使用属性，如...

red, big, left, dark, light ...

这些是不好的，因为它们可以从红色变成蓝色，例如。但用户始终是用户。

- FarrisFahad

父节内嵌的子节标题怎么处理（例如，Header1A，Header2A）？ - dkjain

0

命名id或class属性的规则很简单。保持简短，保持一致（即如果您为一个使用连字符、下划线或驼峰式命名法，则对其他属性使用相同的格式），并确保名称基于元素的功能或含义，而不是应用的样式。

例如：、、都是完全可以接受的。不行...当你把颜色改成蓝色时会发生什么？

- Jonny Haynes

但小写字母总是更好的。请查看此处：http://www.websiteoptimization.com/speed/tweak/lowercase/ - Jitendra Vyas

我总是倾向于使用小写字母和连字符以便于编辑。 - Jonny Haynes

0

我会根据它们的用途来命名我的id和class。我尽量不使用颜色或方向等描述。

例如，如果我有一个在左侧的侧边栏，但它是主菜单，我可能会将其命名为#main或#mainMenu。同一站点中的右侧边栏将是#altSidebar或#subMenu。

我有很多类，所以给它们命名有点困难。

- tahdhaze09

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robjmills · Accepted Answer

最好的建议是根据语义使用class

好的命名不会改变

考虑为什么要让某些东西看起来某种方式，而不是真正考虑 它应该如何看起来。外观总是可以更改，但给某些东西一个外观的原因始终保持不变。

良好的命名 如警告（warning）、重要（important）、可下载图像（downloadableImage）和子菜单（submenu）都是良好的命名。它们描述了某个元素代表什么，并且不太可能更改。警告始终是警告，无论页面的外观如何变化。

糟糕的命名 如4像素边框（border4px）、浅色文本（lighttext）和漂亮背景（prettybackground）都是糟糕的例子。您可能把那个边框加粗到5像素，或者经过一段时间后背景看起来旧了，不再漂亮。使用CSS的优点在于，您不必更改太多即可更改网站的外观。如果您必须将所有浅色文本更改为深色文本，因此在所有HTML页面中将所有类别的lighttext更改为darktext，您可能会错过一些。

来自这篇文章

CSS和HTML中命名ID和类的最佳方法是什么？

header

footer

container