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 ?
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.