- CSS sistema užtikrina greitį, nuoseklumą ir reaguojantį dizainą, tačiau ji taip pat apima kodo perkrovą ir tam tikrą tikslaus valdymo praradimą.
- Tinkamas pasirinkimas priklauso nuo projekto tipo, lengvai įgyjamos mokymosi kreivės, poreikio pritaikyti ir suderinamumo su dabartiniu jūsų programinės įrangos rinkiniu.
- „Bootstrap“, „Tailwind“, „Foundation“, „Bulma“, „Materialize“, „Semantic UI“ ir kitos platformos apima viską – nuo lengvų projektų iki sudėtingų įmonių programų.
- Įvaldę „vanilinį“ CSS kartu su vienu ar dviem karkasais, gausite lankstumo, reikalingo norint subalansuoti našumą, dizainą ir ilgalaikę priežiūrą.
Šiuolaikiniame žiniatinklio kūrime, turėti tvirtą CSS pagrindą Tai nebėra pasirenkama: tai būtina. Tačiau projektams augant, visko kūrimas „ranka“ tampa neefektyvus, o vizualinio nuoseklumo išlaikymas – tikras košmaras. Štai kur... CSS sistemoskurie tapo pagrindiniu įrankiu dizaineriams ir front-end programuotojams.
Šiandien beveik viena iš keturių interneto svetainių Jis remiasi tam tikra stilių lapų sistema. Šios bibliotekos ne tik pagreitina jūsų darbą, bet ir sukuria bendrą vizualinę kalbą, kuri leidžia lengviau suprasti, naršyti ir naudoti daugumą puslapių. Jei jus domina techninė SEO, produktyvumas kūrimo procese arba tiesiog norite nustoti vargti derinant div elementus, tvirtas CSS sistemos ekosistemos supratimas sutaupys jums daugybę valandų.
Kas tiksliai yra CSS sistema?
Un CSS sistema tai iš esmės a iš anksto paruošta kodo biblioteka Jame yra stiliai, komponentai ir įrankiai, paruošti pritaikyti jūsų HTML. Užuot pradėję kurti stilių lapą nuo nulio, pakartotinai naudojate patikrintus šablonus: tinklelių sistemas, pagrindinius šriftus, mygtukus, formas, lenteles, korteles, meniu, slankiklius ir kt.
Šios sistemos veikia kaip sąsaja „konstrukcinis rinkinys“Jūs pateikiate turinį ir struktūrą HTML kalba, o iš anksto nustatytų klasių serijos dėka galite pasiekti pritaikomą, nuoseklų ir funkcionalų dizainą, nereikėdami kiekvienam projektui išradinėti dviračio iš naujo. Daugelis jų neapsiriboja paprastu CSS ir taip pat apima „JavaScript“ interaktyviems komponentams pavyzdžiui, modaliniai elementai, skirtukai, išskleidžiamieji meniu arba karuselės.
Galime atskirti rėmus daugiafunkciniskurios apima beveik viską (tinklelius, komponentus, įrankius, temas ir kt.) ir sistemas konkretus tikslas, pavyzdžiui, sutelktas tik į reaguojančią tinklelį, tipografiją arba tam tikrus konkrečius sąsajos valdiklius.
Kodėl verta naudoti CSS sistemą?
Svarbus klausimas, kurį užduoda daugelis žmonių: jei aš jau moku CSS, Kodėl man reikia rėmelio? Trumpai tariant, tai padeda nustoti rašyti tą pačią kodo bazę vėl ir vėl. Kaupiant projektus, suprantama, kad visada sukuriate tas pačias groteles, tarpus, šriftus ir pagrindinius komponentus.
Geras CSS karkasas jums siūlo greitas ir patikimas būdas sukurti išdėstymą nereikia kaskart pradėti nuo nulio. Be to, kadangi jį sukūrė ir peržiūrėjo daugybė žmonių, jis garantuoja jums naršyklės suderinamumasgerosios praktikos pavyzdžiai ir prieinamumo bazė, kurią susikurti patiems užtruktų daug ilgiau.
Tai taip pat svarbu tokiu lygmeniu komandinis darbasJei visi naudoja tą pačią klasių, tinklelių ir komponentų sistemą, daug lengviau suprasti, prižiūrėti ir išplėsti kitų žmonių kodą. Sistema tampa bendra kalba, kuri sumažina trintį tarp dizainerių, front-end ir front-end programuotojų.
Galiausiai, poveikis vartotojo patirtis (UX)Daugelis vartotojų jau yra įpratę prie tam tikrų vizualinių ir sąveikos modelių, kuriuos atkartoja populiarios platformos: meniu, formos, mygtukai, kortelės ir kt. Šio įpratimo panaudojimas gali turėti didelės įtakos nukreipimo puslapio, el. prekybos svetainės ar įmonės svetainės konversijų rodikliui.
Pagrindiniai CSS platformos naudojimo pranašumai
Naudojant tinkamai parinktą CSS sistemą, kuriant svetainę ar žiniatinklio programą gaunama daug labai apčiuopiamų privalumų.
Viena vertus, yra didžiulis laiko taupymasŠi sistema turi tinklelius, atstatymo/normalizavimo funkcijas, pagrindinius stilius ir nemažai komponentų. Užuot kiekvieną kartą pradedant projektą vargę su CSS, galite sutelkti dėmesį į greitą maketavimą su iš anksto nustatytomis klasėmis arba net sukurti prototipą per kelias valandas.
Kita stiprioji pusė yra vizualinis nuoseklumas ir reaguojantis dizainasŠiuolaikinės sistemos yra sukurtos pirmiausia mobiliesiems įrenginiams, naudojant medijos užklausas ir tinklelio sistemas, kurios prisitaiko prie mobiliųjų įrenginių, planšetinių kompiuterių ir stalinių kompiuterių. Tai panaikina poreikį perskaičiuoti stulpelius, pločius ir procentus kiekvienam lūžio taškui.
Be to, dauguma šių sistemų suteikia kruopščiai suprojektuoti komponentai (mygtukai, įspėjimai, kortelės, formos, naršymo juostos...) su kalibruotomis paraštėmis, užpildymu ir šriftais. Tai suteikia profesionalų vaizdą nuo pat pirmos minutės, net jei komandoje neturite vizualinio dizainerio.
Lyg to būtų maža, dideli rėmai turi aktyvi bendruomenė ir išsami dokumentacijaTai reiškia pavyzdžius, ištraukas, mokymo programas, dažniausiai pasitaikančių problemų sprendimus ir nuolatinius funkcionalumo bei saugumo atnaujinimus, taip pat palaikymą naujoms naršyklėms.
Trūkumai ir rizika, susijusi su rėmimusi sistema
Tai ne visi privalumai: sistemos naudojimas taip pat turi savo trūkumų. subtilūs taškai į ką reikia atsižvelgti prieš priimant sprendimą.
Pirmasis yra per didelė kodo kainaBeveik visada importuojate stilius ir komponentus, kurių jūsų projektas nenaudoja. Tai išpučia galutinį CSS ir gali paveikti našumą bei įkėlimo laiką, o tai nėra idealu SEO ar vartotojo patirčiai.
Jūs taip pat pralaimite puiki kai kurių detalių kontrolėKai kas nors sugenda arba veikia neprognozuojamai, sudėtingos sistemos sugeneruotų stilių derinimas gali būti daug sudėtingesnis nei savo CSS peržiūra. Yra daugybė taisyklių, perrašymų, įrankių, miksų... ir problemos šaltinio radimas gali tapti tikru košmaru.
Dar vienas keblus aspektas yra dizaino homogenizavimasJei tiesiog naudosite „Bootstrap“, „Materialize“ ar bet kurią kitą sistemą „tokią, kokia ji yra“, jūsų svetainė atrodys kaip tūkstančiai kitų svetainių, kurios padarė tą patį. Prekių ženklams, siekiantiems itin išskirtinės išvaizdos ir pojūčio, tai gali būti rimta problema.
Galiausiai yra mokymosi kreivėDidelė sistema neįvaldoma per porą popiečių: reikia suprasti jos klasės filosofiją, konvencijas, komponentus, kaip ją pritaikyti, kaip kompiliuoti su Sass/PostCSS ir taip toliau. O jei ją naudosite neturėdami tvirtų CSS pagrindų, rizikuojate tapti nuo jos „priklausoma“ ir nežinoti, kaip spręsti problemas už sistemos ribų.
Svarbiausi veiksniai prieš renkantis CSS sistemą
Prieš įsipareigojant kurti sistemą, verta skirti laiko ją išanalizuoti. ko iš tikrųjų reikia jūsų projektui O kokia jūsų, kaip kūrėjo ar komandos, situacija? Ne visos aplinkos ar paketai tinka tiems patiems įrankiams.
Pirmiausia reikia įvertinti, projekto dydis ir sudėtingumasPaprastam nukreipimo puslapiui, asmeniniam tinklaraščiui ar nedidelei svetainei geriausia būtų dirbti su mikrostruktūra, pvz., „Skeleton“, „Milligram“ ar „Water.css“, arba net su savo CSS. Didelėms programoms, administratoriaus skydams, SaaS ar įmonių projektams gali būti ekonomiškiau naudoti ką nors patikimo, pvz., „Bootstrap“, „Foundation“, „Ant Design“ ar „UIkit“.
Kitas esminis aspektas yra mokymosi kreivėTokios komunalinės programos kaip „Tailwind CSS“ ar „Tachyons“ visiškai pakeičia klasių supratimą: pereinama nuo semantinių pavadinimų prie funkcinių klasių (paraštės, spalvos, dydžiai ir kt.). Kita vertus, „Bootstrap“ ar „Bulma“ turi švelnesnę mokymosi kreivę tiems, kurie jau dirbo su tradicine CSS.
Nepamirškite, lankstumas ir pritaikymo galimybėsJei jūsų prekės ženklas turi stiprų vizualinį identitetą, jums reikia sistemos, kuri leistų lengvai iš naujo apibrėžti spalvų paletes, šriftus, rėmelių spindulius, šešėlius ir kt. Tokios sistemos kaip „Bootstrap“, „Bulma“, „Materialize“, „UIkit“ ar „Semantic UI“ naudoja „Sass“ arba „Less“, kad galėtumėte kurti pasirinktines temas.
La bendruomenė ir dokumentacija Jie taip pat turi daug svorio. Tokios sistemos kaip „Bootstrap“, „Tailwind“ ir „Foundation“ turi forumus, labai aktyvias „GitHub“ paskyras, „Discord“ / „Slack“ kanalus ir daugybę mokomųjų vaizdo įrašų. Mažesni ar nišiniai projektai turi mažiau palaikymo, todėl gali būti sunku išspręsti labai specifines problemas.
Galiausiai, pagalvokite apie suderinamumas su jūsų dabartiniu paketu: Vue: kas tai yra ir kaip tai veikia„React“, „Angular“, „Svelte“, serverio teikiamos programos ir kt. Pavyzdžiui, „Ant Design“ yra labai orientuota į „React“; „DaisyUI“ išplečia „Tailwind“; „Material UI“ (MUI) taip pat yra 100 % „React“ ekosistema. Tuo tarpu „Bulma“ ar „Pure.css“ yra nepriklausomos nuo karkaso ir gerai veikia su bet kuriuo JS karkasu arba net be jo.
„Bootstrap“: klasika, kuri vis dar karaliauja
Bootstrap Jis gimė „Twitter“ tinkle ir šiandien tikriausiai yra plačiausiai pasaulyje naudojama CSS sistemaNuo pat paleidimo 2011 m., dėka savo tinklelio sistemos, didžiulės komponentų kolekcijos ir itin išsamios dokumentacijos, ji tapo faktiniu reaguojančių svetainių kūrimo standartu.
Jo branduolys sujungia HTML, Sass ir JavaScript Jame yra naršymo juostos, kortelės, modaliniai elementai, įrankių patarimai, formos ir daugybė kitų paruoštų naudoti elementų. Jis iš anksto sukonfigūruotas mobiliesiems įrenginiams pritaikytam dizainui, todėl tiesiog pridėkite atitinkamas klases, kad viskas tinkamai prisitaikytų prie mobiliųjų telefonų, planšetinių kompiuterių ir stalinių kompiuterių.
Tarp jo privalumų yra milžiniška bendruomenėJis siūlo palaikymą praktiškai bet kurioje naršyklėje, daugybę trečiųjų šalių temų ir bibliotekų, pritaikytų kitoms aplinkoms (pvz., „React Bootstrap“). Jis yra nemokamas, atvirojo kodo ir gana lengvai integruojamas į beveik bet kokį steko.
Jo trūkumai yra gerai žinomi: CSS gali būti sunkus, jei nėra pritaikytasIr jo numatytasis stilius yra toks atpažįstamas, kad daugelis svetainių atrodo panašios. Be to, tinkamai nepritaikius, kai kurias klases sunku pakeisti, todėl gali kilti sunkumų dėl specifiškumo ir pakeitimų.
„Tailwind CSS“: pirmiausia į naudingumą orientuotas požiūris
Galinis vėjas CSS Tai atstovauja kitokiai filosofijai. Užuot teikęs jums iš anksto paruoštus komponentus, jis siūlo jums žemo lygio naudingumo klasės (paraštės, užpildymai, spalvos, tinklelis, lankstumas, tipografija ir kt.), kad galėtumėte kurti savo dizainą tiesiogiai HTML kalba.
Jis veikia nuskaitydamas jūsų HTML šablonai ir JavaScript komponentai sugeneruoti statinį CSS failą tik su tomis klasėmis, kurias iš tikrųjų naudojate. Tai reiškia, kad gamybinėje aplinkoje galite turėti labai mažą CSS failą, optimizuotą tokiais metodais kaip „PurgeCSS“ arba „Just-In-Time“ (JIT) režimas, kuris generuoja stilius operatyviai.
Jo privalumai akivaizdūs: vienas beveik begalinis lankstumasAukštas pritaikymo lygis naudojant vieną konfigūracijos failą, labai geras našumas ir puikus suderinamumas su šiuolaikinėmis sistemomis, tokiomis kaip „React“ biblioteka„Vue“ arba „Next.js“. Daugelis kūrėjų vertina tai, kad jiems retai reikia ieškoti dokumentacijos: klasės paprastai yra labai intuityvios.
Tačiau tai turi ir trūkumų. Tiems, kurie renkasi semantinį metodą, HTML užpildymas dešimtimis klasių gali atrodyti painus. mokymosi kreivė Tai nuostabu, ir prieš pradedant jį naudoti, reikia šiek tiek pasiruošti. Be to, derinant struktūrą ir stilių žymėjime, panaikinamas tradicinis rūpesčių atskyrimas, kuris vis dar erzina daugelį žmonių.
Aplink „Tailwind“ atsirado plėtinių, tokių kaip DaisyUI, kurie prideda komponentų sluoksnį su „žmogiškesniais“ pavadinimais (mygtukai, kortelės, jungikliai ir kt.), išlaikant įrankių galią ir gerokai supaprastinant rašytinų klasių skaičių.
Bulma: paprasta, moderni ir tik CSS
rasti Tai CSS sistema modernus ir lengvas, visiškai pagrįstas „Flexbox“ technologijaDidžiausias jo privalumas yra tas, kad jis nepriklauso nuo „JavaScript“: jame yra visos klasės ir stiliai, todėl galite jį derinti su bet kuria JS sistema be jokių konfliktų.
Jo sintaksė yra labai lengvai skaitoma, su tokiomis klasėmis kaip .button, .is-primary, .is-large kurie yra intuityvūs net pradedantiesiems. Jis siūlo lengvai suprantamą stulpelių sistemą, pagrindinius sąsajos komponentus ir modulinę architektūrą, leidžiančią importuoti tik tai, ko jums reikia.
Tarp Bulmos privalumų yra jos sklandi mokymosi kreivėMinimalistinis požiūris ir augantis populiarumas projektuose, kuriems nereikia „monstro“ kaip „Bootstrap“, bet reikia tvirto pagrindo, todėl jis idealiai tinka švarioms sąsajoms, paprastiems ataskaitų suvestinėms ar lengvoms įmonių svetainėms.
Kita vertus, jame yra mažiau komponentų nei kituose karkasuose, o norint naudoti sudėtingesnes funkcijas, turėsite pasikliauti „JavaScript“ arba pasirinktiniais stiliais. Jame taip pat trūksta palaikymo labai senoms naršyklėms, tokioms kaip „Internet Explorer“, kurios šiais laikais, išskyrus labai specifinius atvejus, dažniausiai yra labiau privalumas nei problema.
Fondas: Galia dideliems projektams
Pagrindas„Zurb“ sukurtas vienas seniausių ir galingiausių reaguojančių priekinių sistemų. Jis skirtas sudėtingos žiniatinklio programos ir įmonių svetainėssu daugybe parinkčių, komponentų ir įrankių, skirtų tiek žiniatinklio, tiek HTML el. laiškams.
Jis siūlo itin lanksčią tinklelio sistemą, pilną vartotojo sąsajos komponentų rinkinį, „Sass“ kintamuosius beveik bet kokio aspekto tematikai ir įrankius, kurie labai palengvina prieinamą dizainą. Tai brandi sistema, ilgametę evoliuciją turinti, gerai dokumentuota ir išbandyta šimtuose tūkstančių svetainių.
Didžiausia jo dorybė yra būtent tas brandumas: Jame yra beveik viskasJei jums reikia labai tikslios dizaino kontrolės, plataus suderinamumo ir tvirto prieinamumo pagrindo, „Foundation“ yra puikus pasirinkimas. Daugelis didelių įmonių jį pasirinko dėl jo patikimumo ir lankstumo pusiausvyros.
Trūkumas yra tas, kad gali pasirodyti sunkus ir sudėtingasJis sukaupė daug funkcijų, o failų dydžiai nėra maži. Jo bendruomenė mažesnė nei „Bootstrap“, mokymosi kreivė statesnė, o jei naudojate modernius, lengvus karkasus, jis gali atrodyti šiek tiek „senamadiškas“.
„Materialize“ ir „Material Design Lite“: „Google“ visata
Realizuokis Tai CSS sistema, pagrįsta „Google“ medžiagų dizaino gairėsJei jums patinka švarios sąsajos su švelniais šešėliais, gerai apgalvotomis animacijomis ir labai aiškia vizualine hierarchija, šis požiūris gali puikiai tikti jūsų projektams.
„Materialize“ apima tokius komponentus kaip slankikliai, modalai, kortelės, sulankstomi elementai ir daugelis kitų, įkvėptų „Google“ vizualinės kalbos. Jo integravimas į naujus projektus yra paprastas ir leidžia pasiekti itin profesionalų vaizdą be didelių komplikacijų.
Kaip stipriąsias puses, jis siūlo moderni ir nuosekli estetikaJis siūlo gerą turtingų komponentų rinkinį ir priimtiną mokymosi kreivę. Jis idealiai tinka žiniatinklio ir mobiliosioms programoms, kurios nori suderinti savo išvaizdą su „Android“ ar kitų „Google“ produktų išvaizda.
Vienas iš trūkumų yra tai, kad jis nėra toks modulinis ar lengvas kaip kitos parinktys, tokios kaip „Bulma“ ar „Milligram“, ir tam tikroms animacijoms bei elgesiui naudoja „JavaScript“. Jis taip pat neturi tokios didelės bendruomenės kaip „Bootstrap“ ar „Tailwind“.
Be to, Medžiagų dizainas Lite (MDL) „Google“ bandė pasiūlyti lengvesnę ir paprastesnę savo platformos versiją. Ji naudoja mažiau „JavaScript“, siekia būti prieinama įvairiuose įrenginiuose ir apima tokius komponentus kaip mygtukai, kortelės ir slankikliai. Tačiau Jis nebegauna aktyvių atnaujinimųTaigi šiais laikais jis laikomas pasenusiu ir ribotu estetikos bei priežiūros požiūriu.
Semantinė vartotojo sąsaja: HTML beveik natūralia kalba
Semantinė vartotojo sąsaja pasirinkti kitą idėją: žmonėms skaitomos klasės Šie įrankiai paverčia jūsų HTML į kažką labai artimo natūraliai kalbai. Idėja yra ta, kad kodas bus beveik skaitomas kaip anglų kalba, todėl jį bus lengviau suprasti net ir mažiau techninių žinių turintiems žmonėms.
Jame yra didžiulė vartotojo sąsajos komponentų biblioteka: mygtukai, kortelės, modalai, meniu, formų laukai, jungikliai, sudėtingi išdėstymai... ir a labai galinga temų sistema su tūkstančiais kintamųjų, kurie paveldimi visuose elementuose.
Tai ypač vertinama greitam prototipų kūrimui ir komandoms, kurios vertina skaitomumas ir organizuotumas kodo. Be to, jis gerai integruojasi su „JavaScript“ sistemomis, tokiomis kaip „Angular“ ar „React“, o jo dokumentacija yra gana išsami.
Kita vertus, dydis gali būti reikšmingas, jei neoptimizuojate kūrimo proceso, ir jame yra daug daugiau kodo, nei greičiausiai naudotumėte paprastuose projektuose. Bendruomenė yra mažesnė nei kitų gigantų, ir kai kurie kūrėjai mano, kad jų gana stačia mokymosi kreivė dėl pristatomų sąvokų (vaizdų, kolekcijų, elgsenos ir kt.) skaičiaus.
Kiti žymūs karkasai: „UIkit“, „Ant Design“, „Tachyons“, „Pure“, „Spectre“, „Milligram“, „Water“
Be garsių vardų, yra ir ilgas CSS karkasų ir bibliotekų sąrašas kurie tenkina labai specifinius poreikius arba orientuojasi į konkrečias nišas.
„UIkit“ Tai modulinė, lengva sistema, kurioje didelis dėmesys skiriamas vartotojo sąsajai. Ji siūlo gerą komponentų rinkinį, reaguojančią tinklelį, „Sass“ ir „Less“ kintamuosius pritaikymui ir modernią, profesionalią estetiką. Ji populiari tokiuose projektuose kaip „Crunchyroll“ ir „Rover“, nors jos bendruomenė yra mažesnė ir kartais gali būti sudėtinga rasti konkrečių pavyzdžių.
Skruzdžių dizainas Tai peržengia paprastą CSS sistemą ir pristato save kaip pilna projektavimo sistemaJame yra didžiulis „React“ komponentų rinkinys. Jis plačiai naudojamas „Alibaba“ ekosistemoje ir kitose didelėse technologijų įmonėse. Galingas, nuoseklus ir daug išteklių reikalaujantis, tačiau pasižymi milžiniškais failų dydžiais ir yra labai susijęs su „React“.
Tachionai Tai yra pirmtakas metodo „pirmiausia naudingumas“: mažos, atominės klasės, skirtos kurti greitas, skaitomas ir visiškai pritaikomas sąsajas su minimaliu CSS. Tai idealiai tinka mažiems projektams, portfeliams ar lengviems nukreipimo puslapiams, nors gali netikti labai sudėtingoms programoms, jei nebus derinamas su papildomais stiliais.
Pure.cssSukurtas „Yahoo“, tai labai mažų ir lengvų modulių rinkinys, kurį galite naudoti kartu arba atskirai. Jame yra tinkleliai, pagrindiniai formų stiliai, lentelės ir keli kiti komponentai. Jis žiba kaip papildyti kitiems karkasams arba savo CSS, o ne kaip visavertį dizaino sprendimą.
Spectre.css Jis siūlo minimalistinį, tačiau labai patogų naudoti požiūrį su gana mažu suspaustu failu, „Flexbox“ pagrindu sukurtu tinkleliu ir naudingumo klasėmis. Jis puikiai tinka, jei ieškote paprasto, švaraus dizaino be jokių nereikalingų priedų, tačiau nesitikėkite didžiulės bendruomenės ar daugybės paruoštų temų.
Miligramas Tai minimalizmas iki kraštutinumo: vos keli kilobaitai „gzip“ failo, kad būtų sukurtas reaguojantis „Flexbox“ pagrindas ir labai santūrūs stiliai. Tai idealiai tinka greiti arba eksperimentiniai projektaiarba kai norite minimalaus pagrindo, ant kurio galėtumėte statyti netempdami per daug svorio.
Galiausiai, Vanduo.css Jame siūlomas įdomus požiūris: tai „beklasė“ sistema, kuri stilius taiko tiesiogiai numatytiesiems HTML elementams. Ji neįtikėtinai lengva ir praktiška paprastiems šablonams, dokumentacijai ar greitoms demonstracijoms, nors joje trūksta tinklelių ir sudėtingų komponentų, todėl ji netinka didelėms programoms.
„Vanilla CSS“ ir „Vanilla Framework“: kada apsieiti be karkaso
Kai tu kalbi apie Vanilinis CSS dažnai daroma nuoroda į Grynas CSS, be bibliotekų ar išankstinių procesoriųToks darbo būdas verčia gerai išmanyti kalbą, suprasti kaskadą, selektorius, specifiškumą, medijos užklausas ir kt. Iš pradžių tai brangiau, bet suteikia absoliučią rezultato kontrolę ir jokių papildomų baitų, dėl kurių patys nenusprendėte.
Jei pradedate ir norite, labai rekomenduojama dirbti „be įrankių“. išmokti tiesos pagrindusArba jei jūsų projektas yra toks specifinis, kad bet koks karkasas yra visiškai nereikalingas. Tai taip pat leidžia išvengti stilių perkrovos, kurią sukelia dauguma didelių bibliotekų.
Kita vertus, yra Vanilinis karkasas (nereikia painioti su „vanilla CSS“ koncepcija), sukurta „Canonical“, bendrovės, sukūrusios „Ubuntu“. Tai keičiamo dydžio ir modulinė sistema, sukurta naudojant „Sass“ ir skirta dideliems žiniatinklio projektams, pasižyminti labai neutralia estetika ir orientuota į prieinamumą bei suderinamumą tarp naršyklių ir ekranų.
„Vanilla Framework“ siūlo gana universalius komponentus ir stilius, įmonės lygio dokumentaciją ir įrankius, skirtus įvertinti vizualinis prieinamumas skirtinguose įrenginiuose. Kai kuriems jis atrodo vizualiai „blankus“, tačiau būtent šis neutralumas yra vienas iš jo privalumų įmonių projektuose, kuriuose vėliau pritaikomas viršutinis vizualinis sluoksnis.
Kaip pasirinkti tinkamą CSS sistemą
Be begalinių sąrašų, iš tiesų svarbu suprasti kaip išsirinkti tinkamą rėmelį kiekvienu konkrečiu atveju. Nėra tobulo varianto visiems.
Pradėkite nuo analizės projekto reikalavimai ir tikslaiAsmeninei svetainei ar nedideliam nukreipimo puslapiui gali pakakti kažko panašaus į „Milligram“, „Spectre“, „Water.css“ ar net nieko, išskyrus savo CSS. Didelėms programoms, administratoriaus skydeliui arba SaaS, kuri žymiai augs, geresnis pasirinkimas gali būti „Bootstrap“, „Foundation“, „Ant Design“, „UIkit“ ar net „Tailwind“.
Išlaikyk savo protą patirtis ir jūsų komandos patirtisJei tik pradedate dirbti su karkasais, gali būti protinga pradėti nuo „Bootstrap“ arba „Bulma“, o tada pereiti prie „Tailwind“ ar sudėtingesnių sprendimų. Jei jau gerai išmanote CSS, į naudingumą orientuotas požiūris gali gerokai padidinti jūsų produktyvumą vidutinės trukmės laikotarpiu.
Taip pat vertinkite prekės ženklo reikalaujamas pritaikymo laipsnisJei turite labai griežtą vizualinio identiteto vadovą, rinkitės sistemas, kurias lengva pritaikyti pagal temas („Bootstrap“, „Bulma“, „Semantic UI“, „UIkit“). Jei galite sau leisti naudoti labai savitą stilių (pavyzdžiui, „Material Design“), „Materialize“ arba „Ant Design“ gali padėti išvengti daugybės galvos skausmų.
Galiausiai, nepamirškite patikrinti, našumas ir failo dydisSEO ir UX srityse svarbus kiekvienas kilobaitas. Naudokite pasirinktinius kompiliavimus, tokius įrankius kaip „PurgeCSS“ arba netgi derinkite mikroframeworkus su savo pasirinktiniu kodu, kad išvengtumėte papildomo CSS įkėlimo nei būtina.
Galiausiai, išmintingiausias būdas yra išbandyti kelias sistemas su mažais prototipais ir laikytis tos, kuri geriausiai atitinka jūsų darbo eigą, faktinius projekto poreikius ir esamą technologijų rinkinį. Įvaldę bent kelias iš jų ir tvirtai supratę grynąją CSS, įgysite... didžiulis universalumas kad galėtumėte susidoroti su bet kokio tipo sąsaja, su kuria susiduriate.
