CSS formatēšana tiešsaistē
Ievietojiet saspiestu stila lapu un atkal lasiet to bez piepūles. Selektori ir atsevišķās rindās, katra deklarācija savā rindā, bet bloki un mediju vaicājumi iegūst dabiskas atkāpes.
Kāpēc publicēts CSS ir vienā garā rindā
Stila lapas minificē tā paša iemesla dēļ kā skriptus. CSS bloķē attēlošanu, tāpēc katrs ietaupītais baits ietekmē lapas parādīšanās ātrumu. cssnano, Lightning CSS un Sass vai PostCSS optimizētāji noņem atstarpes un komentārus, saīsina krāsu vērtības, apvieno vienādas kārtulas un izlaiž pēdējo semikolu katrā blokā. Palīgklašu ietvari rada vēl blīvāku rezultātu: kompilētā Tailwind stila lapā var būt tūkstošiem sīku kārtulu, starp kurām gandrīz nekā nav.
Kaskāde atkal ir pārskatāma
Galvenais iemesls stila lapas formatēšanai ir saprast, kāpēc kāda kārtula darbojas vai nedarbojas. Kad katram selektoram ir sava rinda un deklarācijas ar atkāpēm, var izsekot kaskādei: atrast visas elementam piemērotās kārtulas, salīdzināt specifiskumu, apskatīt to secību un pamanīt nejaušu important, kas pārraksta jūsu darbu. Mediju vaicājumi un to saturs atkal kļūst par redzamiem blokiem. Pielāgošanos ekrāna izmēram tad ir daudz vieglāk saprast nekā saspiestā failā.
Atbalstīts arī mūsdienu CSS
Formatētājs saprot mūsdienu CSS: pielāgotos rekvizītus, calc un clamp izteiksmes, grid un flexbox saīsinājumus, konteineru vaicājumus, ligzdotas kārtulas, layers, supports blokus un keyframes. Garus selektoru sarakstus sadala vairākās rindās, lai tos varētu izlasīt. Būvēšanā saglabājušies komentāri netiek dzēsti. Ja failā sajaukti standarta rekvizīti un rekvizīti ar pārlūku prefiksiem, abi saglabājas savās vietās, tikai kļūst skaidri izkārtoti.
Praktisks padoms kompilētiem ietvariem
Formatējot kompilētu Tailwind vai Bootstrap stila lapu, rezultāts ātri kļūst ļoti garš. Vairāki desmiti tūkstošu rindu ir parasta parādība. Ieslēdziet rindu numurus un meklējiet vajadzīgo klasi vai rekvizītu ar pārlūka meklēšanu, nevis ritiniet visu failu. Ja mērķis ir samazināt faila izmēru, izmaiņas jāveic būvēšanas konfigurācijā: neizmantotās kārtulas tika ģenerētas vēl pirms minificēšanas, un formatēšana tās neizņems.
Biežāk uzdotie jautājumi
Vai var formatēt kompilētu Tailwind stila lapu?
Jā, tas ir viens no biežākajiem šīs lapas lietojumiem. Rezultāts būs ļoti garš, jo ietvars ģenerē kārtulu katrai palīgklasei. Praktiskai pārvietošanai ieslēdziet rindu numurus un izmantojiet pārlūka meklēšanu.
Vai tiks atjaunoti komentāri?
Tikai tie, kuri failā vēl ir. Vairums minificētāju dzēš visus komentārus, izņemot juridiskos paziņojumus. Dzēsto atgūt nevar. Formatētājs saglabā atlikušos komentārus un pārskatāmi tos izkārto.
Vai rīks darbojas ar SCSS vai Less?
Šī lapa paredzēta standarta CSS, ko pārlūks patiešām saņem. Priekšprocesoru avoti ar mainīgajiem, mixin konstrukcijām un īpašu SCSS vai Less sintaksi nav paredzētā ievade, lai gan standarta ligzdots CSS tiek atbalstīts.