Yadda kyautatawa CSS ke aiki
Mai kyautatawa yana karanta laha na salon ka harufi ta harufi, yana bin zuriyar kowane bloku, kuma yana sake fitar da shi tare da sararin daidaitacce. Ba ya canza abin da salo ke yi — kawai yadda suke kama a cikin fayilin.
- Raba Alamu. Ɗakin karatu yana dubewa shigarwar ka zuwa jerin alamu: zaɓuɓɓuka, sunaye na ƙaddarori, ƙimomi, at-rules, bayanai, da madauri, kashe-kashe, da abin rarrabawa da ke rarrabawa da su. Kirtani da ƙimomi na url() ana saninsu a matsayin naɗoɗe ɗaya, don haka madauri a cikin ƙaddarar content ba za a ɗaukarta a matsayin mai raba bloku ba.
- Bi Zuriyar. Yayin da yake tafiya a cikin jerin alamu, mai kyautatawa yana kiyaye matakin shigarwa na yanzu. Kowane madauri na buɗewa yana tura matakin zuwa zuriyar — ko dai ya kasance bloku na ƙa'ida, tambayar media, ko bloku na keyframes — kuma kowane rufe na dawowa yana komawa. Wannan zuriya tana yanke shawara kan adadin naɗoɗe na shigarwa da ke a gaban kowane layi na fitarwa.
- Aiwatar da Zaɓuɓɓukan Ka. Zaɓin shigarwar ka (sarari 2, sarari 4, ko tab) yana ƙayyade fadin matakin ɗaya. Saiwar salon madauri tana yanke shawara ko madauri na buɗewa ya riƙe tare da zaɓin da ya gabata ko ya sauka zuwa layin kansa. Sauran maɓallunan suna ƙara layi fanko tsakanin bloku na ƙa'idoji da raba zaɓuɓɓuka masu ƙungiya zuwa layuka daban-daban.
- Fitar. A ƙarshe mai tsara yana buga alamu da shigarwa da karye-karye na layi da ya sarrafa, yana sanya sanarwa ɗaya a kowace layi da sarari ɗaya bayan kowane kashe-kashe. Sakamakon shine laha ta salon iri ɗaya, wanda aka tsara don ɗan adam ya iya bincika kasikedi.
Dalilin kyautatawa CSS
- Karanta laha na salon da aka rage. CSS na samarwa ana jifarsa a layi ɗaya ba tare da sarari tsakanin ƙa'idoji ba. Kyautatawa yana maido da karye-karyen layi da shigarwa don ku iya nemo zaɓin a bayan kuskuren tsari ku ga hasa da waɗanne bayyanawa yake ƙayyade, har ma ba tare da taswira ta tushe ba.
- Tsara fayiloli mara daidaito. Laha na salon da mutane da yawa suka taɓa tana driftawa zuwa shigarwa ta gauraye da salo na madauri daban-daban. Wucewar sau ɗaya ta cikin mai kyautatawa yana daidaita fayilin gaba ɗaya zuwa tsari ɗaya, wanda yana sa bambancin da ya biyo bayan nuna canje-canje na kasikedi na gaskiya maimakon ƙazamar sarari.
- Wannan kayan aiki baya ɗaukar nauyin shafin ka. Yawancin masu kyautatawa na intanet suna loda ɗakin karatu gaba ɗaya lokacin da ka buɗe shafin. Wannan yana loda js-beautify a hankali kawai lokacin da ka danna Kyautatawa ko ka kunna yanayin live, don haka buɗe shafin yana ɗaukar kilobytes kaɗan maimakon ɗaruruwan, kuma farkon samarwa yana kasancewa da sauri.
- Babu abin da ke barin burauzarku. Mai kyautatawa yana gudu gaba ɗaya a kan na'urar ka. CSS ɗinka ba ta taɓa loda zuwa sabar ba, wanda yana da mahimmanci lokacin da laha na salon da kake duba ta mallakin abokin cinikin, yana ƙunshe da sunayen aji na cikin gida, ko ya faɗa ƙarƙashin yarjejeniyar sirri.
Ayyuka na gari
Kyautatawa CSS yana faruwa a duk lokacin da wani ya buƙaci karanta laha na salon da ba a rubuta ta don karantawa.
- Gyara kurakurai na samarwa: liƙa laha na salon da aka ragewa wanda aka jawo daga kichupon Yanar Gizo don nemo ƙa'idar da ke ninkewa tsarin da ka yi tsammani.
- Shirye-shiryen bitar lambar: sake tsara fayilin mai ba da gudummawa da shigarwa mara daidaito kafin buɗe buƙatun jawo don masu bita su ga canje-canje na kasikedi, ba juyin tsari ba.
- Koyo da nazari: buɗe laha na salon na tsarin ko ɗakin karatu na kayan don nazarin yadda zaɓuɓɓukansa, tambayoyin media, da ƙaddarori na musamman suka tsaru.
Misali da aka yi aiki
Ɗauki layi ɗaya da aka ragewa: a{color:red;margin:0}b{padding:0}. Liƙa shi a sama tare da shigarwa da aka ƙayyade zuwa sarari 2 da salon madauri Ninka, sannan danna Kyautatawa. Ka samu blokuna masu karantawa: a { a layin kansa, bayyanawa na color: red; da margin: 0; da aka saka matakin ɗaya zuriya, madauri na rufe da ke layi ƙarƙashin zaɓin, da ƙa'idar b tana biyo baya. Canja salon madauri zuwa Buɗe kuma kowane madauri na buɗewa zai sauka zuwa layin kansa. Canza shigarwa zuwa Tab kuma kowane matakin zai koma daga sarari biyu zuwa harafin tab. Salo iri ɗaya ne; tsari kawai yana canzawa.
FAQ
Shin wannan yana gudana a cikin burauzarki?
Eh. Ɗakin karatu na js-beautify yana loda a hankali a karo na farko da ka danna Kyautatawa ko ka kunna yanayin live, kuma ana adana shi a cikin cache. CSS ɗinka ba ta taɓa barin shafin ba — babu tafiya zuwa sabar kuma babu loda.
Kyautatawa iri ɗaya ne da un-minify?
Yana maido da tsarin da ake iya karantawa — shigarwa, karye-karye na layi, da sarari — amma ba zai iya dawo da sharhi da rage ya cire ba ko maido da tsari da ba ya nan a fayilin. Yana sake tsara bayyanawa da zaɓuɓɓuka kawai waɗanda ke akwai.
Shin kyautatawa zai canza yadda salon ta ke nuna?
A'a. Kyautatawa yana ƙara da cire sarari da karye-karye na layi kawai; kasikedi ba ta taɓa kuma shafi yana nuna iri ɗaya. Tsarin ƙaddarori, takamaiman, da ƙimomi duk sun kasance hasa kamar yadda ka rubuta su.
Menene zaɓuɓɓukan salon madauri ke nufi?
Ninka yana riƙe madauri na buɗewa a layi ɗaya da zaɓin (a {), wanda shine al'adar CSS ta yau da kullum. Buɗe yana faɗɗa kowane madauri na buɗewa zuwa layin kansa ƙarƙashin zaɓin. Maɓallunan layi-fanko da zaɓi-ɗaya-a-layi suna sarrafa gibin tsakanin ƙa'idoji da yadda zaɓuɓɓuka masu ƙungiya kamar h1, h2, h3 ake shimfiɗa su.
Kyautatawa CSS a gefen burauzar yana ba ka laha na salon da za a iya karantawa ba tare da mataki na gini ko loda ba. Liƙa faili da aka ragewa ko mara tsari, zaɓi shigarwa da salon madauri, sannan kwafi ko sauke sakamakon. Babu abin da ke barin na'urar ka, babu asusun, kuma ɗakin karatu yana loda kawai lokacin da ka roƙa shi — don haka buɗe wannan shafi yana ɗaukar kilobytes kaɗan, ba megabyte ba.