Durante o paint do documento pelo browser a ordem das propriedades das classes do CSS podem interferir em como percebemos a "montagem" da página?
Principalmente em conexões mais lentas, literalmente vemos os estilos sendo aplicados aos elementos, então a ordem das propriedades que usamos nas classes deve ser algo a se levar em consideração ao escrever o CSS? Digo, a ordem dos atributos nas classes interfere no CSSOM e como a Árvore de Renderização é construída pelo browser?
Vi essa imagem e fiquei me questionando se a ordem dos estilos do CSS pode interferir no paint da página...
Exemplo: (considerando a árvore de renderização/conexões lentas/performance e UX/UI)
Digamos que temos o seguinte CSS que foi escrito "aleatoriamente" sem preocupação alguma com os atributos.
.container {
background: rgba(0,0,0,0.25);
width: 100%;
height: 100%;
text-align: center;
padding-top: 100px;
display: block;
position: absolute;
z-index: 2;
font-family: consola;
font-size: 1rem;
}
E temos outro CSS que foi escrito pensando na ordem que o layout dos elementos é construído:
.container {
display: block;
position: absolute;
width: 100%;
height: 100%;
padding-top: 100px;
z-index: 2;
background: rgba(0,0,0,0.25);
font-family: consola;
font-size: 1rem;
text-align: center;
}
Deve haver um cuidado na ordem desses atributos dentro das classes, eles influenciam em como acontece a Árvore de Renderização e o paint da página? Existe alguma boa prática?
Quais atributos são mais importantes que os outros no CSS e quais são interpretados com prioridade ou não?
Ou isso não existe, é totalmente irrelevante e não se deve perder tempo com isso?
OBS: Sei que muito provavelmente cada browser pode entender isso de uma forma diferente, então não faço distinção sobre um navegador ou outro ok, qualquer informação é válida.