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

When naming classes and IDs for CSS what is the best method to use. In this case I need there to be some kind of naming convention so that other people can pick up rules and understand how to name their own ids and classes using the same pattern. Any suggestions? Some of the sites we create can get pretty complex but use an overall structure header, content and footer. The naming must be efficient too.

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

I am not new to CSS. I am aware of giving them names that represent their structure etc., but just want to know people opinions really and ways of doing this.

我不是CSS的新手。我知道给他们的名字代表他们的结构等，但只是想真正了解人们的意见和方法。

8 个解决方案

#1

The best advice is to use class with semantics in mind

最好的建议是使用具有语义的类

Good names don't change

好名字不会改变

Think about why you want something to look a certain way, and not really about how it should look. Looks can always change but the reasons for giving something a look stay the same.

想想为什么你想要某种东西看起来某种方式，而不是真的应该看起来如何。外观可以随时改变，但给出一些外观的原因保持不变。

Good names warning, important, downloadableImage and submenu are all good names. They describe what a certain element represents, and they are not likely to change. A warning will always remain a warning, no matter how much the look of the page changes.

好名字警告，重要的，可下载的图像和子菜单都是好名字。它们描述了某个元素代表什么，并且它们不太可能改变。无论页面外观发生多大变化，警告始终都是警告。

Bad names border4px, lighttext and prettybackground are all examples of bad names. You might fatten that border to a whopping 5 pixels, or the background may look pretty old after a while, and not pretty at all. An advantage of using CSS is that you won't have to change much in order to change the looks of your website. If you have to change all light text into dark text, and thus change all classes lighttext to darktext in all your HTML pages, you're likely to miss a few.

坏名border4px，lighttext和prettybackground都是坏名称的例子。你可能会将这个边框变成高达5个像素，或者背景可能会在一段时间后显得很旧，而且根本不是很漂亮。使用CSS的一个优点是，您无需进行太多更改即可更改网站的外观。如果您必须将所有灯光文本更改为深色文本，从而在所有HTML页面中将所有类别lighttext更改为darktext，您可能会错过一些。

from this article

从这篇文章

#2

IDs can only be used once per page, so they are useful for major structural elements like "header" and "footer" (until HTML5 comes in and replaces those with native elements).

ID每页只能使用一次，因此它们对主要结构元素（如“header”和“footer”）非常有用（直到HTML5进入并替换那些具有本机元素的元素）。

Classes can be used multiple times, and you can use multiple classes per element. They should be kept fairly generic - so instead of, say, warningMessage you could create one style message with the basic layout style, and then warning, info, and error styles with different colours. Then use <div class="message warning">etc</div>

类可以多次使用，每个元素可以使用多个类。它们应该保持相当通用 - 因此，而不是，例如，warningMessage，您可以使用基本布局样式创建一个样式消息，然后使用不同颜色创建警告，信息和错误样式。然后使用

etc

You should also use HTML elements where applicable. Instead of <span class="title">, use a heading tag like <h2>.

您还应该在适用的地方使用HTML元素。而不是，使用像

这样的标题标记。

As others have said, you can use underscores or hyphens or camel case - i.e. my_style or my-style or myStyle. Just choose a convention and stick to it (personally I use my-style). Jitendra suggested in a comment that lowercase is better when you're using gzip compression, which is true all round - for font names, hex colours, and it's worth naming files (e.g. background images) in lowercase anyway.

正如其他人所说，你可以使用下划线或连字符或驼峰盒 - 即my_style或my-style或myStyle。只需选择一个约定并坚持下去（我个人使用我的风格）。 Jitendra在一篇评论中提出，当你使用gzip压缩时，小写会更好，这对于字体名称，十六进制颜色来说都是正确的，并且无论如何都值得用小写命名文件（例如背景图像）。

Sometimes coming up with good names can be hard. Think about other places you might use the same formatting. For example, if you want to put the author and date of an article below the title in smaller grey text, you might use .authorAndDate, but a better way would be .byline. This is still quite descriptive, and can be used in other places too, say, image captions.

有时提出好名字可能很难。考虑一下您可能使用相同格式的其他地方。例如，如果您想将文章的作者和日期放在标题下面的较小的灰色文本中，您可以使用.authorAndDate，但更好的方法是.byline。这仍然是非常具有描述性的，也可以在其他地方使用，比如图像标题。

#3

• header

• 头

• footer

• 页脚

• container

• 容器
• .post
• .POST
• .title
• 。标题

Those are the ones which come up in most of my projects but obviously it depends what you're doing. Just try to keep it logical.

这些是我的大多数项目中出现的那些，但显然这取决于你正在做什么。试着保持逻辑。

#4

be descriptive and name your ids and classes in a semantic way, give them meaning

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

#5

There is no real naming convention. Just agree on one with your team and keep it consistent. For instance don't mix camel case and snake case.

没有真正的命名约定。只需与您的团队达成一致并保持一致。例如，不要混合驼色表壳和蛇壳。

Try to be as description as possible when naming a class. Example:

在命名类时尽量做出描述。例：

.menu: bad
.head_menu: better

.wrapper: very bad
.main_content_wrapper: better

edit; Worse naming convention I saw is using the actual content of the styling. For instance:

编辑;我看到的更糟糕的命名约定是使用样式的实际内容。例如：

.redButton

... because when I got to the code (legacy code), but "red button" was not red but blue (or something like that).

...因为当我得到代码（遗留代码），但“红色按钮”不是红色而是蓝色（或类似的东西）。

Try to use something that will not likely change, like the purpose of the class.

尝试使用不太可能改变的东西，比如课堂的目的。

#6

The rules for naming an id or class attribute are simple. Keep it short, keep it consistent (i.e. if you use hyphens, underscores, or CamelCase for one, use the same format for the others), and make sure the name is based on the function or meaning of the element, NOT the style to be applied.

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

e.g.

例如

<span class="warningMessage">, <span class="warning-message">, <span class="warning-message"> are all perfectly acceptable.

，，都是完全可以接受的。

<span class="red-text"> would not be ... what happens when you change the colour to blue?

不会......当您将颜色更改为蓝色时会发生什么？

#7

I name my ids and classes for their purpose. I try not to use descriptions that use color or direction.

我为他们的目的命名我的id和类。我尽量不使用使用颜色或方向的描述。

For example, if I have a sidebar that is on the left, but it's for the main menu, I may name it #main or #mainMenu. The right sidebar in the same site would be #altSidebar or #subMenu.

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

I have many more classes than id's so naming them is a little harder.

我有比id更多的类，所以命名它们有点困难。

#8

I like to give them one word, then one number then one letter. For example, Header1A, Header2A

我想给他们一个字，然后是一个数字，然后是一个字母。例如，Header1A，Header2A

The number describes one section. If I had another header in an other section I would call it, Header1B, Header2B

该数字描述了一个部分。如果我在另一个部分有另一个标题，我会称之为Header1B，Header2B

or you can try a different approach. Use a camelcase names for header you can name it header, simple as that. But for content inside a header use a camelcase. For example, headerMessage. Or headerLogo

或者你可以尝试不同的方法。使用camelcase名称作为标题，您可以将其命名为标题，这很简单。但是对于标题内的内容，请使用camelcase。例如，headerMessage。或者headerLogo

Just to give you ideas

只是为了给你一些想法