CSS and Sass (SCSS) style rules
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标记/语义。
它可能是一个有序列表需要被改成一个无序列表，或者一个div将被转换成article。
如果你只使用具有实际意义的class(类)名，
并且不使用元素选择器，那么你只需要改变你的html标记，而不用改动你的CSS。
不推荐
div.content > header.content-header > h2.title { font-size: 2em;} 推荐
.content > .content-header > .title { font-size: 2em;} 尽可能的精确
很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。
有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而，在任何情况下，这是一个非常不好的做法。
如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。
考虑下面的DOM:
News event
Check this out
查看更多关于前端编码规范（4）--CSS和Sass(SCSS)规范_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did113724