CODEWITHSUNDEEP
css
Kifsif
Kifsif

Reputation: 3843

Organize a general class for the boilerplate code

.n-bullet-silhouette-1-004077::before {
    background-image: url("/wp-content/themes/nonverbis/assets/img/cliparts/woman-silhouette/004077/silhouette_1.svg");
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    height: 4rem;
    width: 4rem;    
    /*float: left;*/
    margin-right: 10px;
    
    position: absolute;
    top: 0;
    left: -30px;
  }


.n-bullet-silhouette-2-004077::before {
    background-image: url("/wp-content/themes/nonverbis/assets/img/cliparts/woman-silhouette/004077/silhouette_2.svg");
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    height: 4rem;
    max-width: 4rem;
    width: 100%;
    /*float: left;*/
    margin-right: 10px;
    
    position: absolute;
    top: 0;
    left: -30px;
}

The problem: the code is duplicated. Could you help me remove the duplication?

The only difference here is the file name (to be more exact: just one figure in it).

Maybe bu pushing the duplication to a common class.

Upvotes: 0

Views: 31

Answers (1)

law_81
law_81

Reputation: 2420

Simply add the same property divided by comma, and then add different property.

.n-bullet-silhouette-1-004077::before,
.n-bullet-silhouette-2-004077::before {
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    height: 4rem;
    width: 4rem;    
    /*float: left;*/
    margin-right: 10px;
    
    position: absolute;
    top: 0;
    left: -30px;
  }

.n-bullet-silhouette-1-004077::before{
   background-image: url("/wp-content/themes/nonverbis/assets/img/cliparts/woman-silhouette/004077/silhouette_1.svg");
}
.n-bullet-silhouette-2-004077::before {
    background-image: url("/wp-content/themes/nonverbis/assets/img/cliparts/woman-silhouette/004077/silhouette_2.svg");
}

Upvotes: 1

Related Questions