4

Afina qual é a prática correta, usar o CSS com Shorthand ou Longhand? Procurei, mas não achei uma reposta definitiva...

Quando declaramos a classe com Shorthand estamos dizendo que todos os outros valores devem ser setados como initial. Vou demonstrar apenas algumas situações que ilustram meu interesse e dúvida.

A value which is not specified is set to its initial value. Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

Logo quando declaramos nossa cor de BG assim:

div { 
     background: red;
} 

Na verdade estamos dizendo, ou pelo menos é assim que o Browser está lendo, isso:

div { 
    background-image: initial; 
    background-position-x: initial; 
    background-position-y: initial; 
    background-size: initial; 
    background-repeat-x: initial; 
    background-repeat-y: initial; 
    background-attachment: initial; 
    background-origin: initial; 
    background-clip: initial; 
    background-color: red; /* mas eu só queria o bg :) */
} 
  • Isso é bom para performance?
  • É melhor declara todos os valores individualmente ou deixar o Browser processar todos os valores que não estamos declarando?

Possíveis problemas com o Shorthand (mais um exemplo com background)

Exemplo de problema simples de shorthand com background fazendo override nas classes definidas pelo componente default.

.base-class { 
    height: 50px; 
    width: 100%;
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 
.base-class--modifier { 
    background: radial-gradient(...) 
}

<div class="base-class base-class--modifier"></div>

Deveria ser usado background-image: radial-gradient(...)

Hoje como o Emmet e softwares que já tem autocomplit de quase tudo ainda vale a pena escrever CSS com atalhos? Ou é melhor ser mais conciso nas declarações dos estilos?

Existe alguma boa prática? Considerando performance, manutenibilidade, leiturabilidade, etc

Links de referência:

6
  • 1
    Por que precisa existir uma "prática correta"? O CSS oferece ambas as opções, para serem usadas conforme for mais conveniente em cada caso.
    – bfavaretto
    Commented 24/01/2018 às 1:26
  • @bfavaretto estou perguntando pq por exemplo no guia de estilo da Google eles encorajam o uso do Shorthand, já a Mozilla parece preferir o Longhand. Se for para usar em um site single page é melhor o CSS short ou*** long***, ou se for para uma aplicação web com um monte de pessoa mexendo no projeto é melhor short ou long? Muitas vezes não depende só de nós a escolha. Por isso perguntei se teria alguma prática mais correta no mundo do desenvolvimento ou se cada um que põem a mão faz do jeito que quer...
    – hugocsl
    Commented 24/01/2018 às 11:07
  • Não é "cada um faz como quer", tem que ter critério. Estou pensando numa possível resposta pra você. Achei referência do Google sobre shorthand, mas não essa da Mozilla que você diz que prefere longhand. Tem um link?
    – bfavaretto
    Commented 24/01/2018 às 13:28
  • @bfavaretto Link direto no site da Mozilla: developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties (atenção em Tricky edge cases). Guia de CSS: codeguide.co/#css-shorthand . Eu gostaria de seguir um padrão, mas parece que não tem... Em projetos grandes complica pra todo mundo. Por isso estava buscando uma prática mais consistente. Mas talvez o "gosto pessoal" seja a resposta atual apesar de ainda não ser a melhor solução.
    – hugocsl
    Commented 24/01/2018 às 13:37
  • 1
    Pelo que li do primeiro link na questão: você deve usar o short hand para poupar tempo e energia (talvez até mesmo ganhar legibilidade). O pessoal do Mozilla prefere então o long hand quando precisam de um controle mais granular das propriedades. Controle mais grosso seria com short hand Commented 6/03/2018 às 1:31

1 Resposta 1

1

Afina qual é a prática correta, usar o CSS com Shorthand ou Longhand?

Voce respondeu com o seu link: https://assets.hongkiat.com/uploads/css-shorthand-longhand-notations/long-vs-short-notations.jpg so precisa olhar "When to use"

Isso é bom para performance?

Performance no css esta relacionada com uso de id, tag e Universal.

#main-navigation {   }      /* ID (O mais Rapido) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (O mais lento) */
#content [title='home']     /* Universal */

Voce pode confirir nesse site sobre perfomance https://css-tricks.com/efficiently-rendering-css/

Existe alguma boa prática?

Reuso da css é uma boa pratica, mas a performance é 10 milisegundos a mais(apenas uma ideia de tempo), css propria fazendo uso de Id nao é reutilizavel(a menos que seja vc que esta reutilizando) mas é mais rapido e por nao ser reutilizavel seria uma ma pratica.

Uma boa pratica em geral, por css ser tao leve e cada empresa ou designer ter o seu proprio estilo de organizacao que chega a ser impossivel gerar um design pattern a ser seguido por todos, css roda em menos de 0.1 segundo(bem menos estou colocando por alto), esse tempo pode "aumentar" nao muita coisa quando se faz o uso de pseudo-class.

(EDITADO) "Evitar usar o css dentro do html, pq é dificil de dar manuteçao."

E por ultimo, terminou o css gere o minify porque o "maior problema" é para carregar o arquivo e nao a sua leitura.

*Desculpe a falta de ascentos meu teclado no momento nao possue tais teclas(teclado turco)

7
  • Hudson obrigado pela resposta. Ao meu ver uma imagem com "Pors e Contras" é uma resposta que fica encima do muro, não acho que ela seja uma resposta unanime ou que estabeleça algum critério sólido para um time. Já sobre os IDs o mais rápido não são eles, na verdade são os estilos "in-line", seguem palavras do Google sobre isso. "talvez seja preciso dividir o CSS em duas partes: uma parte in-line, responsável por configurar a parte do conteúdo acima da dobra, e a parte que pode ser adiada" developers.google.com/speed/docs/insights/…" []´s
    – hugocsl
    Commented 6/03/2018 às 11:54
  • Minha dúvida sobre a performance na verdade está ligada ao que quando vc fala background:red vc deixa por conta do Browser "descobrir" que as outras declarações do background estão vazias. E quando vc diz background-color:red vc poupa processamento do browser, pois ele não fica esperando receber outros valores do background Por isso o questionamento sobre Long ou Short, principalmente em estilos que podem ter muitas variáveis como o BG por exemplo.
    – hugocsl
    Commented 6/03/2018 às 11:56
  • sobre in-line eu citei aqui: "E por ultimo, terminou o css gere o minify porque o "maior problema" é para carregar o arquivo e nao a sua leitura.", Id carregam mais rapido do que class isso pode ser provado aqui stevesouders.com/efws/css-selectors/…
    – HudsonPH
    Commented 6/03/2018 às 12:04
  • Hudson o Estilo "inline" é quando é direto na Tag e não Minificado, tipo <div style="background-color:red;">
    – hugocsl
    Commented 6/03/2018 às 12:06
  • Voce pode gerar dividir o css em duas partes onde a primeira vai carregar "big load" e a segunda parte o "small load" colocar css junto com html é a pior pratica possivel que voce pode fazer.
    – HudsonPH
    Commented 6/03/2018 às 12:53

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 .