CSS:n muotoilu verkossa
Tuo tiivistetty tyylitiedosto ja lue sitä taas vaivatta. Valitsimet ja määritykset asettuvat omille riveilleen, lohkot ja mediakyselyt sisennetään kuten käsin kirjoittaessa.
Miksi tuotannon CSS on yksi pitkä rivi?
Tuotannon tyylitiedostot minimoidaan usein selaimelle lähetettävän tekstimäärän pienentämiseksi. Koontityökalut voivat poistaa välejä ja kommentteja, lyhentää arvoja tai yhdistää yhteensopivia sääntöjä. Tulos riippuu optimointityökalusta ja sen asetuksista, eikä tiettyä koon pienentymistä tai sivun nopeampaa latautumista voida taata. Koottu apuohjelmatyylitiedosto voi sisältää lukuisia pieniä sääntöjä, mikä tekee tiivistetystä tiedostosta vaikean silmäillä. Muotoilu antaa säännöille yhtenäisen, luettavan asettelun, mutta ei palauta niiden taustalla olevia lähdekomponentteja, esikäsittelijän tiedostoja tai koontiasetuksia.
Kaskadin lukeminen helpottuu
Tyylitiedoston muotoilun tärkein syy on ymmärtää, miksi jokin sääntö vaikuttaa tai ei vaikuta. Kun jokainen valitsin on omalla rivillään ja sen määritykset sisennettyinä alla, kaskadia voi seurata kunnolla: etsi kaikki elementtiin kohdistuvat säännöt, vertaa niiden tarkkuutta, katso mikä tulee viimeisenä ja löydä työtäsi ohittava important-määritys. Mediakyselyt sisältöineen näkyvät lohkoina, joten mukautuvan asettelun toimintaa on helpompi jäljittää kuin tiivistetystä tiedostosta. Kopioi rajattua tutkimusta varten kokonainen sääntö ja sitä ympäröivä olennainen mediakysely ennen muutoksia. Näkyvä tyylitiedosto selittää vain osan kaskadista: myös elementtikohtaiset tyylit, muut tyylitiedostot, periytyminen ja nykyinen DOM vaikuttavat. Selaimen kehittäjätyökalut näyttävät, mitkä määritykset todella koskevat elementtiä. Käytä muotoiltua tiedostoa määritysten asiayhteyden ymmärtämiseen ja varmista toiminta tutkittavassa näkymäkoossa. Jos automaattinen tunnistus tulkitsee CSS:n JavaScriptiksi, tarkista näytetty kieli ennen tulokseen luottamista.
Nykyaikainen CSS on tuettu
Muotoilija ymmärtää nykyistä CSS:ää eikä vain vanhaa osajoukkoa. Se osaa muotoilla muun muassa mukautetut ominaisuudet, calc- ja clamp-lausekkeet, grid- ja flexbox-lyhennysmääritykset, säiliökyselyt, sisäkkäiset säännöt, kerrokset, supports-lohkot ja keyframes-animaatiot. Pitkät valitsinluettelot jaetaan riveille luettavuuden parantamiseksi, ja koonnissa säilyneet kommentit pidetään mukana. Jos tiedostossa on tavallisen CSS:n lisäksi selainvalmistajakohtaisia etuliitteitä, määritykset säilyvät muotoilijan tyyliä sovellettaessa.
Käytännön vinkki koottujen kehysten lukemiseen
Kootun Tailwind- tai Bootstrap-tyylitiedoston muotoiltu versio kasvaa nopeasti pitkäksi. Kymmenettuhannet rivit ovat tavallisia. Ota rivinumerot käyttöön ja etsi kiinnostava luokan nimi tai ominaisuus selaimen hakutoiminnolla selaamisen sijaan. Jos haluat lukemisen sijaan pienentää tiedostoa, olennainen työ tehdään koontiasetuksissa: käyttämättömät säännöt on tuotettu jo ennen minimointia.
Usein kysytyt kysymykset
Voinko muotoilla kootun Tailwind-tyylitiedoston?
Kyllä, se on yksi tämän sivun yleisimmistä käyttötavoista. Tuloksesta tulee hyvin pitkä, koska kehys tuottaa oman säännön jokaiselle apuohjelmaluokalle. Rivinumerot ja selaimen hakutoiminto ovat käytännöllisin tapa liikkua tiedostossa.
Palautuvatko kommentit?
Annetussa CSS:ssä jäljellä olevat kommentit voivat näkyä muotoillussa tuloksessa. Minimointityökalun poistamia kommentteja ei voi palauttaa tiedostosta, ei myöskään selityksiä säännön tarkoituksesta. Katso alkuperäisestä koodivarastosta suunnittelumuistiinpanot, tekijän ohjeet ja valitsimen muutoshistoria.
Toimiiko tämä SCSS:n tai Lessin kanssa?
Tämä sivu on tarkoitettu tavalliselle CSS:lle, myös Sassista tai Lessistä kootulle tulokselle. Esikäsittelijöiden omat muuttujat, sekoitteet ja direktiivit eivät ole tuettua syötettä. Käännä lähdetiedostot ensin projektin asianmukaisilla työkaluilla ja tutki syntynyttä tyylitiedostoa sitten tässä editorissa.