utilisation des attributs Minimisation de style de remplissage explicite

Question

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

Cest dire que je suis en train de beaucoup de rembourrage ou des marges explicites.

Je me demande quelle meilleure approche à cette question est sans se retrouver avec les noms de classes comme celles-ci:

.mediumPadding { 
    padding-top:10px; 
} 

.smallPadding { 
    padding-top:5px; 
} 

.padding15 { 
    padding: 15px 
} 

Quand je suis codage contenu réel comme celui-ci par rapport à l'ensemble plus générique AGENCEMENT j'ai tendance à trouver que les tailles de rembourrage spécifiques sont plus appropriées. Je vais me retrouver en train de passer de 8px à 11px puis de 9px. Ca doit être le designer en moi, mais je n'aime pas vraiment l'habitude que je me forme. Je ne me vois pas capable de revisiter une règle globale qui dit que le 'padding moyen' est 9px et le changeant en 11px et m'attendant à des résultats satisfaisants. Cela peut rendre certaines pages plus jolies et en ruiner d'autres.

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

Answer 1

Votre code souffre d'un cas grave de div-ite. Je commencerais par utiliser des 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 pour les éléments communs, puis les styler au besoin. Vous constaterez que certains types d'éléments partagent un style, peu importe où 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 qui représentent des spécificités de conception, vous injectez le comment dans votre code HTML.

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

Answer 2

Vous pouvez avoir une règle générale et la dérogation avec les règles d'identification dans les cas spécifiques en cas de besoin:

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

Answer 3

Souvent, le premier et le dernier élément dans un récipient nécessite un traitement spécial. Il semble que ce soit le cas dans votre exemple. Les sélecteurs first-child et last-child ne sont pas encore très fiables sur les navigateurs (principalement à cause d'IE6), donc vous pouvez soit ajouter des classes manuellement pour le premier et le dernier élément, soit utiliser un peu de javascript pour vous aider - Offspring le fait bien.

Answer 4

Chacune de ces divs aura un but. Une raison pour laquelle ils ont été traités différemment. Trouve-le et donne à 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 pensez pas correctement à la sémantique. Une fois que vous avez vos cours là-bas, vous pouvez éditer votre feuille de style rapidement et sans effort en utilisant Web Developer etc.