5 najčastejších nástrojov CSS pre vývojárov webu a návrhárov

CSS prešla dlhú cestu, ale nástroje okolo nej doteraz neexistovali.


Ak máte pocit, že písanie CSS je ako bojovať proti monštrám v dechtovej jame, nie ste sami. Aj keď je CSS jednou z najzákladnejších technológií poháňajúcich web, nejde o správny programovací jazyk alebo rámec ako taký. Výsledkom je, že hneď ako sa váš projekt stane prominentnejším, stáva sa to aj zmätkom – pravidlá výberu sa zdajú byť všade a je ťažké nájsť, kde je; keď na svoje stránky pridáte písma, externé CSS, JS a ďalšie diela, zdá sa, že konečná veľkosť balíka vyprší z rúk, a pýtate sa, kde sa stratili ideály rýchlych a používateľsky prístupných klientskych rozhraní..

Ale nemusí to tak byť. Dnes sa nástroje okolo CSS vyvinuli na takú úroveň, že pracovný tok sa dá nielen skrotiť, ale aj spríjemniť. V tomto článku sa chystám hovoriť o piatich takýchto nástrojoch CSS, o ktorých som vo svojej práci zistil, že majú obrovskú hodnotu. Vedome som sa tomu vyhýbala vrátane „hračkových“ nástrojov, ako sú generátory CSS, generátory ponúk atď., Pretože spôsobujú viac problémov, ako riešia.

Prichádza vlak CSS! Poďme! �� ��

PostCSS

Ak máte radi JavaScript, mali by ste radi nápad, ktorý teraz môžeme pridať a ovládať CSS pomocou JavaScriptu. A to je presne schopnosť PostCSS poskytuje.

Nejde však iba o syntaktický cukor založený na skripte JavaScript nad CSS. PostCSS zabalí niekoľko výkonných balíkov / funkcií dohromady, čo vedie k oveľa príjemnejšiemu a ľahšiemu priebehu práce pri práci s CSS. Napríklad:

  • Predpony dodávateľov sa automaticky pridávajú podľa toho, ktorú vlastnosť používate.
  • Schopnosť zistiť, ktoré funkcie CSS sa môžu použiť v aktuálnom prehliadači.
  • Pomocou nadchádzajúcich, zatiaľ neuvedených, ale veľmi výkonných aktualizácií syntaxe CSS.
  • Citlivá mriežka, ktorá je rovnako flexibilná, ako sa dostane.

Myslím, že nebudem robiť spravodlivosť pre PostCSS, ak neuvádzam príklad mriežky. Tak sme tu. Niečo také jednoduché ako toto:

div {
stratený stĺpec: 1/3
}

prevedie sa na plne funkčný systém CSS, pričom sa postarajú o takmer všetky prípady okrajov:

div {
šírka: calc (99,9% * 1/3 –
(30px – 30px * 1/3));
}
div: n-dieťa (1n) {
plavák: vľavo;
pravý okraj: 30px;
jasné: žiadne;
}
div: last-child {
pravý okraj: 0;
}
div: n-dieťa (3n) {
pravý okraj: 0;
plavák: vpravo;
}
div: n-dieťa (3n + 1) {
jasný: obidva;
}

Keďže ide o záležitosť založenú na JS, nastavenie PostCSS nie je úplne jednoduché, najmä ak ste dizajnér a nemal veľa spoločného s modulmi, zväzkami a všeobecne svetom npm. Potenciál pre PostCSS vo vašej práci je obrovský a nemal by sa prehliadať.

PurgeCSS

Máte radi moderný pracovný postup založený na rozhraní frontend, ale ste frustrovaní z toho, že prinesú priveľa batožiny? Ak áno, PurgeCSS je váš priateľ, aspoň pokiaľ sa uvažuje o CSS.

Pre tých, ktorí možno nevedia, čo je veľké: tu je rýchly prehľad. Keď zostavujete jednostránkové aplikácie pomocou front-end frameworkov ako React, Angular, Vue, atď., Prejdete tým, čo sa nazýva „proces zostavovania“. V podstate kódujete všetky svoje kódy CSS, JS, SASS atď. Do samostatných súborov (organizujete ich podľa toho, čo je pre vás najintuitívnejšie), ale keď skončíte, povedzte predajcovi, aby vec „zostavil“. Čo to robí, je prečítať si všetok zdrojový kód, ktorý ste napísali, použiť naň rôzne filtre (minifikáciu, zmätenie / uglifikáciu atď.) A vyplivnúť výstup do samostatných súborov, zvyčajne „app.js“ pre všetky skripty JavaScript, a „App.css“ pre všetky CSS. Tieto súbory spolu s chudým „index.html“ sú všetko, čo potrebujete na spustenie klientskej aplikácie. Nevýhodou je, že keďže sa do týchto konečných súborov dostane všetko, ich veľkosť často presahuje to, čo je povolené pre rýchlu reakčnú dobu; napríklad nie je nezvyčajné vidieť aplikáciu „app.js“, ktorá má viac ako 500 kB!

