CODEWITHSUNDEEP
css
user755806
user755806

Reputation: 6815

Avoiding duplicating CSS styles?

I am using Html and JQuery. I have below CSS styles in my styles.css.

#someTable{
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid;
    width:80%;
    height:98px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color:mintcream;
}

and

#anotherTable{
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid;
    width:80%;
    height:98px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color:white;
}

In above css styles, all the styles are same except background-color remaining all are duplicated. How can avoid duplicates and extend the properties of firstTable ?

Upvotes: 0

Views: 143

Answers (3)

Alex
Alex

Reputation: 8663

I'd definitely use classes to achieve what you want. The following uses BEM:

.Table {
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid;
    width:80%;
    height:98px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

.Table--primary {
    background-color: white;
}

.Table--secondary {
    background-color: mintcream;
}

And then in your HTML:

<table class="Table">...</table>

<table class="Table Table--primary">...</table>

<table class="Table Table--secondary">...</table>

Upvotes: 0

Martijn
Martijn

Reputation: 16103

You can group them together, and redefine the exceptions:

#someTable, #anotherTable{
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid;
    width:80%;
    height:98px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color:mintcream;
}

#anotherTable{
    background-color:white; /* Set the exception */
}

I'm assuming you can't style table. You can remove the background-color from the group, and make it an own set, like #anotherTable, but this will save you 4 lines :)

You could give both tables a class, and use that as the 'group' selector, but ID's are way faster than classes. In this case, IMO, you should stick with the ID's.

Upvotes: 1

developers-have-no-vacation
developers-have-no-vacation

Reputation: 642

You can use classes. It would look like this :

CSS:

.masterclass{ here you put all the properties that are the same } 

#table1 { here the specific details , your color in this case }
#table2 { here the specific details , your color in this case }

html :

<table class='masterclass' id='table1'> </table>
<table class='masterclass' id='table2'> </table>

Upvotes: 2

Related Questions