Nangungunang 5 Mga tool sa CSS para sa mga Web Developers at Designer

Malayo ang dumating sa CSS, ngunit ang tooling sa paligid nito ay hindi hanggang ngayon.


Kung sa tingin mo na ang pagsulat ng CSS ay tulad ng pakikipaglaban sa mga monsters sa isang hukay, hindi ka nag-iisa. Habang ang CSS ay isa sa mga pangunahing pangunahing teknolohiya na nagbibigay kapangyarihan sa Web, hindi ito tamang wika ng programming o balangkas bawat se. Bilang isang resulta, sa lalong madaling panahon na magsimula ang iyong proyekto na lumago nang mas kilalang, ganoon din ang gulo – ang mga alituntunin ng pumipili ay tila nasa buong lugar, at mahirap hanapin kung nasaan; habang isinasama mo ang mga font, panlabas na CSS, JS, at iba pang mga pag-aari sa iyong mga pahina, ang pangwakas na sukat ng bundle ay tila lumalaki mula sa kamay, at nagtataka ka kung saan nawala ang mga ideals ng mabilis, madaling gamitin na harap-dulo.

Ngunit hindi ito dapat maging katulad nito. Ngayon ang tooling sa paligid ng CSS ay umunlad sa isang antas na ang daloy ng trabaho ay hindi lamang maaaring tamed ngunit ginawang kasiya-siya din. Sa artikulong ito, tatalakayin ko ang tungkol sa limang tulad ng mga tool na CSS na natagpuan ko ang napakahalagang halaga sa aking trabaho. Sinadya kong iwasan, kasama ang mga kasangkapan na “laruan” tulad ng mga generator ng CSS, mga tagalikha ng menu, atbp, dahil lumilikha sila ng mas maraming problema kaysa malutas nila.

Paparating na ang tren ng CSS! Umalis na tayo! �� ��

PostCSS

Kung mahal mo ang JavaScript, gusto mo ang ideya na maaari naming idagdag at kontrolin ang CSS sa pamamagitan ng JavaScript. At iyon mismo ang kakayahan na PostCSS nagbibigay.

Gayunpaman, hindi lamang ang asukal sa syntax na nakabase sa JavaScript sa CSS. Ang PostCSS ay nakabalot ng maraming malakas na mga pakete / tampok na magkasama, na nagreresulta sa isang mas kaaya-aya at mas madaling daloy ng trabaho kapag nakikipag-usap sa CSS. Halimbawa:

  • Awtomatikong idaragdag ang prefix ng Vendor batay sa kung aling mga pag-aari na ginagamit mo.
  • Ang kakayahang makita kung aling mga tampok ng CSS ang maaaring magamit sa kasalukuyang browser.
  • Gamit ang paparating, pa-to-be-release, ngunit napakalakas na pag-update ng syntax sa CSS.
  • Ang isang tumutugon grid na ay bilang kakayahang umangkop bilang makakakuha ito.

Sa palagay ko hindi ako gagawa ng hustisya sa PostCSS kung hindi ko kasama ang halimbawang grid. Kaya pumunta kami dito. Isang bagay na kasing simple ng:

div {
nawalang haligi: 1/3
}

makakakuha ng convert sa isang buong blown CSS system na may halos lahat ng mga kaso sa gilid na inaalagaan:

div {
lapad: calc (99.9% * 1/3 –
(30px – 30px * 1/3));
}
div: nth-anak (1n) {
lumutang pakaliwa;
margin-kanan: 30px;
malinaw: wala;
}
div: huling-anak {
margin-kanan: 0;
}
div: nth-anak (3n) {
margin-kanan: 0;
lumutang: tama;
}
div: nth-anak (3n + 1) {
malinaw: pareho;
}

Dahil ito ay isang bagay na hinihimok ng JS, ang PostCSS ay hindi madaling maitaguyod, lalo na kung ikaw ay isang taga-disenyo at wala kang gaanong kinalaman sa mga module, bundler, at ang npm mundo sa pangkalahatan. Sinabi nito, ang potensyal para sa PostCSS sa iyong trabaho ay napakalaking at hindi dapat papansinin.

PurgeCSS

Gustung-gusto mo ba ang modernong frontend na nakabase sa balangkas na batay sa daloy ng trabaho ngunit nabigo ang mga pagdadala ng sobrang bagahe sa paligid? Kung oo, ang PurgeCSS ay iyong kaibigan, kahit na sa CSS ay isinasaalang-alang.

