CODEWITHSUNDEEP
htmlcss
Tum
Tum

Reputation: 3652

How to reuse and override Css style?

ok, here is myResource.css

.gwtCellButton button {
  margin: 0;
  padding: 5px 7px;
  text-decoration: none;
  ....more styles here...

}

.gwtCellButton button:active {
  border: 1px inset #ccc;
}
.gwtCellButton button:hover {
  border-color: orange;
  color: orange;
}

Now I want to have .gwtCellButtonSmall that is exactly like .gwtCellButton except that it has padding: 1px 2px;

Ofcourse if i do like this, then I can duplicate code:

.gwtCellButtonSmall button {
  margin: 0;
  padding: 1px 2px;
  text-decoration: none;
  ....more styles here...

}

.gwtCellButtonSmall button:active {
  border: 1px inset #ccc;
}
.gwtCellButtonSmall button:hover {
  border-color: orange;
  color: orange;
}

Upvotes: 0

Views: 1046

Answers (3)

Charlie
Charlie

Reputation: 11767

If I understand your question correctly, you want to have two elements with similar styles with one having different padding.

Is so, you can share styles between the two elements:

.gwtCellButton button, .gwtCellButtonSmall button{
    margin: 0;
    padding: 5px 7px;
    text-decoration: none;
    ...
}

Then use !important to override the padding for the specific element:

.gwtCellButtonSmall button{
    padding: 1px 2px !important
}

Or you could use something like Sass.

Upvotes: 4

mmwtsn
mmwtsn

Reputation: 111

You should not need to duplicate any code or, worse, use !important.

This problem can be solved through the use of modifier classes by specifying two classes on each HTML element: a base gwtCellButton class and a modifier class (regular and small in this example).

.gwtCellButton button {
  margin: 0;
  text-decoration: none;
}

.gwtCellButton.regular button {
  padding: 5px 7px;
}

.gwtCellButton.small button {
  padding: 1px 2px;
}

Using the !important declaration unnecessarily can lead to specificity issues down the line.

Upvotes: 1

Zafar
Zafar

Reputation: 3434

Use !important. The property which has !important overrides the exactly property if there are any other.

So your case, 

 padding: 1px 2px!important;

Heavily using them causes you some problems sometimes. Thus, do not forget to have a quick look at this summary too.

Upvotes: 0

Related Questions