How not to repeat CSS code

Question

I have the following CSS

.icoDuvida {
    background-image: url(img/Layout/duvida.png);
    width: 21px;
    height: 21px;
    background-repeat: no-repeat;
    float: left;
    margin-left: 13px;
}

I need to modify it to use in another location but without recreating all the attributes, as some remain the same, how to do this?

Answer 1

A very modern approach is the Atomic Design it is used by several Frameworks and you can read more about it here What is Atomic web design?

With this practice, in Tokens you will create goblais classes, for spacing, typography and even colors as Bootstrap itself does and you can check here https://getbootstrap.com/docs/4.3/utilities/spacing/#notation

So roughly what you do is you create class for each property individually type as below, and in the HTML markup you include these two classes in the class="" of the element. And eventually vc includes a particular new class to treat only something specific to the element in question.

.bg-primary {
    background: red;
}
.text-center {
    text-align: center;
}
.div-special {
   /* sua propriedades especiais para esse elemento*/
   width: 250px;
}

<div class="bg-primary text-center div-special">meu texto</div>

This type of support class (tokens) are mostly used for margins, paddings, alignments, font-size, colors, edges, and other properties that you will repeat VERY often in MANY elements in HTML

What you have to keep in mind about this is that the clearer your CSS, the more complicated it can be to make the HTML markup.

So what you’re going to have is an accumulation of class names as a side effect, something like that. Note the amount of classes...

<div class="d-flex text-center bg-light mt-5 p-2 align-items-center"></div>

I recommend you read these two articles will open your mind a lot https://willianjusten.com.br/falando-sobre-rscss/ and https://willianjusten.com.br/organizando-seu-css-com-itcss/

---

TIP

There are also CSS Variables, so you don’t keep repeating equal values for properties, but this is another assumption I recommend you read here: What does -- specified in bootstrap css :root mean?

Answer 2

As discussed in the first comment, the correct thing would be for you to divide into classes, for example:

.icone {        
    width: 21px;
    height: 21px;
    background-repeat: no-repeat;
    float: left;
    margin-left: 13px;
}

.icone-duvida {
    background-image: url(img/Layout/duvida.png);
}

.icone-sair {
    background-image: url(img/Layout/sair.png);
}

and html would look something like this:

<div class="icone icone-duvida" />
<div class="icone icone-sair" />