How to reuse and override Css style?

Question

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;
}

Answer 1

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 .

Answer 2

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.

Answer 3

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.