Tudnátok pár kérdésben segíteni?

"Mikor érdemes beágyazott CSS-t"

Ha csak és kizárólag az adott oldalra jellemző stílusdefiníciókat szeretnénk, olyan elemeken, amelyek más oldalon is előfordulhatnak.

"és mikor külön .css fájlt készíteni?"

Ha olyan formázásokat akarunk, ami több oldalon is előfordulhatnak.

"Mit jelent, hogy a CSS lépcsőzetes?"

Hogy a stílusdefiníciók lépcsőzetesen épülnek egymásra.

Szóval ha van egy ilyen stílusdefinícióid:

body {

font-weight: bold;

background:blue;

}

body {

background:green;

}

akkor a háttér zőld lesz, de a szöveg félkövér.

"Mit jelent, hogy beágyazott a CSS?"

A <style> és </style> elemek közé elhelyezett stílusdefiníciók.

A speed tesztek mostanában azt várják el a weboldalaktól, hogy beágyazott css-t használjanak, mivel így nem kell külön file-t betölteni egy-egy oldal betöltődésekor és így gyorsabb lesz az oldal betöltődése.

Ha külön fájlban tárolod a stíluselemeket, első kattintásra fog a felhasználónak letöltődni a css file, s ha jók a cachelési beállítások, a későbbiekben már nem fog. Ennek előnye, hogy a felhasználó következő kattintásai alkalmával már kevesebb mennyiségű adatot kell forgalmazni, a gépe nem tölti le újra a css file-t. Hátránya, hogy ha a css-en változtatsz, minden alkalommal új filenevet kell majd adnod, különben a cachelési beállításoktól függően a felhasználó a régi css file-od használhatja még jó darabig.

Ha beágyazod minden egyes oldalba a stíluselemeket, nyilvánvalóan nagyobb mennyiségű adatot forgalmazol minden alkalommal, viszont könnyebb változtatni valamin, hiszen ez rögtön megjelenik a felhasználó következő oldalletöltésében. Ez esetben a legjobb, ha úgy programozol, hogy mindig csak azok a stíluselemek szerepelnek az oldal <style></style> részében, amik szerepelnek is az oldalon és nem az összes.

"A speed tesztek mostanában azt várják el a weboldalaktól, hogy beágyazott css-t használjanak, "

Csak bizonyos esetekben javasolják.

Yahoo YSlow:

* [link]

Google PageSpeed:

* [link]

Google Lighthouse:

* [link]