How can I optimize my code by regrouping shared styles between cards?-CodePudding

This is my css and my html below, I want to apply some rules to all the cards, and change only the color of the top by selecting each card. But I didn't find how to select multiple class at the the same time. I don't know if you can understand what I said but for me my code is very bad and I want to improve it.

.card-supervisor {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(180, 62%, 55%);
}

.card-team-builder {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(0, 78%, 62%);
}

.card-karma {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(34, 97%, 64%);
}

.card-calculator {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(212, 86%, 64%);
}

<section >
        <div >
          <h1 >Supervisor</h1>
          <p >Monitors activity to identify project roadblocks</p>
          <div >
            <img src="images/icon-supervisor.svg">
          </div>
        </div>
    
        <div >
          <h1 >Team Builder</h1>
          <p >Scans our talent network to create the optimal team for your project</p>
          <div >
            <img src="images/icon-team-builder.svg">
          </div>
        </div>
        
        <div >
          <h1 >Karma</h1>
          <p >Regularly evaluates our talent to ensure quality</p>
          <div >
            <img src="images/icon-karma.svg">
          </div>
        </div>
    
        <div >
          <h1 >Calculator</h1>
          <p >Uses data from past projects to provide better delivery estimates</p>
          <div >
            <img src="images/icon-calculator.svg">
          </div>
        </div>
      </section>

CodePudding user response：

You can use a card class that you add to all cards, add the shared styles on it like so:

.card{
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(180, 62%, 55%);
}
.card-supervisor {
    border-color:hsl(180, 62%, 55%);
}

.card-team-builder {
    border-color: hsl(0, 78%, 62%);
}

.card-karma {
   border-color: hsl(34, 97%, 64%);
}

.card-calculator {
   border-color:hsl(212, 86%, 64%);
}

<section >
        <div >
          <h1 >Supervisor</h1>
          <p >Monitors activity to identify project roadblocks</p>
          <div >
            <img src="images/icon-supervisor.svg">
          </div>
        </div>
    
        <div >
          <h1 >Team Builder</h1>
          <p >Scans our talent network to create the optimal team for your project</p>
          <div >
            <img src="images/icon-team-builder.svg">
          </div>
        </div>
        
        <div >
          <h1 >Karma</h1>
          <p >Regularly evaluates our talent to ensure quality</p>
          <div >
            <img src="images/icon-karma.svg">
          </div>
        </div>
    
        <div >
          <h1 >Calculator</h1>
          <p >Uses data from past projects to provide better delivery estimates</p>
          <div >
            <img src="images/icon-calculator.svg">
          </div>
        </div>
      </section>

CodePudding user response：

Use a selector including all classes for the common properties (using commas to list them all) and after that separate rules for the color

.card-supervisor, .card-team-builder, .card-karma, .card-calculator {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(180, 62%, 55%);
}

.card-supervisor {
  background: blue;
}
.card-team-builder {
  background: red;
}
.card-karma {
  background: yellow;
}
.card-calculator {
  background: green;
}

CodePudding user response：

you can select multiple classes separated by commas

.card-supervisor,
.card-team-builder,
.card-karma,
.card-calculator {
  border-radius: 0.5rem;
  padding: 2.5rem 3rem;
  margin-bottom: 3rem;
  box-shadow: 0 1rem 2rem 0.5rem #dedede;
}
.card-supervisor {
  border-top: 0.5rem solid hsl(180, 62%, 55%);
}

.card-team-builder {
  border-top: 0.5rem solid hsl(0, 78%, 62%);
}

.card-karma {
  border-top: 0.5rem solid hsl(34, 97%, 64%);
}

.card-calculator {
  border-top: 0.5rem solid hsl(212, 86%, 64%);
}

CodePudding user response：

As all card have most of their properties to be the same you can create a global .card class and create class modifier for each kind of card you have

You can learn more about

OOCSS Object Oriented CSS
SMACSS
BEM Block, Element, Modifier

.card {
      border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
}

.card-supervisor {
    border-top: .5rem solid hsl(180, 62%, 55%);
}

.card-team-builder {
    border-top: .5rem solid hsl(0, 78%, 62%);
}

.card-karma {
    border-top: .5rem solid hsl(34, 97%, 64%);
}

.card-calculator {
    border-top: .5rem solid hsl(212, 86%, 64%);
}

<section >
  <div >
    <h1 >Supervisor</h1>
    <p >Monitors activity to identify project roadblocks</p>
    <div >
      <img src="images/icon-supervisor.svg">
    </div>
  </div>

  <div >
    <h1 >Team Builder</h1>
    <p >Scans our talent network to create the optimal team for your project</p>
    <div >
      <img src="images/icon-team-builder.svg">
    </div>
  </div>

  <div >
    <h1 >Karma</h1>
    <p >Regularly evaluates our talent to ensure quality</p>
    <div >
      <img src="images/icon-karma.svg">
    </div>
  </div>

  <div >
    <h1 >Calculator</h1>
    <p >Uses data from past projects to provide better delivery estimates</p>
    <div >
      <img src="images/icon-calculator.svg">
    </div>
  </div>
</section>

CodePudding user response：

If you want to add common set of css codes to no.of classes, add them by separating with commas as below.

.card-supervisor, .card-team-builder, .card-karma, .card-calculator {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
}

But always remember you can add more than one class to a html element. So the best practice is adding the common codes with a one common class and the unique css with another class or id like below

<div >

css

.card-list{
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
}
.card-supervisor {
    border-top: .5rem solid hsl(180, 62%, 55%);
}