Para sa mga hindi maaaring malaman kung ano ang malaking deal: narito ang isang mabilis na rundown. Kapag nagtatayo ka ng mga solong pahina ng application gamit ang mga front-end na mga frameworks tulad ng React, Angular, Vue, atbp, dumaan ka sa tinatawag na “proseso ng pagbuo.” Mahalaga, na code mo ang lahat ng iyong CSS, JS, SASS, atbp., Sa magkahiwalay na mga file (pag-aayos ng mga ito tulad ng nakita mong pinaka madaling maunawaan), ngunit sa sandaling tapos ka na, sasabihin mo sa bundler na “itayo” ang bagay. Ano ang binabasa nito ang lahat ng source code na iyong isinulat, mag-apply ng iba’t ibang mga filter dito (minification, obfuscation / uglification, atbp.), At iwaksi ang output sa iisang file, karaniwang “app.js” para sa lahat ng JavaScript, at “App.css” para sa lahat ng CSS. Ang mga file na ito, kasama ang isang payat na “index.html,” ay ang kailangan mo upang patakbuhin ang harap-dulo ng application. Ang downside ay dahil ang lahat ay nakasama sa mga panghuling file, ang kanilang sukat ay madalas na lumalampas sa kung ano ang pinapayagan para sa mabilis na oras ng pagtugon; halimbawa, hindi bihirang makita ang isang “app.js” na higit sa 500 KB!

Ang PurgeCSS ay makakakuha ng idinagdag bilang bahagi ng iyong pag-agos ng daloy ng trabaho at pinipigilan ang hindi nagamit na CSS na mai-bundle sa panghuling output. Ang isang karaniwang kaso ng paggamit ay ang Bootstrap: ito ay isang medium-sized na library na may maraming mga klase sa UI para sa iba’t ibang mga sangkap. Kung gumagamit ang iyong aplikasyon, sabihin, 10% ng mga klase ng Bootstrap, ang natitira 90% ay lamang ang namamatay sa iyong pangwakas na file ng CSS. Ngunit salamat sa PurgeCSS, ang mga hindi nagamit na mga file ng CSS ay maaaring makilala at mapigilan mula sa proseso ng pagtatayo, na nagreresulta sa mas maliit na pangwakas na mga file na CSS (5-6 beses na pagbawas ng laki ay medyo normal).

Kaya, sige, “linisin” ang hindi kinakailangang CSS PurgeCSS! ��

Tailwind

Tailwind ay isang balangkas ng CSS, ngunit napupunta ito laban sa butil na naisip kong isama ko rito sa mga tool ng CSS. Kung kinamumuhian mo ang inline ng CSS (na hindi?!), Malamang na magdulot ka ng pagkahilig sa buntis sa unang pagkakataon na nakatagpo ka nito. Hayaan ang isang unang lasa sa pamamagitan ng pagtingin sa kung paano mo mai-code ang isang tipikal na form gamit ang Tailwind CSS:

Username

Password

Mangyaring pumili ng isang password.

Mag-sign In


Nakalimutan ang password?

© 2019 Acme Corp. Lahat ng karapatan ay nakalaan.

“Ito ba ay isang biro o ano ?! Ano ang lahat ng nakakainis na maliit na klase? Sa mas malapit na pag-iinspeksyon, bakit ang impiyerno ay inilalagay ko ang mga margin, padding, at kulay nang direkta kasama ang HTML? Ito ba ang 2019 o ano? “

Ang mga saloobin tulad nito ay inaasahan. Alam ko dahil pareho ang naramdaman ko at agad na isinara ang takip sa Tailwind. Hanggang sa paglaon ay natagpuan ko ang isang podcast kung saan binago ng panauhin ang isang naka-istilong, disenteng laki ng website sa Tailwind na nagsimula akong magbayad ng pansin.

Bago tayo lumipat nang higit pa, isaalang-alang ang mga katanungang ito:

  • Napapagod ka ba na isaulo ang mga karaniwang klase ng balangkas at ang kanilang mga pag-andar upang maipasadya mo ang iyong mga disenyo ayon sa gusto mo? Ang isang mabuting halimbawa ay ang pagbabago ng hitsura at pag-uugali ng pag-navigate sa Bootstrap.
  • Sa palagay mo ba ang mga tanyag na frameworks tulad ng Bootstrap ay labis na labis at sinusubukan na gawin ang higit pa sa nararapat?
  • Nakikita mo ba ang iyong sarili na naghahalo ng mga frameworks dahil nais mo ang pinakamahusay sa lahat ng mga mundo?
  • Nais mo bang magkaroon ng higit na kontrol sa iyong mga disenyo at makita pa ang labis na karanasan sa vanilla CSS?

