CSS kodo išskleidimas internete
Įkelkite sutankintą stilių lentelę ir vėl patogiai ją skaitykite. Kiekvienas selektorius bei deklaracija turi savo eilutę, o blokai ir medijos užklausos gauna įtraukas taip, kaip rašytumėte ranka.
Kodėl svetainės CSS telpa vienoje eilutėje
Stilių lentelės sutankinamos dėl tos pačios priežasties kaip scenarijai. CSS stabdo puslapio atvaizdavimą, todėl kiekvienas sutaupytas baitas tiesiogiai prisideda prie rodymo greičio. cssnano, Lightning CSS bei Sass ir PostCSS optimizavimo priemonės pašalina tarpus bei komentarus, sutrumpina spalvų reikšmes, sujungia pasikartojančias taisykles ir pašalina paskutinį bloko kabliataškį. Pagalbinių klasių sistemos rezultatą dar sutankina: parengtoje Tailwind lentelėje gali būti tūkstančiai mažų taisyklių beveik be jokių tarpų.
Kaip suprasti kaskadą
Pagrindinė priežastis formatuoti stilių lentelę yra noras suprasti, kodėl taisyklė taikoma arba ignoruojama. Kai kiekvienas selektorius turi savo eilutę, o deklaracijos po juo pateiktos su įtraukomis, galima nuosekliai sekti kaskadą: surasti visas elementui taikomas taisykles, palyginti jų specifiškumą, pamatyti paskutinę ir aptikti pasimetusį important, kuris nustelbia jūsų pakeitimus. Medijos užklausos ir jų turinys vėl tampa aiškiais blokais, todėl prisitaikantį išdėstymą suprasti lengviau nei sutankintame faile.
Palaikomas šiuolaikinis CSS
Formatuoklis supranta dabartinį CSS. Pasirinktinės savybės, calc ir clamp išraiškos, grid ir flexbox trumpiniai, konteinerių užklausos, įdėtinės taisyklės, layers, supports blokai bei keyframes formatuojami tinkamai. Ilgi selektorių sąrašai išskaidomi į kelias eilutes, kad juos būtų patogu skaityti, o parengimo metu išlikę komentarai išsaugomi. Jei faile kartu naudojamas standartinis CSS ir savybės su gamintojų priešdėliais, abu variantai paliekami, tik pateikiami aiškiau.
Praktinis patarimas parengtoms stilių sistemoms
Suformatuota Tailwind ar Bootstrap stilių lentelė greitai tampa labai ilga. Kelios dešimtys tūkstančių eilučių yra normalus rezultatas. Įjunkite eilučių numerius ir, užuot slinkę visą failą, naršyklės paieška raskite reikalingą klasę ar savybę. Jei norite sumažinti failą, o ne jį perskaityti, keisti reikia projekto parengimo konfigūraciją. Nenaudojamos taisyklės buvo sugeneruotos dar prieš sutankinimo etapą, todėl vien formatavimas jų nepašalins.
Dažniausiai užduodami klausimai
Ar galima išskleisti parengtą Tailwind stilių lentelę?
Taip, tai vienas dažniausių šio puslapio naudojimo būdų. Rezultatas bus labai ilgas, nes sistema sukuria po taisyklę kiekvienai pagalbinei klasei. Patogiausia įjungti eilučių numerius ir naudotis naršyklės paieška.
Ar atkuriami komentarai?
Išsaugomi tik tie, kurie liko faile. Dauguma sutankinimo įrankių pašalina visus komentarus, išskyrus teisinius pranešimus, o pašalintų atkurti neįmanoma. Formatuoklis tvarkingai pateikia dar išlikusį turinį.
Ar palaikomi SCSS ir Less?
Šis puslapis skirtas standartiniam CSS, kurį iš tikrųjų atsisiunčia naršyklė. Pirminiai preprocesorių failai su kintamaisiais, mixins ir savita SCSS ar Less sintakse nėra numatyta įvestis, nors standartinės įdėtinės CSS taisyklės palaikomos.