CSS Padding Scheme

Question

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?

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. — Jukka K. Korpela, Apr 06 '14 at 06:05

score 1 · Answer 1 · answered Apr 06 '14 at 05:47

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

answered Apr 06 '14 at 05:47

dave

62,300
5
72
93

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? – Apr 06 '14 at 05:50
1

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. – guest Apr 06 '14 at 05:52
1

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. – dave Apr 06 '14 at 05:58

score 0 · Answer 2 · edited May 23 '17 at 12:20

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

edited May 23 '17 at 12:20

Community

1
1

answered Apr 06 '14 at 05:49

Hashem Qolami

97,268
26
150
164

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:
– Apr 06 '14 at 05:54
@DavidBlomstrom Well, then you could go with attribute selectors as `[class*="Pad v25"]` or `[class*="Margin v10"]`. – Hashem Qolami Apr 06 '14 at 05:56
@DavidBlomstrom Or create class names like `.padding-v25` and `.margin-v10`. – Hashem Qolami Apr 06 '14 at 06:04

score 0 · Answer 3 · answered Apr 06 '14 at 05:51

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/

answered Apr 06 '14 at 05:51

guest

6,450
30
44

@ guest - What does the asterisk in your code do or signify? – Apr 06 '14 at 05:57
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." – guest Apr 06 '14 at 05:58

score 0 · Answer 4 · answered Apr 06 '14 at 06:00

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

CSS Padding Scheme

4 Answers4