Kung ang sagot sa alinman sa mga ito ay isang “oo,” kailangan mo ng Tailwind nang masama. Ngayon tingnan natin kung ano ang Tailwind at kung ano ang ginagawa nito.

Ang Tailwind ang tinatawag na isang utility-first CSS, na naiiba sa ginagawa natin sa araw-araw na mga daloy ng trabaho: semantiko CSS. Ang pagkakaiba sa pagitan ng semantiko CSS at utility CSS ay ang dating sumusubok na mag-grupo ng mga elemento ng estilo sa pamamagitan ng pangalan ng mga visual na seksyon na lilitaw sa pahina. Kaya, kung mayroon kang isang menu ng nabigasyon, mga kard, carousel, atbp., Sa isang pahina, ang semantiko na paraan ng paggawa ng mga bagay ay sa pangkat ng mga panuntunan sa estilo ng CSS sa ilalim ng mga klase tulad ng .nav, .card, .carousel, atbp. ang kanilang mga sub-seksyon na may label na naaayon (halimbawa, .card-body, .card-footer, atbp.). Ito ay sa pamamagitan ng malayo ang pinakakaraniwang diskarte sa CSS, at lahat tayo ay pamilyar sa pamamagitan ng mga frameworks tulad ng Bootstrap, Foundation, Bulma, UI Kit, atbp.

Sa kabilang banda, ang istilo ng “utility” ng pagsulat ng mga klase ng mga pangalan ng CSS nang naaayon sa kanilang pag-andar: isang klase na kumokontrol sa margin para sa itaas at ibabang panig ay bibigyan ng bilang .margin-y-medium at maaaring mailapat saanman sa HTML markup kung saan kinakailangan ang margin na ito. Bagaman ipinakikilala nito ang isang kilabot ng isang pangalan ng klase (tingnan mo lang ang code na aking ibinahagi nang una o sa screenshot – napakaraming mga klase!), Ang intensyon ng CSS ay malinaw na kristal: hindi mo na kailangang tumalon pabalik-balik sa mga babasahin, ang iyong CSS at ang iyong HTML upang malaman ang mga tamang pangalan at tamang epekto.

Ito ay isang napaka-libog na paraan ng pagtatrabaho, ngunit mayroon ding kapansin-pansin: kailangan mong maayos ang iyong mga pangunahing kaalaman sa CSS (kasama ang mga modernong konsepto tulad ng Flexbox). Iyon ay dahil ang Tailwind ay hindi nag-aalok ng mga out-of-the-box na istilo para sa anumang mga sangkap sa iyong pahina, at nasa iyo na itayo ang mga estilo mula sa ibinigay na mga bloke ng gusali. Ang isa pang problema ay ang pag-setup: Pinapayagan ka ng Tailwind na mag-grupo ng maraming mga klase ng CSS sa tinatawag na mga sangkap, ngunit nagawa ito sa pamamagitan ng JavaScript at nangangailangan ng isang module loader at bundler tulad ng Webpack.

Lahat ng sinabi at tapos na, ang Tailwind ay isang polarizing, kapansin-pansin na bagong paraan ng paggawa ng estilo, at mag-apela sa mga taong nagnanais ng higit na pagiging simple at kontrol.

Saas

Bagaman Sass matagal nang matagal, isinama ko ito dito dahil hindi pa rin alam ng mga developer kung gaano kapaki-pakinabang ito. Ang Stylistically Kahanga-hanga Estilo ng Sheets (o SASS) ay isang superset ng CSS na binuo upang tamarin ang kabaliwan ng mga gumagapang sa proyekto sa sandaling lumalaki ang CSS na lampas ng ilang linya.

Larawan ito: matagal ka nang sumulat ng CSS para sa iyong proyekto. Gumagamit ka ng ilang mga kulay, may mga naiisip na ilang marunong para sa iba’t ibang mga div, font style, at iba pa. Maliban na ngayong napagtanto mo na hindi ito lahat ay magkakasamang tumambay nang maayos. Siguro nais mong subukan ang mas malaking margin para sa lahat ng mga seksyon, kard, at mga pindutan. Eh, ngayon ano? Kahit na ang mismong ideya ng pagkakaroon upang maghanap-palitan sa pamamagitan ng iyong higanteng CSS file ay sapat na upang bigyan ang isang sakit ng ulo. Natapos na namin ang lahat, at alam nating lahat kung gaano ito kamalian. Nilulutas ni Sass ang problemang ito sa pamamagitan ng pagpapakilala ng mga variable:

