How to embed multiple classes into one in CSS?

Asked

Viewed 368 times

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 easy maintenance, I created the class .tabela 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 application tables by editing only the above section, if you want to add/remove these classes from Bootstrap.

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

css

  • I don’t understand the need to have multiple classes if in the end you’re going to add them all to the same table. Add everything in the same class and delete what is common.

  • @Filipe It turns out that these classes are defined by the framework Bootstrap and not by me. I don’t know if it would be a good idea to edit his source code.

  • Don’t edit the source code, make a new css and put your edits there, so you keep the framework intact. What you want to do, I think is not possible with CSS.

  • 1

    I believe that the way you did it is the best way (using JS), without changing the css of the framework. There is no inheritance in CSS.

  • OK @Filipe, I’ll leave anyway. I think it gets more DRY.

1 answer

1


TL;DR

In pure CSS there is no inheritance.

Classes?

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

And now?

Due to this limitation of CSS, some alternative "languages" have emerged as LESS and SASS.

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

Nothing is for free

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

There is also the impossibility of using a CDN, which prevents you from having to host the common library files on your server.

  • Do you consider it bad practice to do what I asked the question? Why it seems to me that using CSS takes more work than just using jQuery.

  • @Andrey It’s not the end of the world, I’ve done several things like this. But it’s not ideal either. The user may notice a delay between the "raw" table and the formatted table. Do you really have so many tables that it’s not worth replicating those classes in your code? Remember that if you have a language of back-end you can put this into a variable.

  • Hmm... maybe a Rails helper would be a good one here. The truth is that I used the table example but I use it to easily create other components too, such as buttons in the right color and the addition of a figure as in this case here. The example of the table is very simple to solve with CSS, but components you touch in HTML is much more complicated.

  • 1

    @Andrey I’m not very literate in rails, but I think it would be interesting for you to extend the helper class or even create a class wrapper that add the desired behavior. In fact, there are already some things about.

  • 1

    I did some tests with helpers here and found that this is what I was looking for. hahaha =) So you can leave everything DRY without resorting to Javascript. Thanks for the force. =)

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.