在为 CSS 命名类和 ID 时，最好使用什么方法。在这种情况下，我需要某种命名约定，以便其他人可以了解规则并了解如何使用相同的模式命名他们自己的 id 和类。有什么建议？我们创建的一些网站可能会变得非常复杂，但使用整体结构的页眉、内容和页脚。命名也必须高效。
我对 CSS 并不陌生。我知道给他们起名字来代表他们的结构等，但只是想真正了解人们的意见和这样做的方法。
【问题讨论】：
标签： html css class naming-conventions
最好的建议是使用带有语义的类
好名字不会变
想想为什么你想要某样东西 看起来像某种方式，而不是真的 关于 的外观。看起来可以 总是改变，但原因 看一眼就保持不变。
好名字 warning、important、downloadableImage和submenu都是 好名字。他们描述了一个 某些元素代表，它们 不太可能改变。一个警告 将始终保持警告，不 不管页面的外观如何 变化。
恶名 border4px、lighttext和prettybackground都是不好的例子 名字。你可能会使那个边界变胖 高达 5 像素，或背景 一段时间后可能看起来很老，并且 一点也不漂亮。一个优势 使用 CSS 是你不必 为了改变 您网站的外观。如果你必须 将所有浅色文本更改为深色文本， 从而改变所有类 lighttext 到所有 HTML 页面中的暗文本， 你可能会错过一些。
【讨论】：
每个页面只能使用一次 ID，因此它们对于“页眉”和“页脚”等主要结构元素非常有用（直到 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。这仍然很有描述性，也可以在其他地方使用，比如图片说明。
【讨论】：
这些是在我的大多数项目中出现的，但显然这取决于你在做什么。尽量保持逻辑。
【讨论】：
具有描述性并以语义方式命名您的 id 和类，赋予它们意义
【讨论】：
没有真正的命名约定。只需与您的团队达成一致并保持一致即可。比如不要把camel case和snake case混在一起。
在命名一个类时尽量做到描述。示例：
.menu: bad
.head_menu: better
.wrapper: very bad
.main_content_wrapper: better
编辑；我看到的更糟糕的命名约定是使用样式的实际内容。例如：
.redButton
...因为当我得到代码（旧代码）时，但“红色按钮”不是红色而是蓝色（或类似的东西）。
尝试使用不太可能改变的东西，比如课程的目的。
【讨论】：
命名 id 或 class 属性的规则很简单。保持简短，保持一致（即，如果您使用连字符、下划线或 CamelCase 来表示其中一个，则使用相同的格式来表示其他），并确保名称基于元素的功能或含义，而不是样式应用。
例如
<span class="warningMessage">、<span class="warning-message">、<span class="warning-message"> 都是完全可以接受的。
<span class="red-text"> 不会……当你将颜色更改为蓝色时会发生什么？
【讨论】：
我为他们的目的命名我的 ids 和 classes。我尽量不使用使用颜色或方向的描述。
例如，如果我在左侧有一个侧边栏，但它是用于主菜单的，我可以将其命名为 #main 或 #mainMenu。同一站点的右侧边栏将是 #altSidebar 或 #subMenu。
我有比 id 更多的类，所以命名它们有点困难。
【讨论】：
就我个人而言，我喜欢用 1 到 3 的小写名称来命名 ID 和类。例如...
.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 ...
这些很糟糕，因为它们可能会从红色变为蓝色。但用户永远是用户。
【讨论】：