使用 Alt Aheader nav ul li a {color: red}
或 Alt B哪个更好.nav-link {color:red}
?
Alt a 的优点是我不需要引入更多的 css id/classes,但它比 alt B 更容易发生特异性战争。查看 jsfiddle:http: //jsfiddle.net/43znf/1/
使用 Alt Aheader nav ul li a {color: red}
或 Alt B哪个更好.nav-link {color:red}
?
Alt a 的优点是我不需要引入更多的 css id/classes,但它比 alt B 更容易发生特异性战争。查看 jsfiddle:http: //jsfiddle.net/43znf/1/
这确实是主观的。当我第一次了解到我使用 Alt A 完成所有操作时,但现在我将 A 和 B 混合使用。Alt A 会将样式应用于每个<header> <nav> <ul> <li> <a>
嵌套元素,这意味着如果您有多个与此嵌套模式匹配的部分,它们将被设置为样式指定的方式。当您使用 Alt B 时,您必须将 class / id 应用于某个元素,这意味着您可以选择哪个嵌套<a>
标签将接收样式。
最重要的是,仅在 Alt A 或 Alt B 中编写代码确实不切实际。我建议使用其中的一些。
编辑:如果您打算获得一份需要 HTML / CSS 编辑的工作,您的老板可能有某种他或她想要完成的方式。只是一些抬头。
编辑 2:知道何时是使用 ID 的适当时间以及何时应该使用 Class 也是一个好主意。ID 只能在文档中使用一次,类可以多次使用。
这取决于你希望你的 CSS 有多通用。如果您有一个想要样式的元素或少数几个元素,请使用 id 或 class。但是,使用 Alt A 将允许您添加新元素而不必分配 id/class。
您可以同时使用两者,并且两者在现实生活中都有有效的用例。当您拥有一个独特的元素并确保其样式不需要在其他任何地方使用时,您可以使用 id 来简化。
例如:您的网站“模板”或“布局”的标题部分保持不变,您可能不会重复使用这些样式。
但是当你必须为一个元素设置样式时,比如一个表单按钮,你必须使用一个 css 类,因为你会看到表单按钮会被多次使用。
如果你坚持原则,使用类可以很优雅。不要使用单个类对元素进行过度样式化。以智能的方式拆分规则,以便每个类都可以在其他地方使用。尽量避免在类中编写特定于上下文的规则,这会阻止您继承该类。