PurgeCSS sa pridá ako súčasť vášho pracovného postupu zostavovania a zabráni tomu, aby sa nevyužitý CSS zhromažďoval v konečnom výstupe. Typickým prípadom použitia je Bootstrap: je to stredne veľká knižnica s niekoľkými triedami UI pre rôzne komponenty. Ak vaša aplikácia používa napríklad 10% tried produktu Bootstrap, zvyšných 90% predstavuje jediný nadúvaný súbor v konečnom súbore CSS. Ale vďaka PurgeCSS je možné takéto nepoužívané súbory CSS identifikovať a zabrániť im v procese zostavovania, čo vedie k oveľa menším výsledným súborom CSS (5-6-násobné zmenšenie veľkosti je celkom normálne).

Takže pokračujte, „očistite“ zbytočné CSS PurgeCSS! ��

Tailwind

Tailwind je rámec CSS, ale je to tak veľmi proti zrnu, že som si myslel, že ho zahrnujem sem medzi nástroje CSS. Ak nenávidíte inline CSS (kto nie ?!), Tailwind s najväčšou pravdepodobnosťou spôsobí, že sa pri prvom stretnutí s hrôzou odrazíte. Pozrime sa na to, ako by ste mohli napísať typický formulár pomocou Tailwind CSS:

užívateľské meno

heslo

Vyberte si heslo.

Prihlásiť sa


Zabudol si heslo?

© 2019 Acme Corp. Všetky práva vyhradené.

“Je to vtip alebo čo ?!” Čo sú všetci tí otravné malé triedy? Prečo by som mal, po bližšej prehliadke, nastaviť okraje, vypchávky a farby priamo spolu s HTML? Je to 2019 alebo čo? “

Takéto myšlienky sa očakávajú. Viem, že som sa cítil rovnako a okamžite zavrel veko na Tailwind. Až neskôr som sa stretol s podcastom, kde hosť v Tailwinde prepracoval moderný web slušnej veľkosti a začal som venovať pozornosť.

Predtým, ako sa pohneme ďalej, zvážte tieto otázky:

  • Už vás nebaví zapamätať si štandardné triedy rámcov a ich funkcie, aby ste si svoje návrhy mohli prispôsobiť podľa svojich predstáv? Dobrým príkladom je zmena vzhľadu a správania sa navigačnej lišty Bootstrap.
  • Myslíte si, že populárne rámce, ako je Bootstrap, sú zbytočné a snažíte sa robiť oveľa viac, ako by mali?
  • Myslíte si, že miešate rámce, pretože chcete to najlepšie zo všetkých svetov?
  • Páči sa vám, že máte väčšiu kontrolu nad svojimi návrhmi a napriek tomu zistíte, že zážitok z vanilky CSS je ohromujúci?

Ak je odpoveď na ktorúkoľvek z týchto otázok „áno“, musíte Tailwind zle. Teraz sa pozrime, čo je Tailwind a čo robí.

Tailwind je to, čo sa nazýva CSS ako prvý nástroj, ktorý sa líši od toho, čo robíme v našich každodenných pracovných tokoch: sémantický CSS. Rozdiel medzi sémantickým CSS a užitočným CSS je v tom, že prvý sa pokúša zoskupiť prvky štýlu podľa názvu vizuálnych sekcií, ktoré sa objavia na stránke. Takže, ak máte na stránke navigačné menu, karty, kolotoč atď., Sémantickým spôsobom by bolo zoskupiť pravidlá štýlu CSS do tried ako .nav, .card, .carousel atď., Ktoré ich podsekcie zodpovedajúco označené (napríklad telo karosérie, päta karty atď.). Toto je zďaleka najbežnejší prístup k CSS a všetci to poznáme prostredníctvom rámcov ako Bootstrap, Foundation, Bulma, UI Kit atď..

Na druhej strane „úžitkový“ štýl písania tried CSS presne podľa ich funkcie: trieda, ktorá riadi okraj pre hornú a dolnú stranu, bude pomenovaná ako .margin-y-medium a môže byť použitá kdekoľvek v HTML kde je potrebná táto marža. Aj keď sa tým trochu priblíži názov triedy (stačí sa rýchlo pozrieť na kód, ktorý som predtým zdieľal alebo na snímke obrazovky – toľko tried!), Zámer CSS je krištáľovo jasný: nemusíte skákať tam a späť medzi dokumentáciou, váš CSS a HTML, aby ste zistili správne názvy a správny efekt.

Je to veľmi oslobodzujúci spôsob práce, ale je tu tiež háčik: musíte mať základy CSS spoľahlivo zavedené (vrátane moderných konceptov, ako je Flexbox). Dôvodom je skutočnosť, že Tailwind neponúka žiadne štýly, ktoré nie sú v balení pre žiadne komponenty na vašej stránke, a je len na vás, aby ste zostavili štýly z daných stavebných blokov. Ďalší problém spočíva v nastavení: Tailwind vám umožňuje zoskupiť niekoľko tried CSS do tzv. Komponentov, ale robí sa to pomocou JavaScriptu a vyžaduje modul zavádzača a balíčka, ako je Webpack..

