Geek Answers Handbook

Is there a class class in HTML?

With my list, the html style class continues to grow, for example:

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

I wonder if there is an easier way to present this list, for example:

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

So I can just use:

 <button type="button" class="list_of_css"> </button>
+5
source share
3 answers

I recommend using a CSS preprocessor 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>

Literature:

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

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

What no one told you about Sasss @extend: http://www.sitepoint.com/sass-extend-nobody-told-you/

+5
source

As far as I know, there is no way to do such a thing with simple css and html without a processor, but if you have something like a drop-down list or just something about a parent tag that has a lot of tags for children with with the list of classes you can use the inherit command in css. The following is an example.

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

CSS:

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



Note that the paragraph that says “test” turns blue if I never tell you about it. This is because of the inherit command in css. Inherit is a great way to save space and classes when coding. This may not be a direct answer to your question, but I hope it will come in handy someday.

0
source

The editors. 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 understated, I updated it with a bit of efficient code. Although it has two loops, the outer loops depend on how many classes you put, and the inner loop depends on the number of buttons. Say you added 5 classes and 20 buttons for each class. The style will be updated 100 times. This is true taxation, but the amount of tax is not very significant in terms of utility.

Secondly, you can add it to the top of the document or a completely different file to help with debugging, but yes, since it is separate from CSS, it will be a little difficult to debug.

Thirdly, this is the purpose of the prototype. In the final version, you can search and replace to replace the original buttons.

Fourth, the style of the entire .button-fancy class is .button-fancy . I replaced the .button-fancy class in which the DOM Tree will not find it. Since my goal is to reproduce the search and replace functionality. Validating an element (in firefox) will result in it not having any button class.

Finally, this is for PROTOTYPE PURPOSE. And it should be taken as such. It is not right. This is not a good practice. But this is a quick and dirty way to check. He is trying to imitate what SASS does, but also the client. This is not production ready. But it does not require recompilation with every CSS update. You can use SASS, but you can only update SASS CSS when you see fit.

Thanks.

-1
source

More articles:


All Articles