5 tipp a SUPER-FAST CSS-hez

Jan 23, 2026

kézikönyv

Gondoltál a webhely CSS méretéről? Ha a stíluslapod balloning, akkor késleltetheti az oldal renderelését.

16 felső CSS animációs példák

Bár a CSS nem a legnagyobb eszköztípus, akkor az egyik az első, hogy a böngésző felfedezi. Mivel a böngésző blokkolva van az oldal megjelenítéséből, amíg a CSS letölthető és elemezve van, a lehető legszívesebbnek kell lennie. Itt van öt tipp, hogy segítsen odaérni.

Van egy komplex hely? Szüksége van a tökéletesre web hosting szolgáltatás. Vagy, ha azt szeretnénk, hogy egy webhelyet a fuss nélkül, próbálja meg a weboldal építője .

01. Használjon sekély választékot

A szülei azt mondták, hogy a sekélység nem erény, de amikor a CSS-hez jön, tévednek. Használt konzisztens, sekély választók vághatják ki a kilobájtokat a nagy stílusú lapok. Vegye ki ezt a választót:

nav ul li.nav-item

Ez sokkal jobban kifejezhető:

.nav-item

A CSS Svelte tartásának segítése mellett a böngésző a sekély választók gyorsabbá válik. A böngészők olvasták a választók jobbról balra. Minél mélyebb a választók, annál hosszabb ideig tart a böngésző számára, hogy az elemeket az elemek alkalmazzák. A komplex dombok esetében, amelyek gyakran visszahúzódnak, a rövid választók is csökkenthetik a Jankot.

Ideális esetben a szelektorok olyan sekélyebbek, de ez nem jelenti azt, hogy mindent le kell vágnod a csontra. Néha további specifitásra van szüksége a komponensek meghosszabbítására. Szüntesse meg a megfelelő egyensúlyt, de legyen pragmatikus is.

02. Használja a Shorthand tulajdonságokat

Using shorthand CSS will speed up your site — A rövidítés használata A CSS felgyorsítja a webhelyét

Ez úgy tűnik, mint a józan ész, de meglepődsz, hogy milyen gyakran használják a Longhand tulajdonságokat szükségtelenül. Íme egy példa a használatban lévő Longhand tulajdonságokra:

 Font-Méret: 1.5Rem;
Vonalmagasság: 1.618;
Font-Család: "Arial", "Helvetica", Sans-Serif;

Ez sok CSS! Tegyünk ki rendben:

 Font: 1.5REM / 1.618 "Arial", "Helvetica", sans-serif;

A betűtípus A Shorthand ingatlan több nyilatkozatot kondenzálhat egy praktikus egybélésbe, amely sokkal kevesebb helyet foglal el.

A fentiekben bemutatott példában a rövidítés körülbelül 40 százalékkal kevesebb helyet használ, mint a Longhand ekvivalens. Nem olyan olvasható, mint az első pillantásra, de a szintaxis második természetűvé válik, miután töltöttél egy kis időt.

Természetesen, betűtípus nem az egyetlen rövidítő elérhető. Például, árrés Használható hosszabb tulajdonságok helyett, mint például margó felső , margó jobb stb.

A párnázás Az ingatlan ugyanúgy működik. A CSS tisztításához a Mozilla Developer Network segítőkész listát kínál Shorthand ingatlan hivatkozások .

Mi van, ha felül kell osztani egy értéket a kaszkádban? Például mondjuk, hogy van egy fejlécelem, amelynek meg kell változtatnia a betűméretét nagyobb megjelenítésekhez.

Ebben az esetben a pontosabban kell használni betűméret Helyette:

 H1 {
    Font: 1.5REM / 1.618 "Arial", "Helvetica", sans-serif;
}
@media (min-szélesség: 60REM) {
    h1 {
        betűméret: 2REM;
    }
}

Ez nem csak kényelmes, akkor növeli az összetevő rugalmasságát is. Ha az alapul szolgáló másik része betűtípus A tulajdonság módosul, ezek a változások a nagyobb kijelzőkig terjednek. Ez nagyszerűen működik az összetevők felülbírálásaihoz, ahol egy új kontextus más kezelést igényel.

03. Használja a Preload Resource Tippet

A előtöltés Az erőforrás-tipp megadhatja a böngészőnek a webhely CSS-jének betöltését. A előtöltés Az erőforrás-tipp elmondja a böngészőnek, hogy kezdeményezzen egy korai lekérést egy eszközhöz.

Beállíthatja, mint a & ln; link & gt; címke html-ben:

Vagy HTTP fejlécként a kiszolgáló konfigurációjában:

  link: & lt; /css/styles.css> ;; rel = előterhelés; as = stílus

Mindkét forgatókönyvben, előtöltés A böngészőnek a fejét elkezdi betölteni /css/styles.css . Használ előtöltés A HTTP fejlécben előnyösebb, hiszen ez azt jelenti, hogy a böngésző felfedezi a válaszadási fejlécekben, ahelyett, hogy később a válasz szervbe kerülne.

