应该先编写XHTML还是CSS？

Question

在制作CSS布局时，应该先编写XHTML代码还是CSS代码？

1. 先编写完整的HTML代码，然后根据HTML编写CSS。
2. 同时编写设计元素的HTML和CSS。
3. 先编写完整的CSS，然后根据HTML编写HTML。

我在这篇文章的第7点上阅读到“先创建HTML”这个建议最好遵循吗？

编辑：

并且在这个教程中，作者也是先编写HTML，然后使用Web开发者工具栏的Edit CSS选项编写CSS。我认为这是最好的方法。

- Jitendra Vyas

Answer 1

在实践中，通常需要将两者结合起来使用。首先使用HTML来草拟设计的基本框架，然后在这个想法周围加入CSS。通常情况下，您会发现自己需要添加一些标记以提高灵活性（例如，可能需要几个嵌套容器来正确对齐某些内容等）。

- Amber

Answer 2

我曾经在设计网站时考虑过这个问题。

我的结论是，即使XHTML和CSS被定义为内容和表现分离的，实际情况仍然使得网站的外观很大程度上取决于文档结构——即标记语言XHTML，因此单独使用CSS无法完全依靠样式表来彻底改变网站的外观。我希望它能够做到，但事实并非如此——当然，这是CSS的主要目的。当然，这就是它的美妙之处——由于每个元素都是完全隔离的，网站开发人员可以放心地编写网站文档的结构，而CSS作者可以并行工作并编写样式表。然后将两者合并，并且知道标记不需要再次更改。这就是理论。

实际上，这种方法通常行不通——因为文档具有自上而下、从左到右（通常）的绑定语义，因此很难使出现在文档结构底部的元素出现在用户浏览器页面的顶部。限制与理论相悖。

由于上述含义以及CSS和标记技术的一些其他现实限制，我决定将标记简单地视为内容和样式之间的东西。也就是说，一些标记不幸地会决定样式，无论使用什么样式表——元素的顺序就是其中之一（见上文），分页限制等等——因此，尽管大多数结构可能与其外观隔离，但其中一些外观将受到其影响。因此，如果我们不考虑客户端脚本（可以通过重新排列文档元素来帮助样式），一种方法是使用XML作为内容，XHTML作为内容和样式混合层，最终使用CSS来指定外观。

XML在这里起什么作用？好吧，你可以使用XSLT将其转换（在浏览器或服务器端）为XHTML文档，并将其视为样式处理过程中的相关内容。也就是说，如果您有一个包含1000个条目的艺术家列表，并且想要自定义页面的外观，可以使用以下内容XML：

<artists>
    <artist name="Moby" />
    <artist name="Cocorosie" />
    <!-- and so on -->
</artists>

这被认为是不变的内容，无论最终样式如何 - 这是将内容与呈现分离的一个重点，这是在XHTML中无法完全实现的，因为CSS无法做某些事情。但是，使用XSLT可以将上述内容进一步转换为所需的标记（您可以随后应用CSS）：

<xsl:transform>
    <!-- XSLT is beyond the scope of this... -->
</xsl:transform>

将会把XML转换成类似如下的格式：

<h1>Artists</h1>
<h2>Page 1 of 10</h1>
<ul>
    <li><a>Moby</a></li>
    <!-- Only 100 artists per page -->
</ul>

然后您可以对其进行样式设置。

总之，您可以控制将原始数据库内容转换为最终用户应用程序的每个点。

XSLT 处理 XML 的许多功能都可以使用 XHTML 上的 JavaScript 来代替，但我认为客户端脚本是一种补充，而不是 XSLT 等东西的替代品。不过，Firefox 和大多数现代浏览器都可以在客户端执行 XSLT，这模糊了脚本和文档服务之间的区别。

- Armen Michaeli

Answer 3

我认为先做一个再做另一个是错误的。编程是一个迭代的过程。写出两者都能工作的东西，然后再重复这个过程。建立在此基础之上，不断迭代。

如果你只写HTML而不写任何CSS，那么你会发现以后需要偿还大量技术债务。

- bestattendance

---

我同意这个观点。在大多数情况下，您无法完全写出HTML代码，您仍然需要不时添加div元素和/或调整标记以与CSS一起使用。先标记页面确实可以使事情保持简洁，但并非始终如此务实。文章中提到的第4条建议“使用重置”。我认为那是很糟糕的建议。它们很少有必要，而且可能会导致许多“到底怎么回事？！”的时刻。 - mark123

Answer 4

这真的取决于你的网站有多大...如果是一个小网站，顺序并不重要。如果是一个大型网站，我通常会先用HTML设计基本结构，然后是基本CSS，然后再细节上处理HTML和CSS。

一些建议：

1. 重复使用已经制作好的CSS和HTML。 例如，如果你已经有了带有基本HTML包装器的模板，请将其保存到下一个项目或页面中； 或者，如果你在CSS中将所有图像设置为border:none，那么你可以轻松地保存一些具有基本设置的CSS文件
2. 在设计之前，在你的脑海中看到一个对象
3. 在5个主要浏览器（ie6 ie7 ie8 chrome和firefox）中进行检查

- eugeneK

Answer 5

我个人先写很多CSS，然后再写HTML，然后一次性调整这两个（除了常见元素）。起初听起来有点违反直觉，但是当你将CSS视为不仅仅是样式，而是具有样式或没有样式的元素时，它实际上非常快速并且生成精简代码。

一旦我确定了一些核心样式，编写HTML只是一个问题...

<wrapper>
<div header>
<div this>
<div that>
<form>
<div footer>

...而且它们都大致符合我已经定义的样式和布局。对于不需要样式的元素，我在编写CSS时只是在脑海中跳过了它们。

- Tom

Answer 6

我通常选择第二个选项：

同时编写设计元素的HTML和CSS

这真的很有帮助，例如，当我编写html时，我会顺便编写CSS，这有助于我快速发现任何可能的布局或跨浏览器兼容性问题。如果我先编写整个html，然后再编写css，那么事情就变得有点复杂了，你需要花费更多时间来纠正/样式化已经创建的整个html。

至于您提供的链接，我只想说作者有自己的看法和个人工作方式。换句话说，这也取决于您最舒适或最快的方式。

- Sarfraz

Answer 7

在写HTML之前（除了body标签！），你不能写CSS，否则你就像盲人一样工作。

对于我来说，我会制作一个网站布局的模型，写下整个HTML，然后编写仅用于布局的CSS。

我使用Expression Design来切割图片并添加/修改HTML/CSS，直到获得最终模板。

- Omar Abid

---

如果我们在 HTML 中使用与 CSS 中相同的 ID 或类，则可以在编写 HTML 之前编写 CSS。如果我们有一个设计图，我们可以想象并编写 CSS。 - Jitendra Vyas

你能想象有多复杂吗？如果是一个大而复杂的模板（就像我说的，它会像盲人一样工作），那该怎么办？ - Omar Abid

请查看此教程：http://net.tutsplus.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/ - Jitendra Vyas

Answer 8

我不喜欢来回修改代码的想法。如果我在 html 中的 #header，那么现在为头部设置样式对我来说似乎非常合理。这对我的心理健康有好处 :D

所以我选择了第二个选项：我同时编写代码。

- Ionuț Staicu

Answer 9

在编写 CSS 之前，您必须先编写 HTML。

您的问题就像是，在拥有汽车之前设计汽车内饰是否更好？

这可行吗？还是这是一项明智的工作？

- Nasser Hadjloo

Answer 10

鉴于大多数设计并不简单，并且遵循基本的语义规则，当您尝试使布局看起来与您想象中的一样时，您总是需要调整HTML代码。因此，同时进行这两个操作可能是最实用的方法，尽管其他两个选项也可以使用；您只需要稍后进行调整即可。

- poke