Formatiranje CSS koda na mreži
Umetnite sažetu stilsku datoteku i ponovno je jasno pročitajte. Selektori su u zasebnim redcima, svaka deklaracija u svom retku, a blokovi i medijski upiti uvučeni su kao da ste ih ručno napisali.
Zašto je produkcijski CSS jedan dug redak
Produkcijske stilske datoteke često se minificiraju kako bi se smanjila količina teksta poslana pregledniku. Alati za izgradnju mogu ukloniti razmake i komentare, skratiti vrijednosti ili spojiti kompatibilna pravila. Rezultat ovisi o odabranom optimizatoru i njegovim postavkama; nisu zajamčeni ni određeno smanjenje veličine ni brže učitavanje stranice. Prevedena stilska datoteka s pomoćnim klasama može sadržavati mnogo malih pravila, što otežava pregled sažete datoteke. Formatiranje uvodi dosljedan raspored za čitanje tih pravila, ali ne može obnoviti izvorne komponente, datoteke pretprocesora ni konfiguraciju izgradnje koja ih je stvorila.
Ponovno čitanje kaskade
Glavni razlog formatiranja stilske datoteke jest razumijevanje zašto se pravilo primjenjuje ili ne primjenjuje. Kad je svaki selektor u svom retku, s uvučenim deklaracijama ispod njega, možete pratiti kaskadu: pronaći sva pravila koja ciljaju element, usporediti njihovu specifičnost, vidjeti koje dolazi posljednje i uočiti zalutali important koji nadjačava vaš rad. Medijski upiti i njihov sadržaj postaju vidljivi kao blokovi, pa je prilagodljivo ponašanje mnogo lakše pratiti nego u sažetoj datoteci. Za usmjereno istraživanje prije izmjena kopirajte cijelo pravilo i pripadajući okolni medijski upit. Vidljiva stilska datoteka objašnjava samo dio kaskade: važni su i stilovi na samom elementu, druge stilske datoteke, nasljeđivanje i trenutačni DOM. Razvojni alati preglednika pokazuju koje se deklaracije stvarno primjenjuju na element. Formatiranu datoteku koristite za razumijevanje njihova konteksta, a zatim provjerite ponašanje pri širini prikaza koju istražujete. Ako automatsko prepoznavanje označi CSS kao JavaScript, provjerite prikazanu oznaku prije nego što se oslonite na rezultat.
Podržan je suvremeni CSS
Alat razumije suvremeni CSS, a ne samo starije mogućnosti. Prilagođena svojstva, izrazi calc i clamp, skraćeni zapisi za grid i flexbox, upiti spremnika, ugniježđena pravila, slojevi, blokovi supports i ključni kadrovi neke su od podržanih mogućnosti. Dugi popisi selektora raspoređuju se u više redaka radi čitljivosti, a komentari koji su preživjeli izgradnju ostaju sačuvani. Ako datoteka miješa običan CSS sa svojstvima s prefiksima proizvođača, rezultat zadržava te deklaracije uz primjenu stila formatiranja.
Praktičan savjet za prevedene radne okvire
Pri formatiranju prevedene Tailwind ili Bootstrap stilske datoteke rezultat vrlo brzo naraste; deseci tisuća redaka uobičajeni su. Uključite brojeve redaka, a zatim umjesto pomicanja pretražite naziv klase ili svojstvo funkcijom pretraživanja preglednika. Ako želite smanjiti datoteku, a ne čitati je, glavni posao nalazi se u konfiguraciji izgradnje, jer su nekorištena pravila nastala prije same minifikacije.
Često postavljana pitanja
Mogu li formatirati prevedenu Tailwind stilsku datoteku?
Da, to je jedna od najčešćih primjena ove stranice. Očekujte vrlo dug rezultat jer radni okvir stvara pravilo za svaku pomoćnu klasu. Uključivanje brojeva redaka i pretraživanje u pregledniku praktičan su način kretanja kroz takvu datoteku.
Vraćaju li se komentari?
Komentari koji postoje u dostavljenom CSS-u mogu se prikazati u formatiranom izlazu. Komentare uklonjene minifikacijom nije moguće vratiti iz te datoteke, uključujući objašnjenja zašto neko pravilo postoji. Za bilješke o dizajnu, upute autora ili povijest selektora pogledajte izvorni repozitorij.
Radi li sa SCSS-om ili Lessom?
Ova je stranica namijenjena običnom CSS-u, uključujući prevedeni izlaz Sassa ili Lessa. Varijable, mixini i direktive svojstveni pretprocesorima nisu podržani ulaz. Najprije prevedite izvore odgovarajućim projektnim alatima, a zatim u ovom uređivaču pregledajte dobivenu stilsku datoteku.