Placeholder gerando estilização antes do normalize

Olá, galera! Fiquei com uma dúvida em relação a sequência da estilização que é gerada após a compilação do scss. Como o próprio Nathan fala, a estilização do button utilizando o placeholder fica antes do normalize.

Inicialmente fiquei com receio do reset css limpar a estilização feita, mas como o placeholder faz a estilização do componente utilizando classe, não corre risco do reset css limpar a estilização (já que ele faz a estilização padrão sobre a tag genérica), mas minha dúvida ficou em relação a organização.

Escrevendo no css priorizo escreve-lo de acordo com a hierarquia do html, colocando na sequência. Esse detalhe da posição seria um problema na organização ou é algo que não faz diferença? Existiria alguma forma de manipular o placeholder para não estilizar no topo (antes do normalize) ?

Grato pela atenção :)

Fala ai Jair, tudo bem? Vamos lá:

Escrevendo no css priorizo escreve-lo de acordo com a hierarquia do html, colocando na sequência. Esse detalhe da posição seria um problema na organização ou é algo que não faz diferença?

A posição vai impactar quando utilizar o mesmo seletor, exemplo:

.a { color: red; }
...
.a { color: blue; }

A cor de .a seria blue.

Eu gosto de organizar o CSS de acordo com o HTML, ou seja:

<div></div>
<button</button>
<input>
<img>

Nesse caso eu deixaria o CSS:

div {}
button {}
input {}
img {}

Mas apenas por gosto pessoal, não tem diferença ou impacto referente à aplicação dos estilos em si.

Existiria alguma forma de manipular o placeholder para não estilizar no topo (antes do normalize) ?

Não gosto de estilizar coisas antes do reset, particularmente deixo ele como primeira importação.

Espero ter ajudado.

Mergulhe em programação