Question

据说CSS的目标是提供可视化表示，HTML的目标是提供文档的结构。好的，谢天谢地。它变得如此简单，特别是与字体标签相比！

但实际上，似乎我们很多人仍然依赖HTML来使用CSS，而不应该使用CSS。例如，通常会看到<div id="wrapper">将元素包裹在内部，这样身体就可以居中。在纯HTML中，它永远不会被使用，因为它没有意义，它只用于CSS。

右？那么，使用<div id="wrapper">实际上是否违反了内容呈现分离的基本原则之一？

Answer 1

有点儿。但这没关系。

“单独的内容和演示文稿”等原则很有帮助，因为它们可以让代码更容易更改，从而帮助您实现目标。它们不像核安全法规 - 与它们相矛盾不会冒任何人死亡的风险，因此“违规”是一个有力的说法。

坚持使用包装器<div>来解决CSS（和/或浏览器）中的限制很好。 <div>和<span>旨在用于此用途，因为它们被定义为不传达任何含义（即它们不会改变文档的“结构”）。它不会伤害代码。

如果你可以避免它，那很好。但如果不能，请不要担心。有更大的鱼可以炒。

Answer 2

在任何情况下，“包装器”都是id的错误选择。通常，包装DIV不仅用于简单的对齐任务（否则使用SPAN）并确实为您的网页提供/确定结构。因此，在我看来，包装DIV不会违反内容呈现分离。

Answer 3

您可以使用以下内容：

<div id="content_container">
<div id="section_container">
<h2></h2>
<p>stuff</p>
</div>
</div>

我相信这会为您的文档提供正确的结构。尽管为此设置元素可能更好（例如<content>和<section>），因为对于我们而言，id不能用于解析文档。 div没有实际意义它只是块元素的容器，所以我相信它不会违反内容呈现分离。

说了所有你还可以使用<body>元素来集中你的内容（毕竟它是一个元素），但我不是百分之百确定它是否适用于旧的IE（旧的意思是IE 6）

Answer 4

如果您的DIV ID在HTML5中具有完全等效（例如div id="nav"），则它是结构性的，因此完全可以接受。 div id="wrapper"可能相当于div id="article"或div id="section"，所以它可能没问题，但正如Anzeo所暗示的那样名称不足。

Answer 5

它可以做到，虽然有时div提供结构。我们必须接受CSS尚不完美，并且必须在我们的HTML中做出妥协。特别是在这种情况下，当所有浏览器都支持CSS3伪元素::outside（http://www.w3.org/TR/css3-content/#wrapping）时，我认为许多包装器div将变得不必要。

Answer 6

我的个人意见是包装器有一个非常有用和必要的目的，虽然我不使用术语包装器。考虑一个设置宽度为200px的div，但我们想要一个不影响div宽度的边框，我们需要这个解决方案：

div#posts {
    width: 200px;
    height: 200px;
}
div#posts-inner {
    padding: 10px;
    border: 1px solid #ccc;
}

<div id="posts"><div id="posts-inner">
    <p>My Posts</p>
</div></div>

如果你有效地标记你的CSS，你可以避免使用不太有用的css声明的例子，如：

#posts {
    border: 1px solid #ccc;
}

如果将CSS元素放入上下文而不是假设其类代表

div#posts-wrapper {
    border: 1px solid #ccc;
}

这将改善您的CSS中设计和内容元素的分离。

Answer 7

最好从语义上考虑这一点。您应该在零件的正确部分使用正确的标签。 HTML5是朝着这个方向迈出的一大步，允许使用更多的标签，例如'article'，'nav'和'section'，它们提供比div更多的语义含义。

然而，div对于设计师来说是天赐之物，因为它为你提供了一个简单的块级元素，除了提供页面的“分隔符”或“部分”之外几乎没有语义含义（很像'section'标签在HTML5）。没有任何其他东西，甚至在语义上使用也是完全可以接受的，因为我们没有任何其他具有相同含义并提供相同默认特征的东西。

它肯定不会违反样式和内容的分离，因为它为CSS提供了一个块来执行某些操作。如果不使用它并且保持语义结构，就无法在Web上创建大多数布局！

Answer 8

看到“DIV”很常见 id ='wrapper'“包裹元素因此身体可以居中。在纯HTML，永远不会被使用因为它毫无意义而且被使用了仅适用于CSS。

围墙不是建筑物的结构件吗？我认为，包含墙实际上是元素中最常见的结构部分之一。

所以不使用DIV id = wrapper 实际上违反了其中之一内容呈现的基础知识分离

不，包含元素（或<div id="wrapper">）与<header> <nav> <body>或<article>的文档结构一样多。

即使它不被认为是结构性的，不引人注目的设计的目标是将与样式（CSS）和行为（JavaScript）尽可能合理地分离结构（HTML）。最后，不引人注目的设计实际上只是一套最佳实践指南，可以创建更易于维护的代码。

违反规则不会使代码无效，并且通常违反规则可以创建更好，更易维护的代码。随着您的设计越来越多，您很快就会发现，有时候你不得不反对这种做法并忽视最佳做法。

包装器<div>是否违反内容样式分离？</div>

8 个答案: