Gabriel Llamas Gabriel Llamas - 1 year ago 70
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download