理解CSS Lint警告

Question

我正在为我们的网站编写CSS，我只是通过CSS Lint运行它。我正在努力理解相当多的警告，这将极大地得到社区的帮助。

1. 请勿在选择器中使用ID。

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

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

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

3. 破损的盒子模型：使用带有border-top的高度。

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

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，没有可能重用。这很多   首选使用选择器中的类，然后将类应用于   页面中的元素。

1. 小心破损的盒子模型

  

边框和填充在元素内容之外添加空格。设置   宽度或高度以及边框和填充通常是一个错误   因为你不会得到你正在寻找的视觉效果。 CSS Lint   当规则使用宽度或高度以及填充和/或时，警告   边界。

我认为ID是有原因的，如果你做正确的计算，你不必担心破损的盒子模型。