Question

我有一种感觉，这是一个主观问题，但也许在互联网上的某些地方已经试图将其标准化，我只是不知道它（但是其他人将在这里发布）。 / p>

请注意：请忽略任何错误或省略元素属性，因为我正在寻找仅针对.css文件本身的创作提出的建议。两种方法都有效。但是，我个人更喜欢.css B，因为它似乎更正确，但是如果你正在处理父母更改类名的嵌套div，那么维护会很痛苦。

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

以下表格中包含更多“语义正确”的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>

对于这类事情是否有任何预定义的标准（谷歌没有产生多少收益），还是仅仅是个人偏好？

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

Answer 1

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

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

Answer 2

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

您的两个选项都易于阅读，在需要进行更改时很容易遵循，并且在语义上是正确的。我想在那时它归结为个人偏好。如果你认为你的第二种选择在你的眼中更正确，那就去吧。

附注：你在这个例子中保存了22个字节来使用选项A做同样的事情。它可能看起来不多，但可以加起来。

嵌套的div和CSS语义

2 个答案: