10 Pinakamahusay na Mga Kasangkapan para sa Pag-format at Pag-optimize ng Mga File ng CSS

Ang pag-format at pag-optimize ng mga file ng CSS ay hindi na isang sakit ng ulo para sa mga web developer sa tulong ng mga tool na piniling kamay na ito!


Mula nang ito ay umpisahan, ang mga estilo ng cascading style (CSS) ay malawakang ginagamit upang balangkasin ang mga visual ng mga web page. Kasama nila ang kahulugan ng mga kulay, layout, animation, at mga font. Ang pagiging independiyenteng ng HTML, pinapayagan ka ng CSS na madali mong maiakma ang isang pagtatanghal ng web page sa iba’t ibang uri ng mga aparato na may iba’t ibang laki ng screen nang hindi kinakailangang baguhin ang kaunting nilalaman ng pahina.

Ang CSS ay tinawag na style ng cascading dahil sa paraan na inilalapat ang mga halaga ng ari-arian sa hierarchy ng nilalaman. Ang mga elemento ng bata ay maaaring magmana o mag-override ng mga halaga ng pag-aari mula sa kanilang mga elemento ng magulang. Ang mga kakayahan na ito ay ibinibigay sa pamamagitan ng isang modelo batay sa isang hierarchical saklaw ng epekto. Ang problema sa modelong ito ay, kung hindi ito ginamit nang tama, maaari itong malubhang makaapekto sa pagganap ng isang website.

At walang sinuman ang may gusto sa isang tamad na website. Iyon ang dahilan kung bakit kailangan ang pag-optimize ng CSS, kasama ang isang bagong lahi ng mga tool na malinaw na idinisenyo upang gawing maayos at mabilis ang mga file ng CSS.

Ang pag-optimize ng CSS ay maaaring gawin sa maraming paraan: Ang mga file ng CSS ay maaaring mabawasan ang laki, maaaring malinis, maaaring masuri o napatunayan para sa kawastuhan, maaaring ma-tidue, maaaring mai-format upang maunawaan ang code at, sa pangkalahatan, mas mahusay, maaaring maging nakatutok upang payagan ang para sa mas mahusay na karanasan ng gumagamit. Gumawa kami ng isang pagpipilian ng pinakamahusay na mga tool para sa bawat isa sa mga gawaing ito.

# CSS Tuning Tools

CSS Minify

CSS Minify ay isang simpleng tool upang gawin ang CSS minifying: ang proseso ng pagkuha ng maganda, nababasa, maayos na nabuo na CSS at tinanggal ang lahat ng spacing, indentation, newlines, at mga puna. Ang nagreresultang minified CSS ay maaaring matagumpay na magamit nang walang mga elementong ito. Gayundin, ginagawang mas mahirap basahin ang CSS, nakapanghihina ng loob ang mga kawatan ng code ng pagnanakaw ng iyong mga hard-worksheet.

Kung minamaliin mo ang iyong code, mabuting payo na panatilihin ang isang pinaganda (di-minified) na bersyon nito, dahil kakailanganin mong basahin ito sa hinaharap, kung sakaling kailangan mong gumawa ng mga pagbabago sa ito.

Topcoat

Topcoat ay hindi isang tool upang ma-optimize ang iyong CSS. Sa halip, ito ay isang bukas na mapagkukunan ng CSS library na idinisenyo nang mabilis sa isip. Ito ay isang inapo ng wika ng disenyo ng Adobe na binuo para sa mga Brackets, Edge Reflow.

Kasama sa Topcoat ang PSD at maraming iba pang mga artifact ng disenyo, kasama ang isang koleksyon ng mga simple at malinis na mga icon ng SVG at mga gabay sa estilo. Nag-aalok din ito ng mga tool sa benchmarking at ang magarbong Adobe Source Sans Pro font na pamilya.

Code ng Paghahanap

Code ng Paghahanap ay batay sa CSS Tidy, ang tanyag na open-source CSS parser at optimizer. Hinahayaan ka nitong i-paste ang CSS code upang maproseso sa isang lugar ng teksto, o kunin ito mula sa isang URL. Matapos gawin ang trabaho nito, ipinakita nito ang na-optimize na code, kasama ang isang listahan ng mga pagbabagong nagawa. Maaari mong kopyahin ang binagong code sa clipboard o i-save ito sa isang file para magamit sa ibang pagkakataon.

Nag-aalok ang tool ng isang makabuluhan at komprehensibong listahan ng mga pagpipilian na nagbibigay-daan sa iyo upang ayusin ang mga resulta nito upang matugunan ang iyong mga kagustuhan. Halimbawa, nagbibigay ito ng limang mga pagpipilian para sa compression, mula sa mababang compression hanggang sa pinakamataas na compression. Iba pang mga pagpipilian hayaan mong tukuyin ang pag-uuri, iba pang mga uri ng compression, pagtanggal ng mga hindi kinakailangang item, sa pagitan ng iba pa.

CSS Nano

Ang isa pang tool ng CSS minifier ay CSS Nano. Ang isang ito ay batay sa isang tool na nilikha upang ibahin ang anyo ng mga estilo kasama ang JavaScript, na tinatawag na PostCSS. Salamat sa arkitektura ng plugin ng tool na ito, ang mga tagalikha ng CSS Nano ay nakapagtayo nito mula sa maliit na mga module na may mga pinigilan na pag-andar..

Bilang default, kukunin ng CSS Nano ang CSS file na ibinibigay mo upang maproseso at gawin lamang ang mga ligtas na pag-optimize dito. Ngunit nag-aalok din ang tool ng mga pagpipilian upang itulak ang compression sa mga limitasyon. Ang mga gumagana ng CSS ay magiging pareho, ngunit ang hindi kinakailangang whitespace ay aalisin. Gayundin, ang mga pagkakakilanlan nito ay mai-compress, at ang mga hindi kinakailangang kahulugan nito ay ganap na malinis.

# Mga tool sa Paglilinis ng CSS

Marumi Markup

Marumi Markup ay tiyak na kabaligtaran ng mga minifier: kukuha ito ng anumang code na pinapakain mo at nililinis ito, ginagawang madali itong basahin – basta ito ay may bisa na CSS code. Ang nagresultang code ay perpektong pinapaganda.

Sinabi ng mga tagalikha ng Dirty Markup na halos isang bilyong linya ng code (isinasaalang-alang hindi lamang ang CSS ngunit din ang HTML at JavaScript) ay pinapaganda gamit ang kanilang tool.

Mga Pumili ng Dust-Me

Mga Pumili ng Dust-Me ay nilikha upang i-scan ang isang website at makahanap ng mga hindi nagamit na CSS selectors upang maalis ang mga ito at mabawasan ang laki ng iyong code. Gumagana ito bilang isang add-on para sa Firefox at Opera.

Ang Mga Pumipili ng Dust-Me ay maaaring gumana sa isang indibidwal na pahina o mag-crawl ng isang buong sitemap, na ipinapakita sa iyo ang mga detalye ng lahat ng mga styleheet at mga piling pinili, naisaayos ang mga ito sa ginamit at hindi ginagamit. Ang bersyon ng Firefox ay may kakayahang awtomatikong mai-scan ang mga pahina habang nagba-browse ka. Dapat mo lamang isaalang-alang na, kapag ginagawa ito, ang mga kaganapan sa mutation ay maaaring mag-trigger ng karagdagang mga pag-scan kung nagbago ang pahina.

CSS Lint

CSS Lint nag-aalok ng isang minimalistic interface: isang malaking textbox kung saan mo i-paste ang iyong CSS code upang ito ay “linted”. Hindi nito sinabi kung ano ang gagawin sa proseso ng linting sa iyong code, ngunit ang isang babalang mensahe sa tuktok ng pahina ay nagsasabi sa iyo na ang mga resulta ay makakasakit sa iyong damdamin – at makakatulong din sa iyo na mas mahusay ang code.

Pinatunayan ng CSS Lint ang syntax ng iyong code laban sa isang hanay ng mga paunang natukoy na mga patakaran. Sa pamamagitan nito, nakita nito ang mga potensyal na kawalan ng kakayahan at mga pagkakamali. Sa kaunting pagpapasadya, binibigyan ka ng CSS Lint ng posibilidad na piliin ang hanay ng mga patakaran na nais mong ipatupad.

# Mga Tool sa Pagsubok / Pag-verify ng CSS

CSS Stress Test

