5 tips for super-rask CSS

Sep 11, 2025

hvordan

[1. 3]

Har du tenkt på størrelsen på nettstedets CSS? Hvis stilarket ditt er ballong, kan det være forsinkende side som gjengir.

16 Topp CSS animasjonseksempler

Selv om CSS ikke er den største aktiva typen du vil tjene, er det en av de første som nettleseren oppdager. Fordi nettleseren er blokkert fra å gjøre siden til CSS er lastet ned og analysert, må den være så mager som mulig. Her er fem tips for å hjelpe deg med å komme dit.

Fikk et komplekst nettsted? Du trenger den perfekte Web Hosting. service. Eller, hvis du vil lage et nettsted uten oppstyret, prøv en Nettstedbygger .

01. Bruk grunne selektorer

Foreldrene dine fortalte deg at grunnen ikke er en dyd, men når det gjelder CSS, er de feil. Brukes konsekvent, kan grunne selgere trimme kilobytes av store stilark. Ta denne seleksjonen:

nav ul li.nav-item

Dette kan uttrykkes mer kortfattet:

.nav-item

I tillegg til å bidra til å holde CSS Svelte, vil nettleseren også gjøre elementene som er målrettet av grunne selgere raskere. Nettlesere leser selektorer fra høyre til venstre. Jo dypere selektørene er, desto lengre tid tar det for nettleseren å gjengi og gjengi elementene disse seleksjonene påføres. For komplekse doms som reflow ofte, kan korte selektorer også kutte ned på Jank.

Ideelt sett vil du at selektorer skal være så grunne som mulig, men dette betyr ikke at du skal kutte alt ned til beinet. Noen ganger trenger du ytterligere spesifisitet for å forlenge komponenter. Slå den rette balansen, men vær pragmatisk også.

02. Bruk Shorthand Egenskaper

Using shorthand CSS will speed up your site — Bruke Shorthand CSS vil øke hastigheten på nettstedet ditt

Dette virker som sunn fornuft, men du vil bli overrasket over hvor ofte langvarig eiendommer brukes unødvendig. Her er et eksempel på noen longhandske egenskaper i bruk:

 Font-størrelse: 1.5rem;
Linjehøyde: 1.618;
Font-Family: "Arial", "Helvetica", Sans-serif;

Det er mye CSS! La oss rydde opp:

 Font: 1.5rem / 1.618 "Arial", "Helvetica", Sans-serif;

De font. Shorthand eiendom kondenserer flere erklæringer til en praktisk en-liner som tar opp mye mindre plass.

I eksemplet som er vist ovenfor, bruker Shorthand ca. 40 prosent mindre plass enn dets longhand-ekvivalent. Det er ikke så lesbart ved første øyekast, men syntaksen blir andre natur etter at du har brukt litt tid med å bruke den.

Selvfølgelig, font. er ikke den eneste shorthanden tilgjengelig for deg. For eksempel, margin kan brukes i stedet for lengre eiendommer som margin-top , margin-høyre og så videre.

De polstring Eiendommen fungerer på samme måte. For flere måter å rydde opp din CSS, tilbyr Mozilla Developer Network en nyttig liste over Shorthand Property References. .

Hva om du trenger å overstyre en verdi lenger ned i kaskaden? For eksempel, la oss si at du har et overskriftselement som må endre skriftstørrelsen for større skjermer.

I dette tilfellet bør du bruke de mer spesifikke skriftstørrelse Eiendom i stedet:

 h1 {
    Font: 1.5rem / 1.618 "Arial", "Helvetica", Sans-serif;
}
@Media (min bredde: 60rem) {
    h1 {
        Font-størrelse: 2rem;
    }
}

Dette er ikke bare praktisk, det øker også komponentfleksibiliteten. Hvis noen annen del av den underliggende font. Eiendommen er endret, de endringene vil perkulere opp til større skjermer. Dette fungerer bra for komponentoverskridelser der en ny sammenheng krever en annen behandling.

03. Bruk forhåndsinnstillingsressurens hint

De Forsiktig Ressurshint kan gi nettleseren en start på å laste inn nettstedets CSS. De Forsiktig Resource Hint forteller nettleseren å starte en tidlig hente for en eiendel.

Du kan sette den som en & lt; link & gt; Merk i HTML:

  & LT; LINK REL = "PELLOAD" HREF = "/ CSS / STYLES.CSS" AS = "Style" & GT;

Eller som en http-header i serverkonfigurasjonen din:

  lenke: & lt; /css/styles.css> ;; rel = peload; som = stil

I begge disse scenariene, Forsiktig Gir nettleseren A Head Start på lasting /css/styles.css . Ved hjelp av Forsiktig I en HTTP-header er å foretrekke, siden dette betyr at nettleseren vil oppdage hinten tidligere i responshodene, i stedet for senere i responslegemet.

