CODEWITHSUNDEEP
css
Niki
Niki

Reputation: 43

decrease css code

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

Upvotes: 0

Views: 42

Answers (2)

shadeed9
shadeed9

Reputation: 1836

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.

Upvotes: 1

Nora
Nora

Reputation: 3261

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

Upvotes: 7

Related Questions