How to reuse styles?

Back in the past I learned a lot about CSS but now I can't remember how to reuse styles.

Example:

I have some tabs with class tab and I can switch them with javascript. The current selected tab has another class, active.

Their CSS style:

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active {
    position: relative;
    top: 0;
    left: 0;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin开发者_如何学编程-bottom: 10px;
    color: #272F42;
    cursor: default;
    background-color: #FFCF75;
}

Both styles has a lot of identic styles except 2, cursor and background-color.

So my question is, how can I resuse the .tab style and use it in .active?

I want achieve something like this:

.active { //extends .tab
    cursor: default;
    background-color: #FFCF75;
}

Thanks.

---

You could, and probably should, apply both classes to the element like so:

<a class="tab active"></a>

If you want a css rule for the specific combination of these two classes, you'd do it like so:

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active 
{
    cursor: default;
    background-color: #FFCF75;
}

.tab.active /* no space */
{
    /* styles for elements that are both .tab and .active */
    /* leaving .active reusable for things other than tabs */
    /* and allowing override of both .tab and .active */
}

This allows you to avoid making unnecessary copies of your style declarations... and gives you the specificity to override either of the individual classes when an element has both.

---

Do this. Combine the styles and separate with a comma. Then add other rules targeting the differences.

.tab, .active {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
}

.tab{
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}

EDIT

Based on your comment

I'm currently switching the tabs by adding .active style to the class attribute.

this is what I would do:

HTML

<div class="tab"></div>

CSS

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}

Then just add or remove the .active class, leaving the .tab as is.

As long as .active is lower down in the stylesheet, it will overwrite the necessary bits.

---

Use both class names in the class attribute. In the .active rule, define only different styles like you have already in the second example.

<div class="tab active"></div>

---

Change the .tab rule to .tab, .active.

---

.active, .tab {
   ... full style of both here
}

.active {
   ... the styles that differ from .tab
}

---

This selector inheritance is a nice feature of SASS.

If you want to stick with plain CSS, look at the section on Selector Inheritance and you can see how the SASS code, with the @extend, is turned into regular CSS.

---

You can apply multiple classes to an element. So you can have an element with class = "tab active" and have it contain both specs.

---

1. You can extract base class with identic styles and mark your elements with two classes: .tab .base
2. You can use dynamic css language as sass or less which supports classes inhritance

---

You can combine .active into .tab and override the parts that need to change like this:

.tab, .active {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}