0

I'm thinking of creating some CSS styles for padding and margin that would work something like this...

If you want to add padding to all four sides...

<div class="Pad4">

If you want to add padding to the top and bottom...

<div class="PadV">

If you want to add padding to the left and right sides...

<div class="PadH">

Similar styles would designate padding for the top (PadT), bottom (PadB), left (PadL) or right (PadR) sides.

The second class of styles would designate the amount of padding or margin. For example, 10 = 10 pixels, 25 = 25 pixels.

You would then put it together, like this:

<div class="PadV 10 PadH 25">

This particular div would then have 10 pixels padding on the left and right sides and 25 pixels on the top and bottom.

Of course, this won't work exactly as I've described it because of a number of issues. For example, imagine these two div's...

<div id="Uno" class="PadV 10 PadH 25">
<div id="Dos" class="PadV 25 PadH 10">

If I then have the following style...

.PadV.10

how could I make sure it only gets applied only to div#Uno, not to div#Dos?

And perhaps an even more important question - does my scheme sound like a good idea, or is it too verbose, amateurish or whatever?

Improve this question
1
  • 1
    What are you trying to achieve? Normally, you should use classes in a manner that reflects the structure of the page, rather than specific values you intend to use in rendering. A class name like 10, in addition to causing technical trouble, will be confusing if you later decide to change, say, the padding from 10 to 8 pixels. Commented Apr 6, 2014 at 6:05

4 Answers 4

Reset to default
1

It seems pointless to me, if I'm going to type out

<div id="Uno" class="PadV 10 PadH 25">

I may as well just do inline styling

<div id="Uno" style="padding: 10px 25px">
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yes, that's what I was wondering. Lots of people have been urging me to get away from inline styling, but I think it's a question of balance; style sheets can't completely replace inline styling, right?
It might be of some value with a slight modification--instead of a literal 10 or 25, use meaningful names to help keep consistent spacing throughout the site.
They can and should. Say in your site you used .PadV 15 for a lot of the h1 elements on your site. One day, you decide you want it to be 20px padding. Do you go through and change every instance of .PadV 15 to .PadV 20? Or do you change .PadV 15's CSS to mean 20px? Both options suck. Better - you have a class .my-awesome-heading. The class name should describe what the element IS. The css styles applied to it should describe what the element LOOKS LIKE. You should avoid having the class name describe what the element looks like - seperate content and presentation.
0

Generally a classname must begin with an underscore, a hyphen, or a letter then it could follows by a number; Unless you should escape the numeric character.

I suggest using something like padding v10 h25 instead.

In this approach the padding determines the property and v10/h25 determine the values.

.padding.v10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding.h25 {
  padding-left: 25px;
  padding-right: 25px;
}

Same for margin (if it's needed):

.margin.v10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.margin.h25 {
  margin-left: 25px;
  margin-right: 25px;
}
Improve this answer

3 Comments

Thanks; that helps make things more clear. One thing I'm wondering, though; is there a way to arrange classes in HTML so that they're somehow associated with each other? For example: <div class="Pad v25" is simple enough, but what about <div class="Pad v25 Margin v10? My style sheet can't know whether v25 is associated with padding or margin, right?
@DavidBlomstrom Well, then you could go with attribute selectors as [class*="Pad v25"] or [class*="Margin v10"].
@DavidBlomstrom Or create class names like .padding-v25 and .margin-v10.
0

CSS classes are unordered sets, so you can't distinguish the two divs with class selectors. You should probably go with the great advice of the other answerers.

But just for fun, I made a proof of concept that abuses attribute selectors to do it. For example,

[class*="PadV 10"]{padding-top:10px;padding-bottom:10px;}

http://jsfiddle.net/A8Ury/

Improve this answer

2 Comments

@ guest - What does the asterisk in your code do or signify?
from MDN, "[attr*=value] Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring."
0

The idea you are after is cool but i dont think this is a good way to control margins and paddings.

.PadV.10

can looks easier to use but messes up when used with integers which coould represent anything, margins or paddings.

.pad.v10 .pad.h10
.mar.v10 .mar.h10

is a better way of doing it. just my view. so you can know all three aspects of CSS properties (i.e. its a padding where top and bottom (verticle) values are 10px and left and right (horizontal) values are also 10 ). Just my view.

Good Luck

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.