在为CSS命名类和ID时,最好使用哪种方法?在这种情况下,我需要有一种命名约定,以便其他人可以接收规则并了解如何使用相同的模式命名自己的ID和类。有什么建议吗?我们创建的一些网站可能会变得非常复杂,但使用总体结构头部、内容和页脚。命名也必须高效。
我对CSS不是很陌生。我知道要给它们命名代表它们的结构等,但只是想知道人们的意见和做法。
在为CSS命名类和ID时,最好使用哪种方法?在这种情况下,我需要有一种命名约定,以便其他人可以接收规则并了解如何使用相同的模式命名自己的ID和类。有什么建议吗?我们创建的一些网站可能会变得非常复杂,但使用总体结构头部、内容和页脚。命名也必须高效。
我对CSS不是很陌生。我知道要给它们命名代表它们的结构等,但只是想知道人们的意见和做法。
最好的建议是根据语义使用class
好的命名不会改变
考虑为什么要让某些东西看起来某种方式, 而不是真正考虑 它应该如何看起来。外观总是可以更改,但给某些东西一个外观的原因始终保持不变。
良好的命名 如警告(warning)、重要(important)、可下载图像(downloadableImage)和子菜单(submenu)都是良好的命名。它们描述了某个元素代表什么,并且不太可能更改。警告始终是警告,无论页面的外观如何变化。
糟糕的命名 如4像素边框(border4px)、浅色文本(lighttext)和漂亮背景(prettybackground)都是糟糕的例子。您可能把那个边框加粗到5像素,或者经过一段时间后背景看起来旧了,不再漂亮。使用CSS的优点在于,您不必更改太多即可更改网站的外观。如果您必须将所有浅色文本更改为深色文本,因此在所有HTML页面中将所有类别的lighttext更改为darktext,您可能会错过一些。
来自 这篇文章
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
。这仍然相当描述性,并且可以在其他地方使用,例如,图片标题。
这些是我大多数项目中经常遇到的,但显然这取决于你正在做什么。只需尽量保持逻辑性。
要有描述性,以语义方式命名您的ID和类,赋予它们含义
在编程中,没有真正的命名规范。只需与您的团队达成一致并保持一致即可。例如,不要混合使用驼峰式和下划线式。
在为类命名时,尽可能详细地描述。例如:
.menu: bad
.head_menu: better
.wrapper: very bad
.main_content_wrapper: better
编辑:我见过的最糟糕的命名约定是使用样式的实际内容。例如:
.redButton
个人而言,我喜欢使用小写字母命名 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 ...
这些是不好的,因为它们可以从红色变成蓝色,例如。但用户始终是用户。
我会根据它们的用途来命名我的id和class。我尽量不使用颜色或方向等描述。
例如,如果我有一个在左侧的侧边栏,但它是主菜单,我可能会将其命名为#main
或#mainMenu
。同一站点中的右侧边栏将是#altSidebar
或#subMenu
。
我有很多类,所以给它们命名有点困难。