嵌套的div和CSS語義

Question

我感覺這是一個主觀的問題，但是也許Internet上的某處已經在嘗試對此進行標准化，而我只是不知道（但是其他將在此處發布的人）。

請注意：在尋找有關.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>

這類事情是否有任何預先定義的標准（Google收效甚微），還是僅出於個人喜好？

編輯：塔爾。 根據傑克的提醒進行了更新:)

Answer 1

也許我太哲學了，但是如果兩個樣式表產生相同的結果，那么從瀏覽器的角度來看，它們在語義上是等效的。

如果我們在談論人類可讀性，那么除非有充分的理由，否則我通常會采用“代碼越少代碼越好”的原則。 在這種情況下，我想不出一個。

Answer 2

我不知道這種事情是否有任何類型的“預定義標准”。 但是，在我所有的CSS中，我始終遵循這樣的思想： 少即是多 。 這就是我的建議：編寫最少數量的優質，干凈，可接受的代碼即可獲得結果。

您的兩個選項都易於閱讀，在/如果需要進行更改時很容易遵循，並且在語義上是正確的。 我想在那時，這取決於個人喜好。 如果您覺得第二種選擇在您眼中是更正確的，那就選擇它。

旁注：在此示例中，您節省了22個字節，以使用選項A執行相同的操作。它看起來似乎並不多，但可以加起來。