理解CSS Lint警告

Question

我正在为我们的网站编写CSS,我只是通过CSS Lint运行它.我正在努力理解相当多的警告,以便社区的帮助.

1. 不要在选择器中使用ID.

   这不是ID的重点吗？用于解决页面上的特定元素？

2. 选择器中有2个ID,真的吗？

   有没有更好的方法来选择元素而不是在同一行中使用两个选择器？

3. 破箱模型:使用带有边框顶部的高度.

   我不知道这是什么意思.我的理解是箱子高度与边界高度是分开的.我已经为元素定义了一个高度,然后边界边被单独定义,我哪里错了？

4. 标题(h1)不应该是合格的.

Answer 1

我没有使用CSS Lint,所以我不确定其中的大多数.但关于2.,"选择器中的2个ID",我猜他们正在标记它,因为它可能是多余的.ID选择器指示该元素在页面上是唯一的.因此,如果你在选择器中使用两个ID,例如#main #navigation,你可能很容易使用最后一个,例如#navigation.

但是,如果您使用较高的ID来表示您所在的页面类型,那对我来说就好了.

无论你想做什么,都有很多善意的CSS人非常热衷于告诉你应该和不应该做什么.

Answer 2

如果您浏览http://csslint.net/about.html,则说明以下内容:

1. 不要在选择器中使用ID

不应在选择器中使用ID,因为这些规则与HTML紧密耦合,不可能重用.最好在选择器中使用类,然后将类应用于页面中的元素.

2. 小心破损的盒子模型

边框和填充会在元素内容之外添加空间.设置宽度或高度以及边框和填充通常是一个错误,因为您将无法获得您正在寻找的视觉效果.除了填充和/或边框之外,当规则使用宽度或高度时,CSS Lint会发出警告.

我认为ID是有原因的,如果你做正确的计算,你不需要担心破损的盒子模型.