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: