„Fiecare elemnt în parte” înseamnă, în principiu, chestii de tipografie: p
, h1
…h6
, blockquote
, ul
, ol
, li
. Iar de fiecare dată când folosești elementele astea pentru orice altceva în afară de conținut, trebuie să resetezi chestii.
Din punct de vedere al spațiilor, chiar nu văd de ce treaba de mai jos nu ar fi suficientă:
* { margin: 0; padding: 0; }
.typography { // [1]
p, ol, ul, li, blockquote, h1, h2, h3, h4, h5, h6 {
margin-bottom: 1em;
&:last-child { margin-bottom: 0; }
}
}
Mai adaugi elemente de formular, mici tweak-uri și sigur nu ajungi la 7kb (sau 2kb gzipped).
[1] Nu mi s-a întâmplat niciodată să am nevoie de margini tipografice în afara unui container pentru conținut.
Nu zic că nu sunt bune astfel de reset-uri, dar, de cele mai multe ori, s-ar putea să fie un pic overkill.
Ca idee, ia un proiect mare la care ai lucrat, scoate tot reset-ul și adaugă doar partea asta: * { margin: 0; padding: 0; }
. S-ar putea să rămâi surprins să vezi cât de puține se schimbă. În orice browser.
Folosesc o variație personală a acestui reset, dar îl folosesc mai mult din obișnuință; zilele trecute mi-a trăznit treaba asta cu inutilitatea. S-ar putea să mă înșel