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

score 4 · Accepted Answer · edited May 23 '17 at 11:43

4

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.

edited May 23 '17 at 11:43

Community

1
1

answered Feb 10 '14 at 00:15

Charlie

11,380
19
83
138

There's no need to use "!important" if you ensure that you put the more specific selector below the more general selector. – John Slegers May 09 '15 at 19:25

score 1 · Answer 2 · answered Feb 10 '14 at 00:42

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.

score 0 · Answer 3 · answered Feb 10 '14 at 00:25

0

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.

answered Feb 10 '14 at 00:25

Zafar

3,394
4
28
43

There's no need to use "!important" if you ensure that you put the more specific selector below the more general selector. – John Slegers May 09 '15 at 19:25

How to reuse and override Css style?

3 Answers3