How to embed multiple classes in one in CSS?

2

Use Bootstrap and it has the following classes for tables:

  • .table
  • .table-striped
  • .table-bordered
  • .table-hover
  • .table-condensed

In my application I have several tables. For ease of maintenance, I created the .tabela class and used jQuery to add the classes I want:

jQuery.ready(function() {
  $(".tabela")
    .addClass("table table-striped table-bordered");
});

So I can easily modify all the tables in the application by editing just the section above if you want to add / remove these Bootstrap classes.

My question is whether you would not have a way to use CSS to incorporate these classes into the .tabela class. I think this would be better practice than using Javascript.

    
asked by anonymous 27.05.2014 / 13:07

1 answer

1

TL; DR

In pure CSS there is no inheritance.

Classes?

Although we use the term "class" for a CSS element type, in fact the term is an overhead and does not correspond to the concept of Object Oriented Programming.

And now?

Because of this CSS limitation, some alternative "languages" like LESS and SASS .

Bootstrap, for example, uses LESS and you can compile your own version as described in documentation .

Nothing is free

The disadvantage of creating your own build is the need to redo it whenever you want to upgrade the framework version

You also have the inability to use a CDN, which prevents you from having to host the common library files on your server.

    
27.05.2014 / 15:04