En annen grunn til å bruke Forsiktig I en HTTP-overskrift er at den vil starte en serverpush-hendelse på de fleste http / 2-implementeringer. Server Push er en mekanisme som eiendeler er preemptivt presset til klienten når forespørsler om innhold er gjort, og det gir ytelsesfordeler som ligner på Inlining CSS.

Server Push er ikke tilgjengelig på http / 1. Men bruker Forsiktig I et HTTP / 1-miljø kan det fortsatt forbedre ytelsen.

04. Cull Redundancies med CSSCSS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSSCSS vil analysere eventuelle CSS-filer du gir det og gi deg beskjed om hvilke reglerett som har dupliserte deklarasjoner

Det kan betale for å sjekke CSS for dupliserte regler med en redundanschecker. Ta rubinbaserte verktøyet CSSCS, for eksempel.

Ruby-brukere kan installere det med:

  GEM Installer CSSCSS

Når du er installert, kan du undersøke CSS for redundans som så:

  CSSCSS -V Styles.css

Denne kommandoen lister som velger, deler regler som du kan de-duplisere for å spare plass:

 {H1} og {P} Del 3 erklæringer
  - Farge: # 000
  - Linjehøyde: 1.618
  - Margin: 0 0 1.5rem

Du kan flytte dupliserte regler under en velger:

 H1, P {
    Farge: # 000;
    Linjehøyde: 1.618;
    margin: 0 0 1.5rem;
}

Du vil bli overrasket over hvor mye plass denne prosessen kan spare i store prosjekter. Bruke --hjelp Mulighet for å se flere kommandoer du kan bruke til å justere ting videre.

05. Gå den ekstra mile med Cssnano

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — Cssnano tar dine pent formaterte CSS og kjører det gjennom mange fokuserte optimaliseringer

For kirsebær på toppen, kan du bruke cssnano. - En node og postcss-avhengig verktøy. CSSNANO ikke bare minifiserer CSS, det gjør mange fokuserte optimasjoner som kan redusere CSS enda lenger. Installer den på systemet med NPM som så:

 npm i -g cssnano-cli

Bruk den til å optimalisere CSS:

 Cssnano Styles.css Optimized-Styles.css

Hvis kjøre kommandoer ad hoc ikke er din stil, kan du automatisere CSSNANO med et byggesystem. Slik bruker du Cssnano i en Gulpfile:

 CONT GULP = KRAV ("GULP");
const Postcss = krever ("gulp-postcss");
const cssnano = kreve ("cssnano");

const buildcss = () = & gt; {
    Return Gulp.SRC ("CSS / Styles.css")
        .pipe (postcss ([cssnano ()])
        .Pipe (Gulp.Dest ("CSS / Optimized"));
};
const watch = () = & gt; {
    gulp.Watch ("CSS / Styles.css", Buildcss);
};
Eksport.buildcsss = Buildcsss;
Eksport.Watch = Watch;

De Buildcsss. Oppgaven leser CSS du skriver i CSS / Styles.css , så rør den optimaliserte utgangen til CSS / Optimized. katalog. De se Oppgave sparker av Buildcsss. Når endringer oppstår i CSS / Styles.css .

De se Oppgaven kan da påberopes i terminalen som så:

 Gulp Watch

Med litt tweaking kan du bygge en arbeidsflyt som utfører denne spesifikke optimaliseringen i tillegg til andre CSS-relaterte oppgaver, for eksempel å bygge Sass / Mindre filer, AutoPrefixing og mer.

Vil du lagre nettstedets sider? Eksporter som PDF-filer og lagre i pålitelig skylagring .

Denne artikkelen opprinnelig dukket opp i nett , verdens ledende magasin for webdesignere. Abonner her .

Relaterte artikler:

Forstå CSS-displayegenskapen
Den nye grensen av CSS animasjon
Hvordan bygge komplekse layouter ved hjelp av CSS

5 tips for super-rask CSS

01. Bruk grunne selektorer

02. Bruk Shorthand Egenskaper

03. Bruk forhåndsinnstillingsressurens hint

04. Cull Redundancies med CSSCSS

05. Gå den ekstra mile med Cssnano

hvordan - Mest populære artikler

Hvordan bygge en progressiv web app

Opprett 3D-tekst i Photoshop: En trinnvis veiledning

Hvordan lage en fotorealistisk romscene

Bygg en Material Design App med vinkel 2

Mal et uttrykksfulle stilleben i akryl

Hvordan fange lyset med oljer

Bygg en enkel musikkspiller med reagere

Hvordan lage en snapchat geofilter i Photoshop

Kategorier