Muuda CSS veebis loetavaks
Lisa tihendatud laadileht ja loe seda taas mugavalt. Selektorid on omaette ridadel, iga deklaratsioon eraldi real ning plokid ja meediapäringud taandatud nii, nagu kirjutaksid need käsitsi.
Miks tootmiskeskkonna CSS on üks pikk rida?
Laadilehti tihendatakse samal põhjusel nagu skripte: CSS blokeerib renderdamist ning iga säästetud bait mõjutab otseselt lehe kuvamise kiirust. cssnano, Lightning CSS ning Sassi ja PostCSS-i optimeerijad eemaldavad tühikud, ühendavad selektoreid, lühendavad värviväärtusi ja kõrvaldavad kordusi. Tailwindi või Bootstrapi loodud laadileht võib sisaldada tuhandeid reegleid, mis kõik mahuvad ühele reale. Brauser saab sellega suurepäraselt hakkama, kuid arendaja jaoks on faili uurimine vaevaline.
Kaskaadi jälgimine
Loetava CSS-i tegelik väärtus on võimalus mõista, miks mõni reegel rakendub või ei rakendu. Kui iga selektor asub eraldi real ja selle deklaratsioonid on all taandatud, saad kaskaadi korralikult jälgida: leia kõik elementi sihtivad reeglid, võrdle nende spetsiifilisust, vaata, milline tuleb viimasena, ning märka juhuslikku !important-märget, mis sinu töö üle kirjutab. Meediapäringud ja nende sisu muutuvad selgeteks plokkideks ning kohanduva kujunduse käitumist on palju lihtsam jälgida kui tihendatud failis.
Toetatakse tänapäevast CSS-i
Vormindaja mõistab praegust CSS-i, mitte ainult vanemat alamhulka. Kohandatud omadused, calc- ja clamp-avaldised, grid'i ja flexboxi lühivormid, konteineripäringud, pesastatud reeglid, kihid, supports-plokid ja keyframes vormindatakse õigesti. Pikad selektoriloendid jagatakse mitmele reale, et neid saaks lugeda, ning järgu loomisel säilinud kommentaarid hoitakse alles. Kui failis on koos tavaline CSS ja brauseritootjate prefiksiga omadused, säilivad mõlemad ning muutub vaid nende paigutus.
Praktiline nõuanne kompileeritud raamistikele
Kompileeritud Tailwindi või Bootstrapi laadilehe vormindamisel kasvab fail kiiresti väga pikaks. Kümned tuhanded read on tavalised. Lülita sisse reanumbrid ja kasuta kerimise asemel brauseri otsingut huvipakkuva klassi või omaduse leidmiseks. Kui eesmärk on faili lugemise asemel selle mahtu vähendada, tuleb keskenduda järgu seadistusele: kasutamata reeglid loodi juba enne tihendamise käivitumist.
Korduma kippuvad küsimused
Kas saan kompileeritud Tailwindi laadilehte vormindada?
Jah, see on selle lehe üks tavalisemaid kasutusviise. Tulemus võib olla väga pikk, sest raamistik loob iga abiklassi jaoks reegli. Seetõttu on praktiline lülitada sisse reanumbrid ja kasutada failis liikumiseks brauseri otsingut.
Kas kommentaarid taastatakse?
Ainult need, mis on säilinud. Enamik tihendajaid kustutab kõik kommentaarid peale õiguslike märgetena tähistatud teadete. Kustutatud kommentaare ei saa taastada. Vormindaja säilitab failis alles oleva ja paigutab selle loetavalt.
Kas see töötab SCSS-i või Lessiga?
See leht on mõeldud tavalise CSS-i jaoks, mida brauserid päriselt alla laadivad. SCSS-i või Lessi muutujate, mixin'ite ja erilise pesastussüntaksiga lähtefailid pole ettenähtud sisend, kuid standardset pesastatud CSS-i toetatakse.