Všetci povedali a urobili, Tailwind je polarizačný, nápadný nový spôsob stylingu a osloví tých, ktorí túžia po väčšej jednoduchosti a kontrole..

Saas

Hoci Sass bol už dlhú dobu, zaradil som ho sem, pretože vývojári stále nevedia, aké je užitočné. Stylisticky Awesome Style Sheets (alebo SASS) je nadmnožina CSS, ktorá bola vyvinutá na skrotenie šialenstva vkrádania do projektu, keď CSS rastie za pár riadkov..

Predstavte si to: už ste prešli dlhú cestu pri písaní CSS pre svoj projekt. Používate niekoľko farieb, prišli ste na rozumné okraje pre rôzne divy, štýly písma atď. Až na to, že si teraz uvedomujete, že to nie je tak dobre na seba. Možno by ste chceli vyskúšať väčšie okraje pre všetky sekcie, karty a tlačidlá. No, čo teraz? Dokonca aj samotná myšlienka, že budete musieť vyhľadávať a nahrádzať váš obrovský súbor CSS, stačí na to, aby ste dostali jednu bolesť hlavy. Všetci sme to urobili a všetci vieme, ako je náchylný na chyby. Sass rieši tento problém zavedením premenných:

Keď píšeme HTML, vnoríme prvky do iných prvkov. Pri písaní CSS však musíme napísať plochú hierarchiu pravidiel, čo sťažuje mentálne „prispôsobenie“ CSS do HTML. Sass umožňuje napodobňovať štruktúru stránky vo vašich súboroch štýlov:

To všetko ešte nezačne poškriabať povrch dobrôt, ktoré spoločnosť Sass ponúka: modulárny dizajn, súbory, mixiny, dedičnosť. , , zoznam pokračuje. Iste, budete sa musieť naučiť pracovný postup kompilátora Sass a zahrnúť ho do svojho, ale podľa môjho názoru je, že pár hodín strávených je investícia, ktorá vám zaplatí znova a znova!

Ukazovatele CSS

Keďže weboví dizajnéri (a vývojári používateľského rozhrania – aj keď sa pýtam, ako sa tieto dva pojmy líšia ��) používajú jednoduché textové editory – alebo ako je to v súčasnosti, kód priamo z nástrojov prehliadača Chrome – zriedka sa o nich dozvedia alebo z neho majú úžitok linter. Na druhú stranu, programátori, ktorí používajú dobré textové editory, ako sú VS Code, Sublime Text alebo iné IDE, tento nástroj poznajú veľmi dobre, pretože pre nich je to druhá podstata. Ide o to, že ak ste jedným z tých vývojárov CSS, ktorí sa utopia v chaotickom CSS, mohli by ste využiť linter.

Jednoducho povedané, linter je program, ktorý kontroluje chyby a nezrovnalosti vo vašom kóde. Robí to pomocou súboru pravidiel, ktoré má na to, aby zistili, čo je zlé a čo je nekonzistentné. Dobré ukazovatele sa integrujú s IDE a editormi kódov a dajú sa nakonfigurovať tak, aby sa spúšťali pri každom uložení zdrojového súboru. Pomáhajú vám tiež s farebnými ukážkami, chybami a automatickým dokončovaním pri vytváraní súborov CSS:

Ale tu je to najlepšie – ak sledujete konkrétny štýl a formátovanie CSS, môžete vyladiť linter k svojej spokojnosti. To zaisťuje, že CSS v rámci projektu sa riadi rovnakou príručkou štýlu (linter môže byť tiež nakonfigurovaný na automatické formátovanie súboru pri každom uložení / potvrdení zdrojového kódu). Či už teda pracujete v tíme alebo samostatne, linter je vždy skvelým doplnkom vášho pracovného postupu v projekte.

záver

Som si istý, že ste už presvedčení, že moderný vývoj CSS je ďaleko od prístupu k paseniam minulosti. ��

To však znamená, že niečo znova pripustím, aj keď znie ako zlomený záznam: niektoré nástroje, ktoré som v tomto článku uviedol, sa nedajú ľahko nastaviť, najmä ak nie ste v priateľskom vzťahu s ekosystémom npm. , Ale skôr, ako sa budete cítiť znechutení a odvrátiť svoju tvár preč, povedzte mi toto: bolo CSS ľahké, keď ste boli prvý štúdium to? Bolo ľahké naučiť sa sústrediť div, ovládať výkyvy nálady plavákov a tak ďalej? Podobne nástroje, ktoré som tu opísal, majú určitú krivku učenia, ale oplatí sa im to.

Úprimne povedané, akonáhle začnete s výsledkami, budete sa kopať za to, že ste to neurobili skôr. Nerozumieme významu CSS, ktorý je modulárny, štíhly a dobre organizovaný!

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