Hvordan jeg style mine websteder med mine foretrukne CSS-nulstiller

Foto af Lauren Mancke på Unsplash

Mange frontend-udviklere begynder at style deres websteder med Normalize. Nogle udviklere har personlige præferencer, som de tilføjer til Normalize.css. Jeg har også mine præferencer.

I denne artikel vil jeg dele disse præferencer med dig, min personlige CSS-nulstilling (som jeg bruger ud over Normalize.css).

Jeg kategoriserer nulstillingen i 8 kategorier:

1. Kassestørrelse

2. Fjernelse af marginer og polstringer

3. Lister

4. Formularer og knapper

5. Billeder og indlejringer

6. Tabeller

7. Den skjulte attribut

8. Noscript

Kassestørrelse

Egenskaben med størrelsesboks ændrer, hvordan CSS Box-modellen fungerer. Det ændrer, hvordan egenskaber for bredde, højde, polstring, kant og margin beregnes.

Standardindstillingen til boksstørrelse er indholdsboks. Jeg foretrækker at ændre dette til kantboks, fordi det er lettere for mig at style polstring og bredde.

For mere information om boksstørrelse er du måske interesseret i "Forstå kassestørrelse".

html {
  box-dimensionering: border-box;
}
*,
*::Før,
*::efter {
  kassestørrelse: arve;
}

Fjernelse af marginer og polstringer

Browsere indstiller forskellige marginer og polstring til forskellige elementer. Disse standardindstillinger kaster mig væk, når jeg ikke ved det. Når jeg koder, foretrækker jeg at indstille alle marginer og polstringer selv.

/ * Nulstil margener og polstringer på de fleste elementer * /
legeme,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figur,
hr {
  margen: 0;
  polstring: 0;
}

Lister

Jeg bruger ikke-sorterede lister i mange situationer, og jeg har ikke brug for en diskstil i de fleste af dem. Her satte jeg listestil til ingen. Når jeg har brug for diskstilen, sætter jeg den tilbage manuelt på den specifikke

    .

    / * Fjerner diske fra ul * /
    ul {
      listestil: ingen;
    }

    Formularer og knapper

    Browsere arver ikke typografi til formularer og knapper. De indstiller font til 400 11px system-ui. Jeg synes dette er sjovt og underligt. Jeg er altid nødt til at få dem til at arve fra forfaderelementer manuelt.

    input,
    textarea,
    Vælg,
    knap {
      farve: arve;
      font: arve;
      brevafstand: arve;
    }

    Forskellige browsere har stylet grænserne for formelementer og knapper forskelligt. Jeg kan ikke lide disse standardformater og foretrækker at indstille dem til 1px massiv grå.

    input,
    textarea,
    knap {
      kant: 1px massiv grå;
    }

    Jeg foretog et par flere justeringer af knapperne:

    1. Sæt knappolstring til 0,75 em og 1em, fordi de ser ud som fornuftige standarder fra min oplevelse.
    2. Fjernet standardgrænseradius, der er anvendt på knapper.
    3. Tvungen baggrundsfarve for at være gennemsigtig
    knap {
      grænseradius: 0;
      polstring: 0,75 em 1em;
      baggrundsfarve: gennemsigtig;
    }

    Til sidst satte jeg pointer-events: ingen til elementer inden for en knap. Dette bruges hovedsageligt til JavaScript-interaktion.

    (Når brugere klikker på noget i en knap, er event.target det, de klikkede på, ikke knappen. Denne stil gør det lettere at arbejde med klikbegivenheder, hvis der er HTML-elementer inde i en knap).

    `` `Css
    knap * {
      pointer-events: none;
    }

    Medieelementer inkluderer billeder, videoer, objekter, iframes og embed. Jeg har en tendens til at lade disse elementer stemme overens med bredden på deres containere.

    Jeg indstiller også disse elementer til at vise: blokere, fordi inline-blok skaber uønsket hvidafstand i bunden af ​​elementet.

    indlejre,
    iframe,
    img,
    objekt,
    video {
      display: blokering;
      maks. bredde: 100%;
    }

    Borde

    Jeg bruger sjældent tabeller, men de kan være nyttige nogle gange. Her er standardformaterne, jeg begynder med:

    bord {
      bordlayout: fast;
      bredde: 100%;
    }

    Når et element har en skjult attribut, skal de være skjult for visningen. Normalize.css gør dette allerede for os.

    [skjult] {
      display: ingen;
    }

    Problemet med denne stil er dens lave specificitet.

    Jeg tilføjer ofte skjult til andre elementer, jeg style med en klasse. En klasses specificitet er høj end en attribut, og displayet: ingen egenskab fungerer ikke.

    Dette er grunden til at jeg vælger at slå [skjult] specificitet med! Vigtig.

    [skjult] {
      display: ingen! vigtig;
    }

    NoScript

    Hvis en komponent kræver, at JavaScript fungerer, tilføjer jeg et

    Dette opretter standardformater for

    / * noscript-stilarter * /
    noscript {
      display: blokering;
      margin-bund: 1em;
      margin-top: 1em;
    }

    Afslutter

    Alle begynder deres projekter anderledes. Du er velkommen til at bruge nogen af ​​disse stilarter, jeg nævnte. Her er en Github-repo af mine personlige CSS-nulstillinger.

    Har du nogen henstillinger, der kan hjælpe med at forbedre denne CSS Reset-fil? Hvis du gør det, er du velkommen til at række ud og fortæl mig det!

    Tak for at have læst. Hjalp denne artikel dig? Hvis det gjorde det, håber jeg, at du overvejer at dele det. Du kan muligvis hjælpe nogen anden. Tusind tak!

    Denne artikel blev oprindeligt sendt på min blog.
    Tilmeld mig mit nyhedsbrev, hvis du vil have flere artikler, der kan hjælpe dig med at blive en bedre frontend-udvikler.