Hallo allemaal,

Na veel klooien met het css-bestand van een css-generator website heb ik besloten om maar eigen lay-out in CSS te maken. Uiteraard gaat dit tijd kosten, maar het is niet anders helaas.
En voordat ik hiermee aan de slag heb ik de volgende vragen over:

1. Is het handig of juist niet praktisch om een reset.css zoals hieronder weergeven op te nemen in het hoofdcss.css bestand?
2. Indien het handig is hoe moet ik mee omgaan en wat is de functie precies?
3. Zoals hieronder weergegeven, heeft de H1 0 margin en padding.
4. En mocht het nodig zijn dat ik een H1 wel moet voorzien van een margin en padding, betekent het dat ik de H1 moet verwijderen uit reset.css om de marging en padding toe te kunnen voegen of moet ik eerst een ID of een class toe te kennen aan de H1, voordat ik het kan gebruiken?

Alvast bedankt voor het meedenken!


/**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://www.cssportal.com
    */
    html, body, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
Vroeger was er geen standaardisatie over de werking van CSS-stijlen, elke browser implementeerde het op een manier zoals zij het goed vonden. Dat was al één van de redenen dat vroeger Internet Explorer werd gehaat, omdat deze veel afwijking had met betrekking tot CSS conform andere browsers. Inmiddels is dit wel verbeterd, en met Edge al helemaal omdat ze nu (eindelijk) een bestaande lay-out engine gebruikten, in plaats van eigen versie.

Maar toch zijn er nog steeds wazige grenzen in CSS bij vele browsers, met voornamelijk marges, paddings, fonts. Daarom hebben ontwikkelaars een 'reset'-CSS is het leven gebracht die ervoor zorgen dat alle waarden voor alle browser vanaf 0 beginnen. Zo voorkom je een hoop compatibiliteitsproblemen.
Het beste is om een reset in je CSS te gebruiken. Ikzelf raad Normalize aan. Die zit overigens standaard al in de Bootstrap gebakken, als je die toevallig al gebruikt.
Hallo - Ariën -,

Bedankt voor je uitleg.
De functie van reset.css is mij nu wel duidelijk en hoe kan ik nu het beste gebruiken en/of je of iemand anders antwoord wil geven mijn bovenstaande vragen.

Alvast bedankt!
Je gebruikt het door de import voor je overige CSS. te doen. CSS overerft, waardoor latere regels eerdere regels aanvullen/overschrijven.
Hallo Ben,

Ik snap je feedback niet helemaal, en ik denk dat ik het zou begrijpen als je antwoord wil geven op mijn onderstaande vragen:
Ik ben nl meer van de praktijk dan de theorie :d

Zoals hierboven weergegeven, heeft de H1 0 margin en padding.
En mocht het nodig zijn dat ik een H1 wel moet voorzien van een margin en padding, betekent het dat ik de H1 moet verwijderen uit reset.css om de marging en padding toe te kunnen voegen of moet ik eerst een ID of een class toe te kennen aan de H1, voordat ik het kan gebruiken?
Een 'reset' is het eerste wat je gebruikt bij het developpen in CSS.
Als je halverwege begint, dan zul je als je waardes in je properties opnieuw moeten instellen.
M.a.w zeg je als ik live ga, dan moet ik die reset.css niet meer gebruiken?
Mohamed nvt op 06/08/2017 13:39:04

M.a.w zeg je als ik live ga, dan moet ik die reset.css niet meer gebruiken?

Dat zeg ik niet?
Je kan een 'reset' niet zomaar halverwege tijdens de bouw inbouwen. Dan moet je al je properties weer nalopen. Lees anders nog eens goed door dat een reset doet.
Daar heb je wel een punt, maar ik ga niet tijdens de bouw een reset.css inbouwen.
Ik ga de lay-out helemaal vanaf scratch bouwen en ik dacht is het nou handig of juist niet praktisch om te werken met een reset.css bestand...
In dat geval raad ik het juist aan! Als je de Bootstrap gebruikt, zit dit er al in.
Oke en ik wil het ook graag gebruiken, maar er is een ding wat niet duidelijk is voor me en wil graag duidelijkheid erover hebben voordat ik hiermee aan de slag ga.
En dat is nl het volgende:
Zoals hierboven weergegeven, heeft de H1 0 margin en padding.
En mocht het nodig zijn dat ik een H1 wel moet voorzien van een margin en padding, betekent het dat ik de H1 moet verwijderen uit reset.css om de marging en padding toe te kunnen voegen of moet ik eerst een ID of een class toe te kennen aan de H1 , voordat ik het kan gebruiken?

Reageren