3

Tenho o seguinte CSS

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

Eu preciso modificá-lo para utilizar em outro local mas sem recriar todos os atributos, pois alguns permanecem os mesmos, como fazer isso?

1
  • 1
    Você abstrai aquilo que é constante em uma classe diferente e a utiliza separadamente nos elementos que deseja.
    – Woss
    Commented 24/09/2019 às 12:28

2 Respostas 2

4

Uma abordagem bem moderna é o Atomic Design ela é usada por vários FrameWorks e vc pode ler mais sobre isso aqui O que é atomic web design?

Com essa prática, nos Tokens vc vai criar classes goblais, para espaçamentos, tipografia e até cores como o próprio Bootstrap faz e vc pode conferir aqui https://getbootstrap.com/docs/4.3/utilities/spacing/#notation

Então a grosso modo o que se faz é criar classe para cada propriedade de forma individual tipo como abaixo, e na marcação HTML vc inclui essas duas classes no class="" do elemento. E eventualmente vc inclui uma classe nova em particular para tratar apenas algo específico do elemento em questão.

.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>

Esse tipo de classe de suporte (tokens), são mais usadas para margins, paddings, alinhamentos, font-size, cores, bordas, e outras propriedades que vc vai repetir com MUITA frequência em MUITOS elementos no HTML

O que vc tem que ter em mente sobre isso é que quanto mais claro o seu CSS, mas complicado pode ser tornar a marcação HTML.

inserir a descrição da imagem aqui

Então o que vc vai ter é um acumulo de nome de classes como efeito colateral, coisa do tipo. Repare na quantidade de classes...

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

inserir a descrição da imagem aqui

Recomendo que leia esse dois artigos vai abrir muito sua mente https://willianjusten.com.br/falando-sobre-rscss/ e https://willianjusten.com.br/organizando-seu-css-com-itcss/


DICA

Existem tb as CSS Variables, para vc não ficar repetindo valores iguais para propriedades, mas esse é outro assun recomendo que leia aqui: O que significa o -- especificado no :root do css do bootstrap?

2
  • 1
    A Atomic Design é bastante versátil, mas eu não gosto dela por poluir muito o HTML. Acho uma abordagem bastante válida para frameworks em que não tem como prever qual será a aplicação que fará uso, mas para uma aplicação específica acho que não vale a pena.
    – Woss
    Commented 24/09/2019 às 13:13
  • @AndersonCarlosWoss sim, como boa parte dos FW existem prós e contras desse tipo de abordagem. E um dos contras com certeza e o excesso de classes nos elementos como da pra visualizar no gráfico
    – hugocsl
    Commented 24/09/2019 às 13:15
3

Como tratado no primeiro comentário, o correto seria você dividir em classes, por exemplo:

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

e no html ficaria algo desse tipo:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .