前端编码规范(前端编码规范(4))—— CSS 和和 Sass (SCSS) 开发规范开发规范
主要介绍了前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下
ID and class naming
ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和晦涩难懂的名称。
应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小。
通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义。
区分他们,使他们具有特殊意义,通常需要为“帮手”。
尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义,
语义化的名称 通常是正确的选择,因为它们所代表的信息含义,不包含表现的限制。
不推荐
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}
推荐
.heavy {
font-weight: 800;
}
.important {
color: red;
}
合理的避免使用合理的避免使用ID
一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次。
不推荐
#content .title {
font-size: 2em;
}
推荐
.content .title {
font-size: 2em;
}
另一个反对使用ID的观点是含有ID选择器权重很高。
一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器,这使得它很奇怪。
// 这个选择器权重高于下面的选择器
#content .title {
color: red;
}
// than this selector!
html body div.content.news-content .title.content-title.important {
color: blue;
}
CSS选择器中避免标签名选择器中避免标签名
当构建选择器时应该使用清晰, 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名
,而不是你的代码元素,这样会更容易维护。
从分离的角度考虑,在表现层中不应该分配html标记/语义。