Minimiser l'utilisation d'attributs de style de remplissage explicites

Question

Je constate que j'écris beaucoup de code qui ressemble à ceci:

           <div id="leftCol">

                <div style="padding-top:10px">
                    <asp:Image ID="imgRazor1" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX" runat="server" />
                </div>

                   <div style="padding-top:10px">
                    <asp:Image ID="imgRazor2" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX_CART" runat="server" />
                </div>

                <div style="padding-top:20px; padding-bottom:15px">
                    <asp:Image ID="Image3" ImageUrl="~/images/announcements/announcement1.jpg" runat="server" />
                    <div style="font-size:x-small">(from example.com)</div>
                </div>
            </div>

C’est dire que je mets beaucoup de marges ou de marges explicites.

Je me demande quelle est la meilleure approche à adopter sans se retrouver avec des noms de classe comme ceux-ci:

.mediumPadding {
    padding-top:10px;
}

.smallPadding {
    padding-top:5px;
}

.padding15 {
    padding: 15px
}

Lorsque je code le contenu réel de cette manière, par opposition à une disposition générale plus générique, j'ai tendance à penser que des tailles de remplissage spécifiques sont plus appropriées. Je vais me retrouver passant de 8px à 11px puis de nouveau à 9px. Ce doit être le designer en moi, mais je n'aime pas vraiment l'habitude que je suis en train de prendre.

Je ne me vois pas être en mesure de revoir une règle globale qui dit que le 'padding moyen' est de 9 pixels et le change en 11 pixels et attend des résultats satisfaisants. Il se peut que certaines pages soient plus belles et que d’autres en soient ruinées.

Que font les autres pour résoudre ce problème? Je veux des avantages de CSS, mais j'ai besoin d'un contrôle précis.

Answer 1

Votre code souffre d'un cas grave de div-itis. Je commencerais d'abord par utiliser les balises appropriées pour les en-têtes, les paragraphes, etc. Une fois que vous avez un document correctement balisé, vous pouvez ajouter des classes aux éléments communs, puis leur attribuer un style si nécessaire. Vous constaterez que certains types d’éléments partagent un style, où qu’ils se trouvent, ce qui vous permet de réduire le nombre de styles en ligne.

Vos classes doivent refléter un attribut de l'élément (par exemple, "légende"). En général, les classes ne doivent pas faire référence à une implémentation de conception spécifique. HTML est le "quoi", CSS est le "comment". Lorsque vous utilisez des classes CSS représentant des spécificités de conception, vous injectez le comment dans votre code HTML.

(Oui, parfois, ces règles doivent être enfreintes. Mais ce sont des exceptions.)

Answer 2

Chacune de ces divs aura un but. Une raison pour laquelle ils ont été traités différemment. Trouvez cela et donnez à ces divs un nom qui reflète le contenu.

<div id="leftCol">
  <div class="navigation"></div>
  <div class="calendar"></div>
</div>

Ensuite, vous devriez mettre votre rembourrage dans la feuille de style. Si vous revenez au style en ligne pour les éléments de conception, vous ne réfléchissez pas correctement à la sémantique. Une fois que vous avez terminé vos cours, vous pouvez modifier votre feuille de style rapidement et sans douleur en utilisant Web Developer, etc.

Answer 3

Si nécessaire, vous pouvez avoir une règle générale et la remplacer par des règles id dans des cas spécifiques:

#leftCol > div { /* general rule */ }
#img1 { /* custom override 1 */ }
#img2 { /* custom override 2 */ }

Answer 4

Souvent, le premier et le dernier élément d'un conteneur nécessitent un traitement spécial. Il semble que ce soit le cas dans votre exemple.

Les sélecteurs premier enfant et dernier enfant ne sont pas encore très fiables sur les navigateurs (principalement à cause de IE6), vous pouvez donc ajouter des classes manuellement pour le premier et le dernier élément ou utiliser un peu de javascript pour vous aider - La progéniture fait cela très bien.