例如:
class="profile profile-image profile-image-large"
或者
class="profile profile-image profile-image-small"
这些名称或短横线有问题吗?
例如:
class="profile profile-image profile-image-large"
或者
class="profile profile-image profile-image-small"
<div class="copyright"></div>
OR
<div class="social-media-buttons"></div>
<div class="column-1"></div>
OR
<div class="right-bottom"></div>
以下是W3C的指南:
以语义为基础使用类。
通常人们使用类名如 bluetext 或 redborder。用一个 HTML 元素的角色来命名你的类是更好的方式。
好的命名不会改变
考虑一下为什么你想让某个东西看起来某种方式,而不是它应该看起来怎样。外观总是可以改变的,但给某个东西外观的原因却不会改变。
好的命名
warning
、important
、downloadableImage
和submenu
都是好的命名。它们描述了某个元素代表的含义,并且它们不太可能改变。警告始终是警告,无论页面的外观如何改变。糟糕的命名
border4px
、lighttext
和prettybackground
是糟糕的命名示例。你可能要将边框加粗到 5 像素,或者背景在一段时间后看起来很旧,根本不漂亮。使用 CSS 的优点是,你不需要改变太多就可以改变网站的外观。如果你必须将所有浅色文本更改为深色文本,因此在所有 HTML 页面中将所有类lighttext
更改为darktext
,你可能会错过一些。
这有什么问题吗?
class="profile profile-image profile-image-large"
class="profile profile-image profile-image-small"
好的,这些类名是否代表了"该类HTML元素的角色"?
有点混淆。 profile
和 profile-image
是明确的角色。但是,large
和 small
只是表示图像应该如何显示,正如W3C指出的那样,这可能会改变。如果大小发生变化,则类名也可能需要更改。
这就引出了这个问题:重要的问题并不是类名的前缀、后缀或连字符。真正重要的是名称本身的质量。
也许这将符合W3C指南,并在可重用性、灵活性和维护方面提供更大的好处。
class="profile profile-image profile-image-main"
class="profile profile-image profile-image-thumbnail"
说实话,这取决于个人开发者和他们自己的感受。就像你建议的那样,有两种同样好的CSS类结构方式:
.profile.image.large{
width: 300px;
}
/* Or: */
.profile-image-large{
width:300px;
}
large
或image
类,我们可以重复使用相同的类:.blue{
border: 3px solid blue; /* All .blue's will have a blue border */
}
.profile.blue{
border-style: dashed; /* Inherits from the previous blue and replaces the solid with a dash. */
}
-
分隔符,代码如下:.blue{
border: 3px solid blue; /* All .blue's will have a blue border */
}
.profile-blue{
border: 3px dashed blue; /* We had to redefine the entire style */
}
.profile{
display: block;
&-image{
border: 1px solid blue;
}
}
这将被计算为元素上的profile profile-image
相同。此外,SASS还支持:
.profile{
display: block;
&.image{
border: 1px solid blue;
}
}
这个元素评估为profile image
。非常相似,但是两种样式都限制在它们的父元素.profile
中,并且不能全局使用。这些样式是受保护的,而在我的第一个“自然”的CSS示例中,blue
类可以自由地添加并被任何 HTML页面中的元素所使用。
编辑:您仍然可以在SASS代码中使用全局的.image
样式,然后覆盖单个示例,但就我个人而言,我觉得这违反了DRY原则,我尽可能避免这样做。
那么TL;DR是什么?
在我看来,没有“正确答案”。从惯例的角度来看,值得注意的是,像Twitter-Boostrap这样的框架使用了两种样式的混合 - 可以应用于所有地方的全局类,与保护其子元素样式的前缀类混合在一起。
对于任何程序员来说,最重要的是您的代码清晰可读,并且尽可能少地使用代码来实现结果 - 无论使用哪种方法。