decrease css code

Question

I create two classes which have same properties but only one property(width) is different then how to decrease css code?

.login-box button{
  width: 100%;
  height: 40px;
  background-color: #ffd133;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #ffd133;
  border-radius: 5px;
  cursor: pointer;
}


 .add-category-box button{
    width: 48%;
    height: 40px;
    background-color:#ffd133;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ffd133;
    border-radius: 5px;
    cursor: pointer;
}

Nora · Accepted Answer · 2016-01-02 11:45:48Z

7

You can group selectors using a comma (,) separator:

.login-box button,
.add-category-box button {
    width: 100%;
    height: 40px;
    background-color: #ffd133;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 14px;font-weight: bold;
    border: 1px solid #ffd133;
    border-radius: 5px;
    cursor: pointer;
}

.add-category-box button {
    width: 48%;
}

answered Jan 2, 2016 at 11:45

Nora

3,2812 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shadeed9 · Accepted Answer · 2016-01-02 12:33:18Z

1

In that case, you can give the button a class of .button and make it as a reusable component with different variations.

.button {
  width: 48%;
  height: 40px;
  background-color: #ffd133;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #ffd133;
  border-radius: 5px;
  cursor: pointer;
}

.button--full {
  width: 100%;
}

.button--outline {
  background: transparent;
  border: 1px solid #000;
}

And in your HTML you can add the above classes as ingredients:

HTML

<button class="button">Submit</button>

OR

<button class="button button--full">Login</button>

That way, you can reuse the buttons anywhere in your project very easily.

answered Jan 2, 2016 at 12:33

shadeed9

1,8365 gold badges23 silver badges31 bronze badges

Collectives™ on Stack Overflow

decrease css code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related