Spletno razširjanje kode CSS
Dodajte skrčeno slogovno predlogo in jo spet udobno preberite. Izbirniki dobijo svoje vrstice, vsaka deklaracija je v svoji vrstici, bloki in medijske poizvedbe pa so zamaknjeni tako, kot bi jih napisali ročno.
Zakaj je produkcijski CSS ena dolga vrstica
Slogovne predloge se skrčijo iz istega razloga kot skripti: CSS zadrži izris, zato vsak prihranjeni bajt vpliva na hitrost prikaza strani. cssnano, Lightning CSS in optimizatorji v Sass ter PostCSS odstranijo presledke in komentarje, skrajšajo barvne vrednosti, združijo podvojena pravila ter izpustijo zadnje podpičje v bloku. Ogrodja s pomožnimi razredi ustvarijo še gostejši rezultat, saj prevedena predloga Tailwind lahko vsebuje na tisoče drobnih pravil s komaj kaj prostora med njimi.
Ponovno razumite kaskado
Glavni razlog za oblikovanje slogovne predloge je razumevanje, zakaj pravilo velja ali ne. Ko je vsak izbirnik v svoji vrstici, deklaracije pa so zamaknjene pod njim, lahko sledite kaskadi: najdete vsa pravila za element, primerjate njihovo specifičnost, preverite vrstni red in odkrijete nepričakovani important, ki preglasi vaše delo. Medijske poizvedbe in njihova vsebina postanejo vidni bloki, zato je odzivno vedenje veliko lažje razumeti kot v skrčeni datoteki.
Podprt je sodoben CSS
Oblikovalnik razume sodobni CSS. Pravilno obdela lastnosti po meri, izraze calc in clamp, krajše zapise za grid ter flexbox, poizvedbe vsebnikov, gnezdena pravila, plasti, bloke supports in ključne sličice. Dolge sezname izbirnikov razporedi v več vrstic, da jih lahko dejansko preberete, komentarje, ki so preživeli gradnjo, pa ohrani. Če se običajni CSS prepleta z lastnostmi s predponami proizvajalcev, se ohranijo vse, le njihova razporeditev je preglednejša.
Praktičen nasvet za prevedena ogrodja
Pri oblikovanju prevedene predloge Tailwind ali Bootstrap datoteka hitro postane zelo dolga. Več deset tisoč vrstic je povsem običajnih. Vključite številke vrstic in uporabite iskanje v brskalniku po imenu razreda ali lastnosti, ki vas zanima, namesto da se pomikate skozi celotno datoteko. Če želite datoteko zmanjšati, ne le prebrati, je treba pregledati nastavitve gradnje. Neporabljena pravila namreč nastanejo še pred korakom minifikacije in jih samo oblikovanje ne more odstraniti.
Pogosta vprašanja
Ali lahko razširim prevedeno predlogo Tailwind?
Da, to je ena najpogostejših uporab te strani. Rezultat je lahko zelo dolg, ker ogrodje ustvari pravilo za vsak pomožni razred. Za premikanje po njem vključite številke vrstic in uporabite iskanje v brskalniku.
Ali se obnovijo komentarji?
Ohranijo se samo tisti, ki so ostali v datoteki. Večina minifikatorjev izbriše vse komentarje razen pravnih obvestil, izbrisanih pa ni mogoče obnoviti. Oblikovalnik ohrani in ustrezno razporedi vse, kar je še prisotno.
Ali deluje s SCSS ali Less?
Ta stran je namenjena običajnemu CSS, ki ga brskalniki dejansko prejmejo. Izvorne datoteke predprocesorjev s spremenljivkami, mešanicami in skladnjo gnezdenja, značilno za SCSS ali Less, niso predviden vhod. Standardno gnezdenje v CSS je podprto.