emboîtées divs et sémantique CSS

J'ai le sentiment que c'est une question subjective, mais peut-être il y a quelque chose quelque part sur les interwebs qui a tenté de normaliser ce déjà et je ne suis pas au courant (mais quelqu'un d'autre qui affichera Voici).emboîtées divs et sémantique CSS

Juste une note: S'il vous plaît ne pas tenir compte des erreurs ou élément omis les attributs que je suis à la recherche des suggestions concernant uniquement la création du fichier .css lui-même. Les deux méthodes fonctionnent. Cependant, personnellement, je préfère .css B car il semble plus correct, mais la maintenance peut être pénible si vous travaillez avec des divs imbriqués dont les parents changent de nom de classe.

Disons que j'ai une forme simple sur une page contenue dans un récipient div. Le formulaire comporte deux trois champs: deux zones de saisie et une zone de texte (from, subject et message).

qui serait plus "sémantiquement correct" CSS pour accompagner le formulaire suivant:

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

Existe-t-il des normes prédéfinies pour ce genre de choses (Google n'a pas donné grand-chose), ou s'agit-il uniquement de préférences personnelles?

Édition: Thar. Mise à jour basée sur le rappel de Jack :)

Source

2011-01-11 Demian Brecht

Y a-t-il une raison pour laquelle vous n'utilisez pas l'élément d'étiquette réel? http://www.w3.org/TR/html401/interact/forms.html#h-17.9 – JackCA

Autre que d'oublier que c'était là? ;) Nan. Cela changera cela. –

Personnellement, je donnerais aussi à la forme son propre identifiant, puis l'utiliserais dans le formulaire css ala form # contact. Si vous faites ces deux changements, cela reconstruirait complètement votre question et votre configuration, mais cela pourrait sembler meilleur. – JackCA

Je ne sais pas s'il existe un type de "norme prédéfinie" pour ce genre de chose. Cependant, dans tous mes CSS je suis toujours la mentalité que moins est plus. Et c'est ce que je recommanderais: écrire le moins de bon, propre, code acceptable pour obtenir votre résultat.

Vos deux options sont facilement lisibles, faciles à suivre quand/si des changements doivent être faits, et sémantiquement correctes. Je suppose qu'à ce moment-là, cela se résume à une préférence personnelle. Si vous sentez que votre deuxième option est plus correcte dans vos yeux, allez-y.

Side note: Vous économisez 22 octets dans cet exemple pour faire option en utilisant la même chose A. Il peut ne pas sembler beaucoup, mais il peut ajouter.

Source

2011-01-11 03:28:15

Peut-être que je suis trop philosophique, mais si les deux feuilles de style produisent le même résultat, alors ils sont sémantiquement équivalent du point de vue du navigateur.

Si nous parlons facile à déchiffrer, j'appliquent généralement le principe de « moins de code est meilleur code » à moins qu'il ya une bonne raison de ne pas. Je ne peux pas penser à un dans ce cas.

Source

2011-01-11 03:28:14

emboîtées divs et sémantique CSS

Répondre

Questions connexes