Question

I am using bootstrap css framework. I want to create a table which has many styles. The code is like this:

<table id="myTable" class="table table-bordered table-striped table-condensed">
  ....
</table>

How can I avoid using so many classes (table table-bordered table-striped table-condensed) here?
Can CSS do something like OO extend? I mean define a class named myTable and it can have many predefined styles.

Dummy code:

table.myTable{
  have_class: table table-bordered table-striped table-condensed;
}

Answer 1

I’m not quite sure what you mean. Generally you want to use classes only when you have to, and then target by element first. If it’s not possible by .class element then add another class. Remember, you can target more specifically by putting a space and adding another class/ID/element. The more you add, the more specific it becomes.

examples

table

#myTable tr

#myTable tr.first

#myTable .odd a

Also, if this is a problem with pre-defined twitter bootstrap classes, that is the problem with using a grid/styled boilerplate. It’s not lightweight or lean by any stretch of the imagination. Twitter bootstrap is generally just for getting things up quickly, and prototyping… not for completed websites.

If youre looking for completely clean code, you’d want to code it from scratch.