Common classes for margin and padding

Question

I have declared common css classes for common margin and padding classes in my css so that i can use them without making other css declarations too specific.

For example :

.padTB5{padding:5px 0;} 
.pad10{padding:10px;}
.mTop10{margin:10px 0 0;} 
.mTop5{margin:5px 0 0;}

1. Is this method right??
2. If not then why?
3. If yes then which is better margin or padding? (I know margin issues with browsers)

Please guide... thanks in advance :)

Yusuk

Classes should be related to what the element does in the document, not how it look like. GOOD: header, footer, note, title, main-menu... BAD: red, margin5, bold, ... – Labyrinthodont

I appreciate everyone's efforts for such quick responses and discussions. @VirtualBlackFox: I'll need 5px or 10px (max) spacing for top and bottom throughout the site for ,most of the modules... so if i keep these classes what name you would suggest for these classes so that they are easily identified? – Yusuk

These are called atom classes. Use a naming convention that does not include the actual unit size. For example: For a small margin-bottom, write mb-s. For a large padding-right, write .pr-l. Sizes can be written like: -xs, -s, -m, -l, -xl. As far as what Julien said, ignore that advise. This is what Yahoo, Inuit 5.0, and others do. It actually prevents duplication of rules in object abstractions. I have talked to Johnathen Snook, Harry Roberts, and other experts who agree they have their place - just limit them. – Catullus

I forgot to add, the reason you don't want to include a unit size in atom classes is because of the design. A good place to look is in Yahoos source code. They also have a generator on their GitHub. SuitCSS also has some good "helper" classes. Again, not to sound mean to other contributers, but this is very acceptable in the Frontend UI world and used by even the pioneers of best modern-practices. – Catullus

Answer 1

Margin is different then padding. Margin is the space out side the box, padding is the space inside the box. Both margin and padding are cross browser compatible. Your declarations are correct although it is not a recommended practice to create classes for margins or padding. One good use to this is creating a class for rounded corners or shadows, where you can quickly apply round corners by specifying the round corner class.

Assailant

I wouldn't say it is not a recommended practice, It is and it is better to have a lot of classes for different margin and paddings than using in-line style attribute or adding an ID to just add a padding or margin – Coarsen

Answer 2

1. This is bad practice as classes should be semantic - that is they should describe the type of thing you are styling. For example "blog-header", "primary-this", "secondary-that" etc.

2. In practice, the downside to using classes as you describe is that if your visual design changes and you need different sized margins or padding, then you will need to change the class names too - which means changes to both the CSS and HTML. Or if you just change the CSS then the class names no longer describe what they're for. This approach is not much better than using inline styles.

3. Margins and padding are different things and behave in different ways. Margins can collapse in certain circumstances whereas padding doesn't. Padding will include background images or colours whereas margin doesn't. Borders will display between padding and margin.

Glavin

Answer 3

In my opinion, this is not optimal, unless you do it right.

In your markup, you now have something like this:

<div class="pad10 mTop10">

and you have that all over your site.

What if you want to change your CSS to have a little extra margin/padding?

.pad10 { padding: 12px }
.mTop10 { margin: 12px 0 0 } 

Oh. Those class names aren't looking so sensible anymore: you have to either put up with wrongly named selectors, or go Find and Replace in all your files.

What if you decide that some elements with .pad10 need to have red text?

.pad10 { padding: 12px; color: red }

Now the class name makes even less sense.

It might be alright to do this type of thing if you also apply a relevant (semantically sensical) class/id to each element in your HTML:

<div class="contactErrorMessage pad10 mTop10">

because that way, at least you can do:

div.contactErrorMessage { color: red }

Thaw

Thanks every one for your responses. Really appreciate it :) – Yusuk

Answer 4

You shouldn't do that. Naming classes like left or margintop20 is unadvised. You should use classes like content or sidebarBox, that describe the content.

Let's say you want to change the margin-top from 10px to 1em. Using your method either

• mTop10 will have margin-top: 10px;
• or you have to change your className to mTop1em

None of this is good.

See w3.org goodclassnames about this.

Also see w3.org about box model for margin, padding.

Asternal