样式化可以放置在页面中任何位置的元素的最佳实践

Question

我想知道是否有最佳实践来设计任何元素的样式，这些元素又可以放置在页面的任何位置并保留其空白。 例如： 具有规则集<h1>的{​​{1}}标签和具有margin-bottom: 2rem;规则集的<p>标签。 现在，这些元素可以在网页中的任何位置使用。但是我们将margin-top: 2rem放在<h1>标记之前，我们会遇到<p>的间距，现在我想要的行为是保持一个或两个另一个。提醒您，这是一个小例子，网页可能包含各种html元素以及按钮和其他组件。为每个实例和组合创建规则集非常耗时且麻烦，是否有更好的方法？

Answer 1

如果您知道margin collepsing，那么它可以帮助您了解<h1>和p之间的余量仅为2rem而不是4rem，这里是{{3 }}的问题...希望您对此有所帮助

Answer 2

大多数元素（例如<h1>和<p>）具有内置的默认垂直边距。这些是“普遍接受的”准则，您不应明确需要来覆盖它们。您可以，但是，如果要设置可以在任何地方使用的“通用”边距，最好的方法是使用类。例如：

.margin-top {
  margin-top: 15px;
}

任何具有此类的元素（例如<h1 class="margin-top">）都会使该规则覆盖其默认值。自然，您可以将规则直接应用于h1

是的，您会遇到这样一种情况，即您的上边距和下边距彼此相邻，但是您需要确定何时可以接受这种行为，何时不能接受。一种避免这种情况的方法是使用adjacent sibling combinators：

h1 + p {
  margin-bottom: 0;
}

由于上述规则比常规的h1选择器具有更多的specificity，因此它将具有优先权。

是的，要弄清楚您可能遇到的所有可能的组合将很痛苦，并且您将必须为每种情况编写规则。但是，您可以将上面的类驱动方法与相邻的同级组合器结合使用，以大大帮助消除此问题：

.margin-top {
  margin-top: 15px;
}

.margin-bottom + .margin-top {
  margin-top: 0;
}

这将完全阻止类margin-top的任何元素仅在设置了margin-bottom的类之后使用它的边距 。

请注意，已经存在许多其他方法，one such approach利用乐高类比建议仅在等于装订线一半的每个元素上使用padding：

$gutter: 20px;
.element {
  padding: $gutter / 2;
}

在完整的概念验证代码示例here中对此进行了说明。