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

Coo*_*uke 12 html css class naming-conventions

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

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

rob*_*lls 24

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

好名字不会改变

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

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

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

这篇文章


Dis*_*oat 5

ID每页只能使用一次,因此它们对主要结构元素(如"header"和"footer")非常有用(直到HTML5进入并替换那些具有本机元素的元素).

类可以多次使用,每个元素可以使用多个类.他们应保持相当通用的-所以不是,比方说,warningMessage你可以创建一个风格message与基本布局样式,然后warning,info以及error用不同的颜色风格.然后用<div class="message warning">etc</div>

您还应该在适用的地方使用HTML元素.而不是<span class="title">使用标题标签<h2>.

正如其他人所说,你可以使用下划线或连字符或骆驼案例 - 即my_stylemy-stylemyStyle.只需选择一个约定并坚持下去(我个人使用my-style).Jitendra在评论中建议,当你使用gzip压缩时小写会更好,这对于字体名称,十六进制颜色来说都是正确的,并且无论如何都值得用小写命名文件(例如背景图像).

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