CSS Reset - Cât de necesar este?

În continuarea discuției Colțuri rotunjite cross-browser:

Cât de necesar este un CSS reset? Pe care îl folosiți? De ce?

De câte ori ați avut probleme cu un minimal de genul:

* { margin:0; padding:0;}

// opțional:
html { box-sizing: border-box; }
*, *:before, *:after {   box-sizing: inherit; }

*{padding:0px;margin:0px;} poate provoca mai multe probleme decat rezolva…

Exista mai multe normalizari modulare sau frameworkuri in schimb care pot fi utile.

http://www.basscss.com/
http://foundation.zurb.com/
http://getbootstrap.com/2.3.2/

Majoritatea au la baza
https://necolas.github.io/normalize.css/

Chiar si Discourse foloseste normalize.css v3.0.1
https://devforum.ro/stylesheets/desktop_4bb03cdf63ebe25bd837848b9294ffe9706c0dee.css?__ws=devforum.ro

Daca nu le folosesc cel putin jumatate din web developeri nu le foloseste nimeni.

Concret, tu te-ai lovit de astfel de probleme? Exemple?

Normal ca da, nu pot da un exemplu neaparat dar e clar ca trebuie sa declari padding si margin la fiecare element nou in parte. (practic faci ce face normalize.css daca esti destept), daca nu o sa ai 30 de elemente cu 2 linii in plus daca esti destept si folosesti shorthand-urile sau daca esti mai putin destept o sa ai 8 linii in plus x 30. (daca avem 30 de parinti desigur)

Iar in developer tools, daca cumva sterg un padding sau margin din greseala si modific altul ca sa compensez totul devine genial.

„Fiecare elemnt în parte” înseamnă, în principiu, chestii de tipografie: p, h1h6, 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 :slight_smile:

Mental e mai simplu sa stiu ca toate elementele au margin & padding 0. Oricum intr-un proiect, cel mai probabil, se suprascriu valorile default din browser.

Eu folosesc snippet-ul tau plus o varianta custom de normalize.css fara margin & padding & font.

Cred ca in browsere moderne si mai ales pentru design de mobil, este mai usor sa te descurci fara CSS reset. Chiar recent am facut o mica paga HTML pentru blog, ca un exercitiu de CSS. Ma asteptam la un moment dat sa trebuiasca sa introduc un reset, dar n-a fost cazul. Totul a click-uit cum trebuie cu cele cateva reguli specifice ce tineau strict de design-ul paginii.