Kapag nagsusulat kami ng HTML, nagtatago kami ng mga elemento sa loob ng iba pang mga elemento. Ngunit kapag nagsusulat ng CSS, kailangan nating magsulat ng isang hierarchy ng mga patakaran, na mahirap gawin sa isip na “akma” sa CSS sa HTML. Sa Sass, maaari mong gayahin ang istraktura ng pahina sa loob ng iyong mga file ng estilo:

Ang lahat ng ito ay hindi rin nagsisimula upang simulan ang ibabaw ng mga goodies na inaalok ng Sass: modular na disenyo, isama ang mga file, mixins, mana. . . nagpapatuloy ang listahan. Oo naman, kakailanganin mong malaman ang isang dalubhasa sa likha ng tagagawa ng compass at isama ito sa iyo, ngunit sa palagay ko, na ang dalawang oras na ginugol ay isang pamumuhunan na babayaran ka nang paulit-ulit.!

Mga Linters ng CSS

Dahil ang mga taga-disenyo ng web (at mga developer ng UI – kahit na nagtataka ako kung paano naiiba ang dalawang termino na ito))) gumamit ng mga simpleng editor ng teksto – o tulad ng kaso sa mga araw na ito, ang code nang diretso mula sa mga tool sa Chrome dev – bihira silang makarinig o makikinabang mula sa isang linter. Sa kabilang banda, ang mga programmer na gumagamit ng mahusay na mga editor ng teksto tulad ng VS Code, Sublime Text, o iba pang mga IDE ay nakakaalam ng tool na ito dahil ito ang pangalawang kalikasan sa kanila. Pa rin, ang punto ay, kung isa ka sa mga developer ng CSS na nalunod sa magulo na CSS, maaari kang makinabang mula sa isang linter.

Maglagay lamang, isang linter ay isang programa na sinusuri ang iyong code para sa mga pagkakamali at pagkakapare-pareho. Ginagawa ito sa tulong ng isang hanay ng mga patakaran na mayroon ito para malaman kung ano ang mali at hindi naaayon. Ang mga mahusay na mga linter ay nagsasama sa mga IDE at mga editor ng code at maaaring mai-configure upang tumakbo sa tuwing nai-save mo ang source file. Makakatulong din sila sa iyo ng mga preview ng kulay, mga error, at pagkumpleto ng awtomat habang isinasama mo ang iyong mga file ng CSS:

Ngunit narito ang pinakamagandang bahagi – kung sumunod ka sa isang partikular na pag-istilo at pag-format ng CSS, maaari mong i-tweak ang linter sa iyong kasiyahan. Tinitiyak nito na ang CSS sa loob ng isang proyekto ay sumusunod sa parehong gabay ng estilo (ang linter ay maaari ring mai-configure upang awtomatikong i-format ang file bawat pag-save / gawin ang source code). Kaya, kung nagtatrabaho ka sa isang koponan o nag-iisa, ang isang linter ay palaging isang mahusay na karagdagan sa iyong daloy ng trabaho sa proyekto.

Konklusyon

Sigurado ako ngayon, nakumbinsi ka na ang modernong pag-unlad ng CSS ay isang malaking sigaw mula sa pamamaraang herding-the-cats ng nakaraan. ��

Iyon ay sinabi, aaminin ko muli, kahit na parang tunog ng isang sirang talaan: ang ilan sa mga tool na nasaklaw ko sa artikulong ito ay hindi madaling i-set up, lalo na kung hindi ka sa mga friendly na term sa npm ecosystem . Ngunit bago mo maramdaman at naiinis ang iyong mukha, sabihin mo sa akin: madali ba ang CSS noong una ka pag-aaral ito? Madali bang matutong mag-center sa isang div, upang ma-master ang mga swings ng mood ng mga floats, at iba pa? Sa katulad na paraan, ang mga tool na aking inilarawan dito ay may ilang curve sa pag-aaral, ngunit sulit ito.

Matapat, kapag nagsimula kang makaranas ng mga resulta, sasipain mo ang iyong sarili para sa hindi na gawin ito nang mas maaga. At huwag nating isipin ang kahalagahan ng CSS na modular, sandalan, at maayos na maayos!

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