Eu deveria usar classe em:
main div {
width:720px;
margin: auto;
padding:30px 0;
}
ou
article {
padding-bottom:30px;
border-bottom:1px solid #ccc;
margin-bottom:20px;
}
também ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Eu deveria usar classe em:
main div {
width:720px;
margin: auto;
padding:30px 0;
}
ou
article {
padding-bottom:30px;
border-bottom:1px solid #ccc;
margin-bottom:20px;
}
também ?
Para facilitar a manutenção do seu código, é sempre bom utilizar classes ao invés de fazer a estilização baseada na estrutura do HTML.
Isso facilita na identificação rápida do elemento que está sendo utilizado e também permite que a estilização possa ser reaproveitada independentemente da estrutura que for utilizada.
Por exemplo, a estilização de parágrafos:
<main>
<article>
<h1>Titulo</h1>
<p>Texto 1</p>
</article>
<section>
<h2>Titulo secundario</h2>
<p>Texto 2</p>
</section>
<p>Texto 3</p>
</main>
Se eu quisesse estilizar do mesmo modo os textos 1 e 2, mas sem estilizar o texto 3, os seletores p {} ou main p {} não serviriam.
Seria necessário fazer dois seletores diferentes, main article p{} e main section p {} para fazer a estilização, gerando duplicação e confusão de código.
O grande problema seria: se eu resolvesse colocar o texto 3 dentro de uma section no futuro, ele absorveria a estilização inadequadamente.
A mesma coisa vale para o article, caso algum dia você resolva que ele na verdade seria melhor representado semanticamente por uma tag section.
Por isso, na minha opinião, vale sempre a pena utilizar classes.