Html 是否有命名类的标准方法?
例如:Html 是否有命名类的标准方法?,html,css,naming-conventions,semantic-markup,Html,Css,Naming Conventions,Semantic Markup,例如: class="profile profile-image profile-image-large" 或 这些名字或破折号有什么问题吗?老实说,这取决于个别开发人员和他们自己的感受。有两种同样好的方法可以构建CSS类,正如您所建议的: .profile.image.large{ width: 300px; } /* Or: */ .profile-image-large{ width:300px; } 它们实现了同样的目标,但当你开始广泛思考时,你就会看到这些风格之间
class="profile profile-image profile-image-large"
或
这些名字或破折号有什么问题吗?老实说,这取决于个别开发人员和他们自己的感受。有两种同样好的方法可以构建CSS类,正如您所建议的:
.profile.image.large{
width: 300px;
}
/* Or: */
.profile-image-large{
width:300px;
}
它们实现了同样的目标,但当你开始广泛思考时,你就会看到这些风格之间的差距有多大
分离类使它们可重用:惯例是永远不要重复。通过分离大类
或图像
类,我们可以重用相同的类:
.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 */
}
在一个简单的例子中,如边框
,这似乎并不重要。但考虑到一个更大的CSS块,您可能希望在整个代码中重复使用几十次。你会重复很多次
对样式进行逻辑分组仍然是件好事:我不是说-类是件坏事-它们有助于为代码定义名称空间,因此在维护模块化代码的意义上,在样式前面加上标识符将有助于防止冲突,特别是当你在一个网络代理中开发代码并重复使用时,或者如果你正在构建一个插件(在这种情况下,样式前缀是绝对必要的)
使用诸如SCSS(我的首选环境)之类的编译语言进行开发也会改变您的思维方式。在SASS/SCSS中,我们可以轻松做到这一点:
.profile{
display: block;
&-image{
border: 1px solid blue;
}
}
其计算结果与元素上的profile image
相同。或者,SASS还支持:
.profile{
display: block;
&.image{
border: 1px solid blue;
}
}
其计算结果为元素上的配置文件图像
。非常相似-但这两种样式仅限于其父元素.profile
,不能全局使用。样式是受保护的,而在我的第一个“自然”CSS示例中,blue
类可以通过HTML页面中的任何元素自由添加和合并
编辑:您仍然可以在SASS代码中使用全局.image
样式,然后覆盖单个示例,但就个人而言,我觉得这违反了DRY原则,我尽量避免这样做
那么TL是什么;DR?
在我看来,没有“正确答案”。从约定的角度来看,值得注意的是,像这样的框架使用了两种样式的混合体——可以在任何地方应用的全局类,以及保护其子样式的前缀类
对于任何程序员来说,最重要的一点是,您的代码清晰易读且定义明确,并且无论使用何种方法,您都尽可能少地使用代码来实现您的结果。命名类时的一个好的经验法则是描述元素内容的用途
首选
<div class="copyright"></div>
OR
<div class="social-media-buttons"></div>
<div class="copyright"></div>
OR
<div class="social-media-buttons"></div>
<div class="column-1"></div>
OR
<div class="right-bottom"></div>
class="profile profile-image profile-image-main"
class="profile profile-image profile-image-thumbnail"