Question

查看CSS Zen Garden，我可以看到将设计和内容分开是多么强大和方便。可能性似乎无穷无尽。可以更改样式表，整个站点的外观可以大幅改变。

假设我正在整理网站的HTML部分。我怎么知道把div放在哪里，把它们放在哪里等等？

例如，假设我想在屏幕上居中显示：我通常会将3个div组合在一起：一个display:table，一个display:table-cell和一个margin-left:auto;margin-right;auto内容。

假设我只是在做HTML内容，但在此阶段我没有考虑设计。如果我不一定知道我会将它放在屏幕中心，我怎么知道我需要将3个div组合在一起？

或者，如果我现在有一个带有HTML / CSS的设计，并且我的div和跨度都已经完成，那么如果我决定将CSS更改为全新的布局，会在18个月内发生什么？有时候我会有额外的div，有时我也不够。

据推测，拥有更多级别而不是更多级别总是更好。这样，可能发生的最糟糕的事情就是你有一些多余的div，它们没有风格，没有明显的效果。

这通常是其他人的问题吗？我知道CSS Zen Garden是一个特例，但是当你更改相应的CSS时，你通常会更改HTML代码吗？

Answer 1

我在网络开发方面工作了很多年，而在Reality这里的东西与理论有点不同：没有分离内容和表达的东西。您最终会在其他div s。

中滑动

您最好遵循YAGNI原则。在编写HTML时不要担心CSS。稍后再回来做必要的调整。

至于Zen Garden，你会在源代码中找到评论：

此xhtml文档已标记为设计人员提供最大可能的灵活性。有更多的课程和多余的标签，而且在现实世界的情况下，它更有可能更加精简。

Answer 2

理论上，为了更改样式，您不必触摸数据（HTML）。在实践中，你提到了那些问题。

我会做的是对div的一种或多或少的明智使用（例如，我认为我可能想要移动的任何东西，或者我想要一起引用的任何HTML群 - 都会去在它自己的div）。否则，出于可读性，可维护性和HTML大小等原因，请不要使用太多div 然后，每当你想改变风格时，尽量少加上div，这样你就可以做你想做的事。

Answer 3

CSS是一个真正的问题，CSS3的作者。最近的published draft (2003) of the CSS Generated and Replaced Content module讨论了一个名为::outside的伪元素，它可以解决您描述的问题。

时，它将被实施

<div class="mycontent">Some text</div>

允许你写：

div.mycontent { margin-left:auto;margin-right:auto; }
div.mycontent::outside { display:table-cell; }
div.mycontent::outside(2) { display:table; }

不幸的是，::outside伪元素从未进入CSS3选择器规范，next draft (2011) of the CSS Generated and Replaced Content module也不会提到::outside伪元素。

因此，我们一直坚持将包装div放在任何地方，以防你注意到，不允许正确分离演示和内容，并且仍然是一个非常不令人满意的情况。

Answer 4

这一切都取决于您的网站的驱动方式。如果您使用的是模板文件，则更新量将会很小。

你不想用多余的Div重载你的代码，因为a）加载时间（虽然它理论上差别很小）和b）因为当别人编辑你的文件时会产生很多混乱。

从您的示例中，您可能习惯于使用表格样式布局。使用Div来包含您的布局将使灵活性变得非常容易。