Home/ Questions/Q 112841
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T02:36:30+00:00

I am finding I’m writing a lot of code that looks like this: <div

  • 0

I am finding I’m writing a lot of code that looks like this:

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

Thats to say I am putting a lot of explicit padding or margins.

I’m wondering what a better approach to this is without ending up with class names like these:

.mediumPadding {     padding-top:10px; }  .smallPadding {     padding-top:5px; }  .padding15 {     padding: 15px }

When I’m coding actual CONTENT like this as opposed to more generic overall LAYOUT I tend to find that specific padding sizes are more appropriate. I’ll find myself changing from 8px to 11px and then back to 9px. It must be the designer in me, but I dont really like the habit that I’m forming.

I dont see myself being able to revisit a global rule that says ‘medium padding’ is 9px and changing it to 11px and expecting satisfactory results. It may make some pages look nicer and make ruin others.

What do other people do to solve this problem? I want benefits of css, but I need fine control.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Your code suffers from a serious case of div-itis. I would first start by using proper tags for headers, paragraphs, etc. Once you have a properly marked-up document, you can add classes for common elements, then style those classes as necessary. You’ll find that certain types of elements share a style no matter where they are, so you can minimize the amount of inline styling.

    Your classes should reflect an attribute of the element (e.g. ‘caption’). In general, classes should not refer to a specific design implementation. HTML is the ‘what’, CSS is the ‘how’. When you use CSS classes that represent design specifics, you’re injecting the how into your HTML.

    (Yes, sometimes these rules need to be broken. But those are exceptions.)

    • 0