CODEWITHSUNDEEP
htmlcss
Madhusudan
Madhusudan

Reputation: 4815

How to reduce css when two classes have some common styles?

I am not much familiar with CSS. But I am working on it for my project related work.

I came across a case where two css classes have some common data as given below:

.KPIDashboardContainerInertiaMatrixCell_data
{
display: table-cell;
font-size: 18px;
padding-top: 30px;
font-weight: bold;
text-align: left;
-webkit-column-width: 120px;
-moz-column-width: 120px;
column-width: 120px;
}

.data_right_column
{
display: table-cell;
font-size: 18px;
padding-top: 30px;
font-weight: bold;
text-align: left;
-webkit-column-width: 80px;
-moz-column-width: 80px;
column-width: 80px;
}

I am trying to reduce it as below:

.KPIDashboardContainerInertiaMatrixCell_data.data_right_column
{
-webkit-column-width: 80px;
-moz-column-width: 80px;
column-width: 80px;    
}

And while specifying class name in HTML I am specifying:

KPIDashboardContainerInertiaMatrixCell_data data_right_column

But it's not working. Can someone tell me what am I doing wrong here? Is there any other way to do the same thing?

Upvotes: 1

Views: 140

Answers (2)

Brad
Brad

Reputation: 8668

Create a base class, then add additional classes for the styles that differ

For example imagine styling some buttons:

We have a base button class that sets some defaults (shared between all buttons)

.btn {
  padding: 10px 30px;
  display: inline-block;
  box-shadow:2px 2px #444;
  border-radius:50px;
}

Then you can start adding the classes that differ in style

.btn-red {
  background: red;
  color: #fff;
}
.btn-green {
  background: green;
  color: #fff;
}

HTML: 

<div class="btn">Base btn</div>
<div class="btn btn-green">Green btn</div>
<div class="btn btn-red">Red btn</div>

Doing it this way keeps your code DRY and makes it much easier to change shared styles.

DEMO https://jsfiddle.net/zzv09a67/2/

Upvotes: 2

Johann Kratzik
Johann Kratzik

Reputation: 794

.KPIDashboardContainerInertiaMatrixCell_data, .data_right_column {
    display: table-cell;
    font-size: 18px;
    padding-top: 30px;
    font-weight: bold;
    text-align: left;
}

.KPIDashboardContainerInertiaMatrixCell_data {
    -webkit-column-width: 120px;
    -moz-column-width: 120px;
    column-width: 120px;
}

.data_right_column {
    -webkit-column-width: 80px;
    -moz-column-width: 80px;
    column-width: 80px;
}

Upvotes: 3

Related Questions