How not to repeat CSS code

Asked

Viewed 382 times

3

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?

css
  • 1

    You abstract that which is constant in a different class and use it separately in the elements you want.

2 answers

4

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.

inserir a descrição da imagem aqui

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>

inserir a descrição da imagem aqui

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?

  • 1

    Atomic Design is quite versatile, but I don’t like it because it pollutes HTML a lot. I find a very valid approach to frameworks where there is no way to predict which application will be used, but for a specific application I think it is not worth it.

  • @Andersoncarloswoss yes, like most FW there are pros and cons to this type of approach. And one of the cons with certainty and the excess of classes in the elements as da to visualize in the graph

3


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" />

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.