Question

我不是html / css专家，并且一直在努力实施一些最佳实践。在最近的一个项目中，我完成了90％的<h>, <div>, and <p>标签（例如）在外观元素之前或之后具有白色间距，并且间距经常变化。我最近开始将所有内联样式移动到外部样式表。当样式是内联的时，很明显元素之间有多少空间。将它们移动到外部文件后，真的不清楚。在查看我不知道的html时，“这个<div>之前或之后是否有空格？它是否与基本样式表有间距？是否在其他文件中被覆盖？”

因此，我在我的基本css文件中定义了几个类：

.singleSpaceAfter
{
  padding-bottom:1em;
}
.singleSpaceBefore
{
  padding-top:1em;
}
.doubleSpaceAfter
{
  padding-bottom:1.5em;
}
.doubleSpaceBefore
{
  padding-top:1.5em;
}

然后我在我的<div>, <p>, <h>元素中应用此类，它就是 A）当空间存在时清楚 B）类名对于多少空间（padding-top：1em..1.1em，1.2em ..）不够模糊，因此它很灵活。

前提是html用于内容而css用于布局，是我疯了吗？

我的css文件非常小，我喜欢它。如果我必须按元素ID指定所有<h>, <p> and <div>标记的间距，它们将变得非常大且复杂。

我还没有看到其他任何人使用我上面使用的方法，所以我相信它违反了一些最佳实践，但到目前为止我喜欢它并且它适用于我。我希望有一些明智的论据，说明为什么这是好的。

感谢您迄今为止的所有评论。我确实使用了Eric Meyer的CSS Reset（我从另一个stackoverflow帖子中发现:-)，但不认为它与我的实现相关。

至于在基础中定义额外的间距/边距/填充：这感觉就像我经常（50％的时间）必须在其他css文件中覆盖它们。我认为这会导致各种各样的“神秘”间距。至于按元素id设置每个元素的样式，看起来它会非常混乱。我可能总共有100多个div / p元素，并且在一个单独的文件中为每个人定义填充（每个都有两个或三个变体之一）只是感觉很乱。而且它使得HTML不那么具有描述性。

我描述的方法似乎使html非常易读（就空间来源而言没有任何含糊之处）而且css总共约为20行。

感谢您真诚地回答我的问题。我期待更多的菜鸟参考

Answer 1

使用CSS reset，然后按照您想要的方式设置元素的样式。这可以确保浏览器之间的一致性。

Answer 2

我已经看过之前经常使用的类命名约定，它总是困扰我。现在，这可能归结为开发者风格和个人偏好，但这是我的推理。正如您所说，HTML是针对内容的，CSS用于视觉设计和布局。因此，使用表示内容视觉方面的类名违反了该原则。

相反，找出为什么某些段落有更多填充。也许，这是因为介绍文本总是更多填充。也许侧栏段落总是比主要内容更多。如果真正任意，那对我来说似乎很奇怪。

确定了不同类型的内容后，请提供适当的类名。您可能会发现您甚至不需要应用类，并且发现您可以使用不同的选择器，可能包括：

.mainContent p:first-child
.sideBar p
.comment p

Answer 3

你的方法对我来说似乎是明智的。我对字体大小和颜色采用了类似的方法。我有一个textmed，textlarge，textxlarge等，关键是它是可重用的，而且不复杂。只要它易于为您维护，那么请采用这种方法。

但是，我会提醒说，不同的浏览器会以不同的方式呈现HTML，例如，IE与Gecko vs.工具包之间的默认填充和对象之间的间距是不同的。为了解决这个问题，我通常应用全局样式* {padding：0px; margin：0px;}这是一个不幸的副作用，但是，失去了UL标签的默认标签

Answer 4

通常的做法是首先使用CSS重置。由于不同的浏览器对于每个html标记都具有不同的边距和填充的默认值。 CSS重置会在同一只脚上启动所有浏览器。

从这里，您可以为每个元素声明一些基本样式。记住元素不仅具有填充，它们也具有边距。保证金也将合并形成一个保证金最大的保证金。

Answer 5

据我所知，这样做很好，它不会违反最佳做法，它会使您的代码具有可读性，这是决定最佳实践的重要因素。以有意义的方式命名您的类没有任何问题。而且，由于这个原因，使用em定义间距是很方便的;它会根据您的字体大小进行调整。

Answer 6

我看到的唯一问题（不是说它错了）就是说，他们告诉你“我们可以在帮助页面中添加额外空间”，然后你需要将所有帮助页面更改为“DoubleSpaceAfter” ，哪种打败了CSS的优点之一。如果您可以在语义上定义样式，例如'help_header'，'help_text'等（不是通过ID，而是通过类，这会使它更加可重用），那么您只需要更改CSS文件中的类样式没有触及HTML。

Answer 7

如果适合你，那就去吧。但它违反了一些最佳做法。我强烈推荐CSS重置，例如Eric Meyer's，然后从那里应用你的样式。我个人不喜欢每个元素有多个类，除非绝对必要，但是，正如我所说，如果它对你有用而没有人告诉你改变它，那么你可以继续这样做。但是，我建议您尝试重置并查看如何/如果您喜欢它，因为您可以设置每个元素的样式而不必担心变化的空白。而且，如果你不喜欢它，你可以回到你现在正在做的事情。

使用CSS定义元素之间的间距

7 个答案: