嵌套 div 和 CSS 语义答案

【问题标题】：Nested divs and CSS semantics嵌套 div 和 CSS 语义
【发布时间】：2011-06-06 22:18:16
【问题描述】：

我觉得这是一个主观问题，但也许互联网上的某个地方已经尝试将其标准化，我只是不知道（但其他人会在这里发帖）。

请注意：请忽略任何错误或省略的元素属性，因为我正在寻找仅与 .css 文件本身的创作有关的建议。两种方法都有效。但是，我个人更喜欢 .css B，因为它看起来更正确，但如果您使用的是嵌套 div，而其父级更改了类名，则维护可能会很痛苦。

假设我在一个包含在div 容器内的页面上有一个简单的表单。该表单有两个三个字段：两个输入文本框和一个文本区域（来自、主题和消息）。

以下形式的 CSS 更“语义正确”：

<div id="contact">
<form action="/index.php/forms/contact" method="POST">
    <label for="txt_replyto">From:</label><input type="text" id="txt_replyto"></input>
    <label for="txt_replyto">Subject:</label><input type="text" id="txt_subject"></input>
    <label for="txt_replyto">Message:</label><textarea id="txt_msg"></textarea>
</form>

(.css A)

<style>
div#contact    { width: 350px; }
div#contact form   { width: 100%; }
div#contact label { float: left; width: 20%; text-align: right; }
div#contact input   { margin-left: 1%; width: 79%; float: left; }
div#contact textarea { margin-left: 1%; width: 79%; float: left; }
</style>

或

(.css B)

<style>
div#contact      { width: 350px; }
div#contact form     { width: 100%; }
div#contact form label  { float: left; width: 20%; text-align: right; }
div#contact form input    { margin-left: 1%; width: 79%; float: left; }
div#contact form textarea  { margin-left: 1%; width: 79%; float: left; }
</style>

这类事情是否有任何预定义的标准（谷歌搜索它并没有带来太多收益），还是仅仅是个人喜好？

编辑：塔尔。根据杰克的提醒更新:)

【问题讨论】：

您是否有理由不使用实际的标签元素？ w3.org/TR/html401/interact/forms.html#h-17.9
除了忘记它的存在吗？ ;）没有。不过会改变这一点。
就个人而言，我也会为表单提供自己的 id，然后在 css ala form#contact 中使用它。如果您进行这两项更改，它将完全重建您的问题和设置，但看起来可能会更好。
同意，建议很好。但是，当涉及到嵌套元素时，我更关注语义（也许我的问题应该再澄清一点）。不过谢谢:)

标签： css semantics

【解决方案1】：

我不知道这种事情是否有任何类型的“预定义标准”。然而，在我所有的 CSS 中，我始终遵循 less is more 的心态。这就是我的建议：编写最少的好、干净、可接受的代码来获得你的结果。

您的两个选项都易于阅读，在需要进行更改时/如果需要更改时易于遵循，并且在语义上是正确的。我想在那一点上，它归结为个人喜好。如果你觉得你的第二个选项在你看来更正确，那就去吧。

旁注：在此示例中，您将节省 22 个字节来使用选项 A 执行相同的操作。它可能看起来不多，但可以加起来。

【讨论】：

【解决方案2】：

也许我太哲学了，但如果两个样式表产生相同的结果，那么从浏览器的角度来看，它们在语义上是等效的。

如果我们谈论的是人类可读性，那么我通常会应用“代码越少越好”的原则，除非有充分的理由不这样做。在这种情况下我想不出一个。

【讨论】：