Egy másik ok a használatra előtöltés HTTP fejlécben az, hogy a legtöbb http / 2 implementációban kiszolgálói push eseményt kezdeményez. A kiszolgáló nyomógombja olyan mechanizmus, amellyel az eszközöket megelőzésre tolja az ügyfélre, amikor a tartalomra vonatkozó kérelmeket készítenek, és a CSS bevonásához hasonló teljesítményt nyújt.

A Server Push nem érhető el a http / 1-en. Azonban a használat előtöltés Egy http / 1 környezetben még javíthatja a teljesítményt.

04. CULL elbocsátások a CSSCSS-vel

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — A CSSCS-ek elemzik az általad megadott CSS-fájlokat, és tudják, hogy melyik szabályok duplikált nyilatkozatai vannak

Fizethet, hogy ellenőrizze a CSS-t az ismétlődő szabályokhoz egy redundancia ellenőrzővel. Vegye ki például a Ruby-alapú CSCS-eket.

A Ruby felhasználók telepíthetik:

  Gem telepítése CSSCSS

Miután telepítve van, megvizsgálhatja a CSS-t az elbocsátásokhoz, mint például:

  CSSCSS -v styles.css

Ez a parancs felsorolja, hogy melyik választók megoszthatják azokat a szabályokat, amelyeket megismételte a helyet:

 {H1} és {P} Megosztás 3 nyilatkozat
  - Szín: # 000
  - Line-Magasság: 1.618
  - Margó: 0 0 1.5Rem

Az egyválasztó alatt másolható szabályokat mozgathat:

 H1, p {
    Szín: # 000;
    Vonalmagasság: 1.618;
    Margó: 0 0 1.5Rem;
}

Meglepődne, hogy mennyi hely ez a folyamat megmenthet nagy projektekben. Használja a --Segítség Lehetőség További parancsok megtekintéséhez használhatja a dolgokat.

05. Menjen az extra mérföldre Cssnano-val

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — Cssnano veszi a szépen formázott CSS-t, és sok koncentrált optimenziókon keresztül fut

A cseresznye tetején használható csnnano - csomópont és posztcs-függő eszköz. A Cssnano nemcsak a CSS-t minimeli, akkor sok koncentrált optimalizációt eredményez, amelyek még tovább csökkenthetik a CSS-t. Telepítse a rendszerre az NPM-vel, így:

 NPM I -G Cssnano-CLI

Ezután használja a CSS optimalizálásához:

 cssnano styles.css optimalizált stílusok.css

Ha a futó parancsok ad hoc nem az Ön stílusa, akkor automatizálhatja Cssnano-t egy építési rendszerrel. Íme, hogyan kell használni cssnano-t egy gulpfile:

 CONST GULP = igényel ("Gulp");
CONST POSPOSCS = igényel ("Gulp-Postcss");
CONST CSNANO = igényel ("cssnano");

const buildcss = () = & gt; {
    RETURN GULP.SRC ("CSS / Styles.css")
        .pipe (posztcsok ([cssnano ()])
        .pipe (gulp.dest ("CSS / optimalizált"));
};
const watch = () = & gt; {
    gulp.watch ("CSS / styles.css", buildcss);
};
Exports.Buildcss = buildcss;
exports.Watch = Watch;

A buildcss Feladat Olvassa el a CSS-t, amit írsz CSS / Styles.css , akkor csövek az optimalizált kimenetet a CSS / Optimalizált Könyvtár. A néz A feladat kiindul buildcss Ha a változások bekövetkeznek CSS / Styles.css .

A néz A feladatot ezután a terminálban lehet felhívni:

 Gulp Watch

Néhány csípéssel olyan munkafolyamatot hozhat létre, amely ezt a specifikus optimalizálást más CSS-vel kapcsolatos feladatok mellett végzi, mint például a Sass / kevesebb fájlok építése, autoprefixing és így tovább.

Szeretné menteni a webhely oldalait? Exportáljon PDF-ként és menteni megbízható felhő tároló .

Ez a cikk eredetileg megjelent háló , A világ vezető magazinja webes tervezők számára. Iratkozzon fel itt .

Kapcsolódó cikkek:

A CSS kijelző tulajdonságának megértése
A CSS animáció új határán
Hogyan építsünk komplex elrendezéseket a CSS használatával

5 tipp a SUPER-FAST CSS-hez

01. Használjon sekély választékot

02. Használja a Shorthand tulajdonságokat

03. Használja a Preload Resource Tippet

04. CULL elbocsátások a CSSCSS-vel

05. Menjen az extra mérföldre Cssnano-val

kézikönyv - Most Popular Articles

Hogyan kell rajzolni egy macskát

Adaptív elrendezések építése média lekérdezések nélkül

Kezdje el a Redux Thugs-t

Kapjon többet a grafitból ezekkel a tippekkel

Kezdje el a WebGL-t a Three.js használatával

3D szöveges bemutató grafikus tervezők számára

Készítsen reális növényeket a Cinema 4D-ben

Szenzációs naplementét hoz létre a Photoshopban

Kategóriák