CSS Stress Test gumagana bilang isang bookmarklet (isang maliit na piraso ng code ng JavaScript) na nalalapat ang pagsubok sa stress sa CSS ng anumang naibigay na webpage. Ang tool ay nai-index ang lahat ng mga elemento sa CSS code at ang kanilang mga klase. Pagkatapos ay nagsisimula ang pagsubok sa stress sa pamamagitan ng pag-alis ng mga klase nang paisa-isa at tiyempo kung gaano katagal ang mag-scroll sa pahina.

Kung ang oras na kinakailangan ng pahina upang mag-scroll ay binabawasan nang malaki kapag nag-aalis ng isang pumipili, kung gayon ang pumipili ay kumakatawan sa isang may problemang lugar na dapat alisin o maiwasto. Gumagana ang tool na ito lalo na sa magarbong code ng CSS3 na nagbibigay-daan para sa mga bilugan na sulok, kalapasan, mga anino ng teksto, at mga anino ng kahon. Ang lahat ng mga epektong ito ay maaaring gawin sa CSS3 nang hindi gumagamit ng slicing ng imahe, mga espesyal na script, o pagdaragdag ng mga karagdagang elemento.

Ngunit ang CSS3 ay maaaring maging sanhi ng mga problema: ang isang solong pag-aari ay maaaring magresulta sa mga nakikitang redraws at mga isyu sa pag-scroll sa pahina. Iyon ay kung saan maaaring makamit ang CSS Stress Test.

Serbisyo ng Pag-verify ng CSS

Serbisyo ng Pag-verify ng CSS nagpapatunay ng mga estilo ng cascading at (X) HTML na may mga stylesheets. Sinusuri ng tool ang mga katangian na tinukoy sa lahat ng mga bersyon ng CSS. Upang mapatunayan ang isang pahina o isang CSS file, kailangan mo lamang ipasok ang URI (pantay na pantukoy ng mapagkukunan) at itakda ang ilang mga pangunahing pagpipilian, tulad ng profile (uri ng CSS upang suriin), target na aparato, mga babala upang ipakita at kung ano ang gagawin sa mga extension ng vendor Mga kaugnay na isyu (magpakita ng mga error o babala).

Kapag naayos na ang lahat, pindutin mo ang pindutan ng Suriin at maghintay para sa mga resulta. Ang huling ulat ay magpapakita sa iyo ng isang kumpletong listahan ng mga error at babala, kung saan makikita mo ang mga hindi wastong mga katangian, mga error sa syntax, hindi kilalang mga extension ng vendor, sa pagitan ng maraming iba pang mga isyu na dapat mong iwasto sa iyong CSS upang mai-tune ito. Ang ulat ay magpapakita rin sa iyo ng lahat ng wastong CSS code sa iyong pahina.

BackstopJS 3

BackstopJS 3 automates ang pagsubok ng regression ng visual na mga interface ng gumagamit ng web. Ginagawa nito ang trabaho sa pamamagitan ng paghahambing ng isang serye ng mga screenshot ng DOM. Nag-aalok ito ng isang kapana-panabik na listahan ng mga tampok: mayroong in-browser na pag-uulat, setting din ng layout para sa pag-print at screen, at ilang iba pang mga tukoy na tampok, tulad ng pagpapakita ng pagsala at sanggunian / pagsubok / visual diff inspector.

Gamit ang mga script ng Puppeteer at ChromyJS, ang BackstopJS 3 ay maaaring gayahin ang mga pakikipag-ugnayan ng gumagamit, at nagagawa nitong mag-render ng mga pagsubok sa mga Walang Head ng Chrome. Upang maalis ang mga problema sa pag-render ng cross-platform, isinama rin nito ang pag-render ng docker. Ang tool ay maaaring tumakbo sa buong mundo o lokal bilang isang nakabukas na pakete, at maganda ang paglalaro nito sa CI at kontrol ng mapagkukunan. Ang BackstopJS 3 ay napakadaling gamitin: na may tatlong mga utos lamang, maaari kang pumunta nang mahabang paraan.

Konklusyon

Inaasahan ko na ang mga tool sa CSS sa itaas ay makakatulong sa iyo upang ma-optimize ang mga file ng CSS ng iyong web application para sa mas mahusay na pagganap. Kung interesado kang malaman ang advanced CSS, pagkatapos ay suriin ito napakahusay na kurso.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map