Verschachtelte Divs und CSS-Semantik

Question

Ich habe das Gefühl, dass dies eine subjektive Frage ist, aber vielleicht gibt es irgendwo im Interweb etwas, das versucht hat, dies bereits zu standardisieren, und ich bin mir dessen nur nicht bewusst (aber jemand anders wird es posten) hier ist).

Nur ein Hinweis: Bitte ignorieren Sie alle Fehler oder weggelassene Elementattribute, da ich nur Vorschläge für das Authoring der .css-Datei selbst suche. Beide Methoden funktionieren. Allerdings bevorzuge ich persönlich .css B, wie es richtiger scheint, aber Wartung kann ein Schmerz sein, wenn Sie mit verschachtelten divs arbeiten, die Eltern Klassennamen ändern.

Nehmen wir an, ich habe ein einfaches Formular auf einer Seite, die in einem div Container enthalten ist. Das Formular hat zwei drei Felder: zwei Eingabetextfelder und ein Textfeld (aus, Betreff und Nachricht).

Welche desto mehr "semantisch korrekt" CSS das folgende Formular würde zu begleiten:

<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> 

oder

(. 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> 

Gibt es irgendwelche vordefinierten Standards für diese Art von Dingen (Google'ing es gab nicht viel), oder ist es nur persönliche Präferenz?

Bearbeiten: Thar. Updated basierend auf Jacks Erinnerung :)

Answer 1

Ich weiß nicht, ob es irgendeine Art von "vordefinierten Standard" für diese Art von Sache gibt. In meinem gesamten CSS folge ich jedoch immer der Einstellung weniger ist mehr. Und das ist, was ich empfehlen würde: Schreiben Sie die geringste Menge an gutem, sauberem, akzeptablem Code, um Ihr Ergebnis zu erhalten.

Ihre beiden Optionen sind leicht lesbar, können leicht nachvollzogen werden, wenn Änderungen erforderlich sind, und sind semantisch korrekt. Ich nehme an, dass es dann zu persönlichen Vorlieben kommt. Wenn Sie der Meinung sind, dass Ihre zweite Option in Ihren Augen richtiger ist, dann gehen Sie mit.

Seitennotiz: Sie sparen 22 Bytes in diesem Beispiel, um dasselbe mit Option A zu tun. Es scheint nicht viel, aber es kann sich addieren.

Answer 2

Vielleicht bin ich zu philosophisch, aber wenn beide Stylesheets das gleiche Ergebnis produzieren, dann sind sie semantisch äquivalent aus der Perspektive des Browsers.

Wenn wir menschliche Lesbarkeit sprechen, dann verwende ich normalerweise den Grundsatz "weniger Code ist besser Code", es sei denn, es gibt einen guten Grund, nicht zu. Ich kann mir in diesem Fall keine vorstellen.