3

I am working on a little table which has several different paddings, I have to put them into a div to make it work.

But I am currently having alot of classes containing only padding: Xpx; where X corresponds to classname padding-20. I want to have just one class in my CSS which automatically can assign the correct amount of padding by it's classname.

Is this possible with CSS or is there JavaScript needed to make this work?

Thanks!

cнŝdk
  • 31,391
  • 7
  • 56
  • 78
Martin Beentjes
  • 132
  • 2
  • 11
  • 1
    You could do it with script by parsing the class name, creating a rule and adding it to one of the document's style sheets. What have you tried? – RobG Jul 24 '15 at 06:57
  • 1
    Without your html and css its impossible to even begin. I could tell you a few ways that might work, but I don't know what your code/html looks like – ydobonebi Jul 24 '15 at 06:57
  • 1
    Please put your code to receive a detailed answer. No code, no answer. – michelem Jul 24 '15 at 06:59
  • I don't think this can be done with ordinary CSS, but maybe LESS can do it. – Barmar Jul 24 '15 at 07:00
  • There is not much code to see, the only thing I want to know (yes, I have searched but could not find anything yet) if I could have the following in my CSS `padding-@variable-left { padding-left: @variable px; }` or something like that. And I could just put a div like so `
    left padding 20px
    `     – Martin Beentjes Jul 24 '15 at 07:01
  • 3
    What you want is not possible with CSS alone. That said, the alternatives using mulitple classes in CSS would also be wrong regarding naming best-practices. If you for example want to change the padding of one or several of those classes, the class name wouldn't be inline anymore with what it does, that's why class name ideally refer to the element they're targetting or general behaviour. You could for example define classes with names like 'padding-top-big', 'padding-top-small', 'padding-bottom-medium'. There you could put an appropriate size and change it afterwards still keeping names logic – Laurent S. Jul 24 '15 at 07:41

1 Answers1

2

You need JavaScript to do this.

Parse the Document to get all the nodes and for each node get the className attribute to extract the given padding values:

var all = document.getElementsByTagName("*");

for (var i = 0, max = all.length; i < max; i++) {
  var className = all[i].className;
  if (className !== '' && typeof className !== 'undefined') {
    var paddingValues = className.split('-');
    switch (paddingValues[1]) {
      case 'left':
        all[i].style.paddingLeft = paddingValues[2] + "px";
        break;
      case 'top':
        all[i].style.paddingTop = paddingValues[2] + "px";
        break;
      case 'right':
        all[i].style.paddingRight = paddingValues[2] + "px";
        break;
      case 'bottom':
        all[i].style.paddingBottom = paddingValues[2] + "px";
        break;
    }
  }

}
p,
div,
span {
  background-color: yellow;
}
<p>this a paragraph without any style</p>
<div class="padding-left-20">Blabla blabla</div>
<br>
<span class="padding-left-10">some text....</span>
<p class="padding-top-30">this a new paragraph</p>

Note:

I assume you will have all the classNames respecting this format :

padding-side-value

padding-top-30

padding-left-10

cнŝdk
  • 31,391
  • 7
  • 56
  • 78