5

With my list of html style class continues to grow, like:

<button type="button" class="btn btn-default btn-sm ...">
</button>

I wonder whether there is an easier way to represent this list, like:

.list_of_css = "btn"+ "btn btn-default"+"btn-sm"+...

So I can simply use:

<button type="button" class="list_of_css">
</button>
3
  • 6
    No, not in plain CSS. You could use a CSS pre-processor for something like that.
    – j08691
    Apr 21, 2015 at 18:48
  • You should at using something like less with your css.
    – renathy
    Apr 21, 2015 at 18:48
  • No, but I wish there were. There has been a lot of resistance to adding LESS type functionality to CSS. But I think it's needed. Apr 21, 2015 at 19:18

3 Answers 3

5

I recommend using a CSS pre-processor as suggested by j08691. I specifically recommend using Sass.

Sass inheritance example:

.fancy-button{
  @extend .btn, .btn-default, .btn-sm;
}

HTML as expected:

<button type="button" class="fancy-button">Fancy Button</button>

References:

Sass: http://sass-lang.com/

Sass Inheritance: http://sass-lang.com/guide#topic-7

What Nobody Told You About Sass’s @extend: http://www.sitepoint.com/sass-extend-nobody-told-you/

0

In my knowledge there is no way of doing such thing with plain css and html without a processor, but if you have something like a drop down list, or just anything that deals with a parent tag that has a lot of children tag with the same list of classes you can use the inherit command in css. Here is an example below.

<div class="div">
    <p>Test</p>
</div>

CSS:

.div {
    color:blue;
}
p {
    display:inherit;
}



Notice that the paragraph that says "test" turns to blue without me ever directly telling it to. That is because of the inherit command in the css. Inherit is a great way to save space and classes while coding. It may not be a direct answer to your question but I hope it comes in handy sometime.

-1

EDITED. In JQuery, You can do this.

replist=[ ['button-fancy', 'btn btn-primary btn-sm' ],
          ['button-morefancy', 'btn btn-default btn-lg'] ];

$(document).ready(function(){
    for(i=0; i<replist.length; i++){
        elems=document.getElementsByClassName(replist[i][0]);
        for(j=0; j<elems.length; j++){
            elems[i].style.className = " "+replist[1];
        }
    }
}

Since my original post was downvoted, I updated it with a slightly efficient code. Although it has two loops, the outer loops depend on how many classes you put and the inner loop depends on how many buttons there are. Say you added 5 classes and 20 buttons of each class. The style would be updated 100 times. Which is indeed taxing, but the amount of tax is not very significant as far as utility is concerned.

Secondly, you can add it to the beginning of a document or a completely different file to aid in debugging but yes, since its separated from CSS, it will be slightly hard to debug.

Thirdly, it is for prototype purpose. In the final version, you can perform a search and replace in order to replace the original buttons.

Fourthly, it is not possible to style the entire .button-fancy class. I have replaced the .button-fancy class wherein, the DOM Tree won't find it. Since, my target is to reproduce a search-and-replace functionality. Inspecting the element (in firefox) will yield that it does not have any button-fancy class.

Lastly, it is for PROTOTYPE PURPOSE. And should be taken as such. It is not right. It is not good practice. But It is a quick and dirty way to test. It tries to mimic what SASS does but in the client. It is not production ready. But it does not need recompilation every time you update the CSS. You might use SASS but you can update the SASS CSS only when you see fit.

Thank you.

3
  • 1
    That would be a really bad solution for performance ... And it's definitely not easier. Apr 21, 2015 at 19:07
  • 1
    Clever solution—but on top of the concerns raised by Danny, it would be a pain to maintain and debug.
    – pygeek
    Apr 21, 2015 at 19:11
  • I already acknowledged that!!! Whats the point in downvoting? what I said is for prototyping. After he completes the prototype. He can simply use find and replace to update the code and separate the Script upon publishing. Its definitely not equal to using a CSS preprocessor but at least "works". I have put in the warnings.
    – Ronnie
    Apr 21, 2015 at 19:38

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.