我不惜一切代价避免上课,留下HTML纯净美丽,还是加我的课程,我想要样式？
例如,如果我想对我的网站的各种表单按钮进行风格化,我要走
input[type="submit"] { /* styles */ }
或者我添加一个类“form-button”给他们,并做
.form-button { /*styles */ }
在这个微不足道的例子中,人们可能不会想到太多,但是如果我想以不同的语义来形容第三个链接,而不是表达式,我可以使它
.navigation ul:nth-of-type(2) a:nth-of-type(3) { /* styles */ }
.different-link { /* styles */ }
我明白,在2013年,所有运行的计算设备和浏览器都应该足够快,技术上不够优化的CSS选择器不应该对最终用户产生任何影响.
所以最后,它真的好像是一个问题：“我是否混淆了HTML(使用类),还是混乱CSS(使用长风选择器)？”
有什么意见吗？
解决方法
即使从HTML CSS进行外部化也应被视为单独的,实际上它不是在您插入HTML元素选择器的情况下.在您的选择器与实际HTML元素及其层次结构相关的情况下,您的CSS与HTML源代码密切相关.这使得你的CSS变得僵硬,可能比它应该更大.
因此CSS类.每当使用类时,只要定义足够的属性,这些定义就可以附加到任何HTML元素.尽管您的HTML由于附加属性而变大,但语义不会改变是真实的.
为什么.form-button比输入好[type = submit]呢？
因为您可以更改您的< input type = submit />到< button type = submit>这是一个容器,并为UI设计师提供了更多的设计自由.如果您使用CSS类,那么您可能不会对其属性进行太多更改,但如果使用标签名称,则必须对您的CSS文件进行修改并对其进行修改.
另一个例子是与其他类型的输入,即取消按钮.如果在视觉上与提交按钮相同,设计人员可能会说“提交”是主要操作,“取消”是次要的,因此应将其显示为仅仅链接.使用类将会导致较少的维护.
为什么只有类CSS不是魔术子弹？
某些元素可能具有特定的CSS属性,而其他元素不具有.例如(un)有序列表.在这种情况下,编写基于标签的选择器定义适用于特定HTML元素的CSS样式是有意义的.但是为了避免在页面上选择同一类型的所有元素,建议将CSS选择器定义为基于标签和基于类的选择器的组合.这样就可以说在这种情况下有意义的CSS类选择器约束.
建议将通用样式属性与基于类的选择器进行分离,并将特定样式添加到基于类的选择器中,其约束为(LESS / SCSS语法)：
/* generic */
.navigation {
background-color: #999;
margin: 0;
.item {
display: inline-block;
padding: 10px;
}
}
/* specific to UL */
ul.navigation {
list-style: none;
}
这给了你最大的自由,并提高可维护性.
结论：基于类的选择器是首选提示：OOCSS
是.大多数时候.这样,您就可以使用较少的代码重复和异常来编写面向对象的CSS(article on SmashingMag,GitHub repo).它将提高您的CSS可维护性.
Important note: As with any code you shouldn’t over-engineer your CSS either. I’ve showed you how you can provide flexible style definitions,but you shouldn’t always follow these rules. You should provide just enough flexibility at the beginning and refactor as needed while you go. But keep yourself on the classes side most of the time.
