Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reuse styles?

Tags:

css

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.

like image 896
Gabriel Llamas Avatar asked Aug 31 '11 18:08

Gabriel Llamas


People also ask

How do you reuse CSS styled components?

To achieve that you can simply pass the styled-component you wish to extend (or inherit styles from) to the styled() constructor, for example, like so: import styled from 'styled-components'; const Square = styled.

Can SCSS write CSS?

First of all, you should know that we'll do all the coding in the Sass file (style. scss) and not in the style. css file. It is Sass that will generate a CSS file for us with the same code.


2 Answers

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.

like image 114
canon Avatar answered Sep 22 '22 15:09

canon


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.

like image 44
Jason Gennaro Avatar answered Sep 22 '22 15:09

Jason Gennaro