为CSS命名类和ID时，最好使用哪种方法。在这种情况下，我需要有某种命名约定，以便其他人可以获取规则并理解如何使用相同的模式命名自己的id和类。有什么建议？我们创建的一些网站可能会变得相当复杂，但使用整体结构标题，内容和页脚。命名也必须有效。
我不是CSS的新手。我知道给他们的名字代表他们的结构等，但只是想真正了解人们的意见和方法。
答案 0 :(得分：24)
最好的建议是使用带有语义的类
来自this article 的好名字不会改变
考虑 为什么 你想要的东西 看起来某种方式，而不是真的 关于它应该看起来 的方式。看起来可以 总是改变但原因 看起来保持不变。
好名字 警告，重要， downloadableImage 和子菜单都是 好名字。他们描述了什么 某些元素代表，他们 不太可能改变。一个警告 将永远是一个警告，不 重要的是页面的外观 变化。
错误名称 border4px ， lighttext 和 prettybackground 都是坏的例子 名。你可能会把边界变得肥胖 高达5个像素，或背景 一段时间后可能会看起来很旧，而且 根本不漂亮。一个优点 使用CSS是你不必要的 变化很大，以改变 看看你的网站。如果必须的话 将所有浅色文本更改为深色文本， 从而改变所有类的lighttext 在所有HTML页面中使用darktext， 你可能会错过一些。
答案 1 :(得分：5)
每页只能使用一次ID，因此它们对主要结构元素（如“header”和“footer”）非常有用（直到HTML5进入并替换那些具有原生元素的元素）。
可以多次使用类，并且每个元素可以使用多个类。它们应该保持相当通用 - 因此，而不是warningMessage，您可以使用基本布局样式创建一个样式message，然后warning，info和{ {1}}不同颜色的样式。然后使用error
您还应该在适用的地方使用HTML元素。而不是<div class="message warning">etc</div>，请使用像<span class="title">这样的标题标记。
正如其他人所说，你可以使用下划线或连字符或骆驼案例 - 即<h2>或my_style或my-style。只需选择一个约定并坚持下去（我个人使用myStyle）。 Jitendra在评论中建议，当你使用gzip压缩时，小写更好，这对于字体名称，十六进制颜色都是正确的，并且值得用小写命名文件（例如背景图像）。
有时提出好名字可能很难。考虑其他地方您可能使用相同的格式。例如，如果您想将文章的作者和日期放在标题下方较小的灰色文本中，则可以使用my-style，但更好的方法是.authorAndDate。这仍然是非常具有描述性的，也可以在其他地方使用，比如图像标题。
答案 2 :(得分：1)
这些是我的大多数项目中出现的那些，但显然这取决于你正在做什么。试着保持逻辑。
答案 3 :(得分：1)
是描述性的，并以语义方式命名您的ID和类，赋予它们含义
答案 4 :(得分：0)
没有真正的命名约定。只需与您的团队达成一致并保持一致。例如，不要混合camel case和蛇案。
在命名类时尝试尽可能地描述。例如：
.menu: bad
.head_menu: better
.wrapper: very bad
.main_content_wrapper: better
编辑;我看到的更糟糕的命名约定是使用样式的实际内容。例如：
.redButton
...因为当我到达代码（遗留代码）时，“红色按钮”不是红色而是蓝色（或类似的东西）。
尝试使用不太可能改变的东西，比如班级的目的。
答案 5 :(得分：0)
命名id或class属性的规则很简单。保持简短，保持一致（即如果你使用连字符，下划线或CamelCase，对其他人使用相同的格式），并确保名称基于元素的功能或含义，而不是样式应用。
e.g。
<span class="warningMessage">，<span class="warning-message">，<span class="warning-message">都是完全可以接受的。
<span class="red-text">不会......当您将颜色更改为蓝色时会发生什么？
答案 6 :(得分：0)
我为自己的目的命名我的ID和类。我尽量不使用使用颜色或方向的描述。
例如，如果我左侧有一个侧边栏，但主菜单上有侧边栏，我可以将其命名为#main或#mainMenu。同一网站中的右侧边栏为#altSidebar或#subMenu。
我有比id更多的类，所以命名它们有点困难。
答案 7 :(得分：0)
我喜欢给他们一个字，然后是一个数字，然后是一个字母。例如，Header1A，Header2A
该数字描述了一个部分。如果我在另一个部分有另一个标题，我会称之为Header1B，Header2B
或者您可以尝试不同的方法。使用camelcase名称 对于标题，您可以将其命名为标题，就像那样简单。但是对于标题内的内容使用camelcase。例如，headerMessage。或者headerLogo
只是为了给你提供想法