Gabriel Llamas Gabriel Llamas - 4 months ago 17
CSS Question

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.

Answer

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.