css: how to inherit whole class

Question

I have "t_data" class defined to customize the look and feel for majority of my tables.

Though, in some cases I need to do an additional tables specializations: let's say I want tables for "customers" and "orders" looking differently.

Default way to inherit styles is to describe css-definitions for both classes into the same block, something like this:

table.t_data, table.t_data_order, table.t_data_customer
{
    background-color: #080;
}

That way works well till some extend... until I get TOO MANY different definitions.

Right now I have already something like this:

table.t_data thead tr th, table.t_data thead tr td, table.t_data tbody tr th,     table.t_data tbody tr td, table.t_data tfoot tr th, table.t_data tfoot tr td,
table.t_group thead tr th, table.t_group thead tr td, table.t_group tbody tr th,     table.t_group tbody tr td, table.t_group tfoot tr th, table.t_group tfoot tr td
{
    border: #333 1px solid;
}

In order to do customize t_data to look different for t_data_customer and/or t_data_order I will need to TRIPPLE that block... and there is high risk to miss some elements... I also have more than 10 such blocks for different elements (like background, font, etc.)

Is there any css or even non-css solution for things like this?

Thank you very much!

P.S. If you don't have any solution but only ideas, don't be shy to share them as well! Any thoughts are welcome

This is not possible in native CSS, but there are CSS precompilers that offer inheritance and more, e.g. LESS: lesscss.org — Pekka
– Pekka, Commented Feb 23, 2013 at 17:23

MarcoK · Accepted Answer · 2013-02-23 17:28:00Z

1

Sadly, you can't do this with CSS. Luckily, you can use CSS precompilers to do this for you (examples: LESS & Sass). To be more precise, you could use Mixins (supported by both languages).

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

(Example from LESS). This is something you could do with your t_data class.

answered Feb 23, 2013 at 17:28

MarcoK

6,1202 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Budda Over a year ago

Didn't use it yet, but most likely will proceed with LESS - that sounds like a very good idea.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

What about adding new common CSS class for your tables and target

.common td
.common th {
}

Before you add a class to your table you should make sure that the default styling of your table isn't enough e.g.

td {
    /* Sensible default for all table cells */
}

The next step is to find a class name that's "common" for your tables with alternate styling. The popular framework twitter bootstrap uses "table-bordered" for table with borders, other would argue that it would be better to find a semantic common denominator. But that's up to you.

This is not about semantic or not, but ever since a saw a presentation by Nicole Sullivan, I can't find the presentation but I can find a quote from it: http://css-tricks.com/semantic-class-names/

In a presentation by Nicole Sullivan I recently saw at the CSS Summit, she called out some big companies for declaring the exact same color in the CSS files literally thousands of times.

I've been trying to find a meaning for what we're writing in out css files and aiming for large common denominators.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 23, 2013 at 17:27

orjan

1,4821 gold badge19 silver badges35 bronze badges

2 Comments

Budda Over a year ago

Am I correctly understand that you suggest to all common stuff into default formatting so that will reduce amount of t_data class required to be reused? That won't really work as I use tables in a lot of scenarios and will need to make sure each class will override the default style. In fact, it is not only about tables.

orjan Over a year ago

It depends from site to site, but I'm looking for creating a sensible default e.g. a table should have more or less the same look and feel over the whole site to keep the design consistent. Then you'll have couple of different tables, hopefully with something common that can be styled using the same class.

Mario · Accepted Answer · 2013-02-23 17:30:35Z

0

Instead of defining many classes, you can use ID and class.

With ID you define the major CSS and with classes you define the differences.

<table id="mainstyle" class="variation1"> ...

answered Feb 23, 2013 at 17:30

Mario

4201 gold badge12 silver badges24 bronze badges

1 Comment

Budda Over a year ago

I often have few tables per page and using ids for formatting doesn't look to attrective

Collectives™ on Stack Overflow

css: how to inherit whole class

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related