Uhlaka lwe-CSS: Umhlahlandlela ophelele wokukhetha olungcono kakhulu lwephrojekthi yakho

Informatec Digital » Izinsiza » Uhlaka lwe-CSS: Umhlahlandlela ophelele wokukhetha olungcono kakhulu lwephrojekthi yakho

Ekuthuthukisweni kwewebhu kwanamuhla, isisekelo esiqinile ku-CSS asisadingeki: sibalulekile. Kodwa njengoba amaphrojekthi ekhula, ukuhlela konke ngesandla kuba okungasebenzi kahle, futhi ukugcina ukuvumelana okubonakalayo kuba yiphupho elibi ngempela. Yilapho-ke izinhlaka ze-CSS zingena khona , njengoba sezibe yithuluzi elisetshenziswa kakhulu ngabaklami nabathuthukisi abaphambili.

Namuhla, cishe iwebhusayithi eyodwa kwamane incike ohlotsheni oluthile lohlaka lwesitayela. Lawa malabhulali awasheshisi nje kuphela ukuhamba komsebenzi, kodwa futhi adala ulimi olubonakalayo olwabiwe olwenza amakhasi amaningi abe lula ukuwaqonda, ukuwazulazula, nokuwasebenzisa. Uma unesithakazelo ku-SEO yobuchwepheshe, ukukhiqiza ekuthuthukisweni kwakho, noma ufuna nje ukuyeka ukulwela ukuvumelanisa ama-div, ukuqonda okuqinile kohlelo lwe-CSS kuzokongela amahora amaningi.

Luyini ngempela uhlaka lwe-CSS?

Uhlaka lwe-CSS empeleni luwumtapo wekhodi eyakhelwe ngaphambilini ehlanganisa izitayela, izingxenye, kanye nezinsiza ezilungele ukusetshenziswa ku-HTML yakho. Esikhundleni sokuqala ishidi lakho lesitayela kusukela ekuqaleni, usebenzisa kabusha amaphethini aqinisekisiwe: izinhlelo zegridi, amafonti ayisisekelo, izinkinobho, amafomu, amatafula, amakhadi, amamenyu, amaslayida, nokuningi.

Lezi zinhlaka zisebenza "njengekhithi yokwakha" yezixhumi zomsebenzisi : unikeza okuqukethwe kanye nesakhiwo ku-HTML, futhi ngenxa yochungechunge lwezigaba ezichazwe ngaphambilini, ufinyelela imiklamo ephendulayo, ehambisanayo, nesebenzayo ngaphandle kokudinga ukuvuselela isondo lephrojekthi ngayinye. Eziningi zidlula i-CSS elula futhi zifaka ne -JavaScript yezingxenye ezisebenzisanayo njengezindlela zokubonisa, amathebhu, amamenyu okwehlayo, noma ama-carousel.

Singakwazi ukuhlukanisa phakathi kwezinhlaka zemisebenzi eminingi , ezihlanganisa cishe yonke into (amagridi, izingxenye, izinsiza, izingqikithi, njll.), kanye nezinhlaka zemisebenzi ethile , ezigxile isibonelo kuphela kugridi ephendulayo, ku-typography noma kumawijethi athile esibonakalayo.

Kungani kufanelekile ukusebenzisa uhlaka lwe-CSS?

Umbuzo omkhulu abantu abaningi abawubuzayo uthi: uma sengiyazi i-CSS, kungani ngidinga uhlaka? Impendulo emfushane ukuthi ikusiza ukuthi uyeke ukubhala i-codebase efanayo ngokuphindaphindiwe. Njengoba uqoqa amaphrojekthi, uyaqaphela ukuthi uhlala udala amagridi afanayo, izikhala, amafonti, kanye nezingxenye eziyisisekelo.

Uhlaka oluhle lwe-CSS lunikeza indlela esheshayo nethembekile yokudala izakhiwo ngaphandle kokuqala phansi njalo. Ngaphezu kwalokho, ngenxa yokuthi luklanywe futhi lubuyekezwa abantu abaningi, luqinisekisa ukuhambisana kwesiphequluli esibanzi , imikhuba emihle, kanye nesisekelo sezici zokufinyeleleka ezingathatha isikhathi eside ukuzakha.

Kuyisihluthulelo sokusebenza ngokubambisana . Uma wonke umuntu esebenzisa uhlelo olufanayo lwamakilasi, amagridi, kanye nezingxenye, kulula kakhulu ukuqonda, ukugcina, nokwandisa ikhodi yomunye nomunye. Uhlaka luba ulimi oluvamile olunciphisa ukungezwani phakathi kwabaklami, abathuthukisi be-front-end, kanye nabathuthukisi be-front-end.

Okokugcina, umthelela kokuhlangenwe nakho komsebenzisi (UX) kumele ucatshangelwe . Abasebenzisi abaningi sebejwayele amaphethini athile okubonakalayo nawokuxhumana aphindaphindwa yizinhlaka ezidumile: amamenyu, amafomu, izinkinobho, amakhadi, njll. Ukusebenzisa lokhu kujwayelana kungenza umehluko omkhulu esilinganisweni sokuguqulwa kwekhasi lokufika, isayithi le-e-commerce, noma iwebhusayithi yenkampani.

Izinzuzo eziyinhloko zokusebenzisa uhlaka lwe-CSS

Ukusebenzisa uhlaka lwe-CSS olukhethwe kahle kunikeza izinzuzo eziningi ezibonakalayo uma wakha iwebhusayithi noma uhlelo lokusebenza lwewebhu.

Ngakolunye uhlangothi, kukhona ukonga isikhathi okukhulu : uhlaka luza namagridi, ukusetha kabusha/ukulungisa, izitayela eziyisisekelo, kanye nenani elihle lezingxenye. Esikhundleni sokulwa ne-CSS njalo uma uqala iphrojekthi, ungagxila ekudaleni ngokushesha izakhiwo ngezigaba ezichazwe ngaphambilini, noma ngisho nokwenza ama-prototyping ngendaba yamahora ambalwa.

Elinye ikhono ukuhambisana okubonakalayo kanye nomklamo ophendulayo . Izinhlaka zesimanje zakhiwe ngendlela yeselula-kuqala, kusetshenziswa imibuzo yemidiya kanye nezinhlelo zegridi ezivumelana neselula, ithebhulethi, kanye nedeskithophu. Lokhu kuqeda isidingo sokubala kabusha amakholomu, ububanzi, kanye namaphesenti ephuzu ngalinye lokuphazamiseka.

Ngaphezu kwalokho, iningi lalezi zinhlelo liza nezingxenye eziklanywe ngokucophelela (izinkinobho, izexwayiso, amakhadi, amafomu, ama-navbars, njll.), anemingcele elinganisiwe, ama-padding, namafonti. Lokhu kukunikeza ukubukeka kobungcweti kusukela ekuqaleni, noma ngabe ungenaye umklami obonakalayo eqenjini lakho.

Ngaphezu kwalokho, izinhlaka ezinkulu zinomphakathi osebenzayo kanye nemibhalo ebanzi . Lokhu kufaka phakathi izibonelo, iziqeshana zekhodi, izifundo, izixazululo zezinkinga ezivamile, kanye nezibuyekezo eziqhubekayo zezici, ukuphepha, kanye nokusekelwa kweziphequluli ezintsha.

Izingozi kanye nokungathembeki ohlakeni

Akuzona zonke izinzuzo: ukusebenzisa uhlaka nakho kunamaphuzu abucayi okumele acatshangelwe ngaphambi kokwenza isinqumo.

Okokuqala yi- code overhead . Cishe njalo ugcina ungenisa izitayela kanye nezingxenye ezingasetshenziswa yiphrojekthi yakho. Lokhu kukhulisa i-CSS yokugcina futhi kungathinta ukusebenza kanye nesikhathi sokulayisha, okuyinto engafanele i-SEO noma ulwazi lomsebenzisi.

Ulahlekelwa futhi ukulawula ukulungisa eminye imininingwane . Uma into iphuka noma iziphatha ngendlela engafanele, izitayela zokulungisa amaphutha ezikhiqizwe uhlaka oluyinkimbinkimbi zingaba nzima kakhulu kunokubuyekeza i-CSS yakho. Kunezinhlobo eziningi zemithetho, ukushintshwa, izinsiza, ukuxubana… futhi ukuthola umthombo wenkinga kungaba yiphupho elibi ngempela.

Elinye iphuzu eliyinkimbinkimbi ukuhlanganiswa komklamo . Uma usebenzisa nje i-Bootstrap, i-Materialize, noma olunye uhlaka "njengoba lunjalo," iwebhusayithi yakho izobukeka njengezinkulungwane zamanye amasayithi enzile into efanayo. Kumabhrendi afuna ukubukeka nokuzizwa okuhlukile kakhulu, lokhu kungaba yinkinga enkulu.

Ekugcineni, nansi indlela yokufunda . Uhlaka olukhulu alukwazi ukufundiswa kahle ntambama ezimbalwa: kufanele uqonde ifilosofi yalo yekilasi, izimiso zalo, izingxenye zalo, indlela yokulwenza ngokwezifiso, indlela yokuluhlanganisa ne-Sass/PostCSS, njalo njalo. Futhi uma ulusebenzisa ngaphandle kwesisekelo esiqinile ku-CSS, usengozini "yokuthembela" kulo futhi ungazi ukuthi ungazixazulula kanjani izinkinga ngaphandle kohlaka.

Izici ezibalulekile ngaphambi kokukhetha uhlaka lwe-CSS

Ngaphambi kokuzibophezela ohlakeni, kufanelekile ukuthatha isikhashana ukuhlaziya lokho okudingwa yiphrojekthi yakho kanye nesimo sakho njengonjiniyela noma ithimba. Akuzona zonke izindawo noma izitaki ezifanele amathuluzi afanayo.

Isinyathelo sokuqala ukuhlola usayizi kanye nobunzima bephrojekthi . Ukuze uthole ikhasi lokufika elilula, ibhulogi yomuntu siqu, noma iwebhusayithi encane, kungaba ngcono ukusebenza nohlaka oluncane olufana ne-Skeleton, i-Milligram, noma i-Water.css, noma ngisho ne-CSS yakho yangokwezifiso. Kuzinhlelo zokusebenza ezinkulu, amaphaneli okuphatha, i-SaaS, noma amaphrojekthi ebhizinisi, kungaba ngcono kakhulu ukusebenzisa into eqinile njenge-Bootstrap, i-Foundation, i-Ant Design, noma i-UIkit.

Esinye isici esibalulekile ijika lokufunda . Izinhlaka zezinsiza ezifana ne-Tailwind CSS noma i-Tachyons zishintsha ngokuphelele indlela oqonda ngayo amakilasi: usuka kumagama anencazelo uye kumakilasi asebenzayo (amamajini, imibala, osayizi, njll.). Ngakolunye uhlangothi, i-Bootstrap noma i-Bulma zinomugqa wokufunda othambile kulabo asebevele basebenza ne-CSS yendabuko.

Ungakhohlwa ukuguquguquka nokwenza ngokwezifiso . Uma umkhiqizo wakho unobunikazi obubonakalayo obuqinile, udinga uhlelo olukuvumela ukuthi uchaze kabusha kalula imibala, amafonti, i-border radii, izithunzi, nokuningi. Izinhlaka ezifana ne-Bootstrap, i-Bulma, i-Materialize, i-UIkit, noma i-Semantic UI zithembele ku-Sass noma i-Less ukuze zikuvumele udale izingqikithi ezenziwe ngokwezifiso.

Umphakathi kanye nemibhalo nakho kudlala indima ebalulekile. Izinhlaka ezifana ne-Bootstrap, i-Tailwind, kanye ne-Foundation zinezinkundla ezisebenzayo, izizindalwazi ze-GitHub, iziteshi ze-Discord/Slack, kanye nezifundo eziningi. Amaphrojekthi amancane noma akhethekile anokusekelwa okuncane, okungenza kube nzima ukuxazulula izinkinga ezithile kakhulu.

Okokugcina, cabanga ngokuhambisana ne-stack yakho ekhona : i-Vue (ukuthi iyini nokuthi isebenza kanjani) , i-React, i-Angular, i-Svelte, izinhlelo zokusebenza ezinikezwe yiseva, njll. I-Ant Design, isibonelo, igxile kakhulu ku-React; i-DaisyUI inweba i-Tailwind; i-Material UI (i-MUI) nayo iyi-100% React ecosystem. Ngokuphambene nalokho, i-Bulma noma i-Pure.css ayibonakali kahle ku-framework futhi isebenza kahle nanoma yiluphi uhlaka lwe-JS noma ngisho ngaphandle kwalo.

I-Bootstrap: isitayela sakudala esisabusa kakhulu

I-Bootstrap yazalwa ku-Twitter futhi namuhla cishe iyisakhiwo se-CSS esisetshenziswa kakhulu emhlabeni . Selokhu yasungulwa ngo-2011, isizimise njengendinganiso yokwakha amawebhusayithi aphendulayo, ngenxa yesistimu yayo yegridi, iqoqo layo elikhulu lezingxenye, kanye nokubhala kwayo okunemininingwane eminingi.

Ingqikithi yayo ihlanganisa i-HTML, i-Sass, ne-JavaScript ukuze inikeze ama-navbar, amakhadi, ama-modal, amathiphu amathuluzi, amafomu, kanye nezinye izinto eziningi ezilungele ukusetshenziswa. Iza ilungiselelwe kusengaphambili ukwakheka kweselula kuqala, ngakho-ke mane nje wengeze amakilasi afanele ukuqinisekisa ukuthi konke kuhambisana kahle namafoni eselula, amathebhulethi, namadeskithophu.

Phakathi kwezinzuzo zayo umphakathi omkhulu , ukwesekwa kwanoma yisiphi isiphequluli, inani elikhulu lezindikimba zezinkampani zangaphandle, kanye nemitapo yolwazi evumelaniswe nezinye izindawo (njenge-React Bootstrap). Imahhala, ivulekile, futhi ihlanganiswa kalula cishe kunoma yisiphi isitaki.

Ubuthakathaka bayo baziwa kakhulu: I-CSS ingaba nezinsiza eziningi uma ingenziwa ngokwezifiso , futhi isitayela sayo esizenzakalelayo siyabonakala kangangokuthi amasayithi amaningi agcina efana. Ngaphezu kwalokho, ngaphandle kokwenza ngokwezifiso okufanele, amanye amakilasi kunzima ukuwashintsha, futhi ungagcina ubhekene nezinkinga ezithile kanye nokushintshashintsha.

I-Tailwind CSS: indlela yokusebenzisa kuqala

I-Tailwind CSS imele ifilosofi ehlukile. Esikhundleni sokukunikeza izingxenye ezakhiwe ngaphambilini, inikeza amakilasi okusetshenziswa asezingeni eliphansi (ama-margins, ama-padding, imibala, igridi, i-flex, i-typography, njll.) ukuze ukwazi ukwakha imiklamo yakho ngqo ku-HTML.

Isebenza ngokuskena amathempulethi akho e-HTML kanye nezingxenye ze-JavaScript ukuze ikhiqize ifayela le-CSS elingaguquki ngamaklasi owasebenzisayo ngempela kuphela. Lokhu kusho ukuthi, ekukhiqizeni, ungaba nefayela le-CSS elincane kakhulu, elilungiselelwe ngamasu afana nemodi ye-PurgeCSS noma i-Just-In-Time (JIT), ekhiqiza izitayela ngokushesha.

Izinzuzo zayo zicacile: ukuguquguquka okungenamkhawulo , izinga eliphezulu lokwenza ngokwezifiso ngefayela elilodwa lokucushwa, ukusebenza okuhle kakhulu, kanye nokuhambisana okuphelele nezinhlaka zesimanje ezifana ne -React , Vue, kanye ne-Next.js. Abathuthukisi abaningi bayaqonda ukuthi abadingi ukubheka imibhalo: amakilasi ngokuvamile alula kakhulu.

Kodwa futhi kunezinkinga zayo. Kulabo abavela endleleni yokusebenzisa amagama, umqondo wokugcwalisa i-HTML ngamakilasi amaningi ungaba nzima kakhulu. Indlela yokufunda ibalulekile, futhi udinga ukusethwa kokuqala ngaphambi kokuthi uyisebenzise ngokungathi sína. Ngaphezu kwalokho, ngokuhlanganisa isakhiwo nesitayela ku-markup, kuhlukanisa ukuhlukaniswa kwezinkinga okuvamile, into esakhathaza abantu abaningi.

Izandiso ezifana ne -DaisyUI ziye zavela eduze kwe-Tailwind , zengeza ungqimba lwezingxenye ezinamagama "abantu" engeziwe (izinkinobho, amakhadi, amaswishi, njll.) ngenkathi kugcinwa amandla ezinsizakusebenza futhi kwenza kube lula kakhulu inani lamakilasi okufanele uwabhale.

I-Bulma: elula, yesimanje, kanye ne-CSS kuphela

I-Bulma iyi- framework yesimanje, elula ye-CSS esekelwe ngokuphelele ku-Flexbox . Inzuzo yayo enkulu ukuthi ayixhomekile ku-JavaScript: konke kwenziwa ngezigaba nezitayela, ngakho-ke ungayihlanganisa nanoma yiluphi uhlaka lwe-JS ngaphandle kokungqubuzana.

I-syntax yayo ifundeka kalula, inezigaba ezifana ne -.button, i-.is-primary, kanye ne-.is-large eziqondakala kalula ngisho nakubaqalayo. Inikeza uhlelo lwekholomu olulula ukuluqonda, izingxenye eziyisisekelo zesixhumi esibonakalayo, kanye nokwakheka kwe-modular okukuvumela ukuthi ungenise kuphela lokho okudingayo.

Phakathi kwezinzuzo zeBulma kukhona indlela yayo yokufunda ethambile , indlela elula yokwenza izinto, kanye nokuthandwa okwandayo kumaphrojekthi angafuni "isilo" njengeBootstrap kodwa afuna isisekelo esiqinile. Ilungele ama-interface ahlanzekile, amadeshibhodi alula, noma amawebhusayithi ezinkampani alula.

Ngakolunye uhlangothi, ifaka izingxenye ezimbalwa kunezinye izinhlaka, futhi ukuze uthole izici ezithuthukisiwe kuzodingeka uthembele ku-JavaScript noma izitayela ezenziwe ngokwezifiso. Ayinawo ukwesekwa kweziphequluli ezindala kakhulu njenge-Internet Explorer, okuthi kulezi zinsuku, ngaphandle kwezimo ezithile kakhulu, ivame ukuba yinzuzo kakhulu kunokuba yinkinga.

Isisekelo: Amandla amaphrojekthi amakhulu

I-Foundation , eyasungulwa yi-Zurb, ingenye yezinhlaka zangaphambili eziphendulayo ezindala kakhulu nezinamandla kakhulu. Ihloselwe izinhlelo zokusebenza zewebhu eziyinkimbinkimbi namawebhusayithi ezinkampani , enezinketho eziningi, izingxenye, kanye nezinsiza ze-imeyili yewebhu neye-HTML.

Inikeza uhlelo lwegridi oluguquguqukayo kakhulu, isethi ephelele yezingxenye ze-UI, iziguquguquko ze-Sass zokubeka itimu cishe noma yisiphi isici, kanye nezinsiza ezenza kube lula kakhulu ukuklama okufinyelelekayo. Luhlaka oluvuthiwe, oluneminyaka yokuvela, olubhalwe kahle, futhi oluhlolwe kumawebhusayithi angamakhulu ezinkulungwane.

Amandla ayo amakhulu atholakala ekuvuthweni kwayo: inakho konke . Uma udinga ukulawulwa okuhle komklamo, ukuhambisana okubanzi, kanye nesisekelo esiqinile sokufinyeleleka, i-Foundation iyisinqumo esithembekile. Izinkampani eziningi ezinkulu ziyisebenzisile ukuze ilinganisele phakathi kokuqina nokuguquguquka.

Okubi ukuthi ingaba nzima futhi ibe yinkimbinkimbi . Iqoqe izici eziningi, futhi osayizi bamafayela abancane impela. Umphakathi wayo mncane kune-Bootstrap, ijika layo lokufunda liphakeme kakhulu, futhi uma uvela ezinhlakeni zesimanje, ezilula, kungase kubonakale sengathi "isikole sakudala".

I-Materialize kanye ne-Material Design Lite: indawo yonke ye-Google

I-Materialize iwuhlaka lwe-CSS olusekelwe eziqondisweni ze-Material Design zika-Google . Uma uthanda izixhumi ezihlanzekile ezinezithunzi ezithambile, izithombe ezicatshangelwe kahle, kanye nohlelo olucacile lokubuka, le ndlela ingase ifaneleke kahle kumaphrojekthi akho.

I-Materialize ifaka phakathi izingxenye ezifana nama-slider, ama-modal, amakhadi, ama-collapsible, nezinye eziningi, konke kuphefumulelwe ulimi olubonakalayo lwe-Google. Ukuhlanganiswa kwayo kumaphrojekthi amasha kulula futhi kukuvumela ukuthi ufinyelele ukubukeka kobungcweti obukhulu ngaphandle kwezinkinga eziningi.

Amandla ayo afaka phakathi ubuhle besimanje nobuhlala njalo , iqoqo elihle lezingxenye ezicebile, kanye nohlelo lokufunda olufanele. Ilungele izinhlelo zokusebenza zewebhu nezeselula ezifuna ukuhambisana nokubukeka nomuzwa we-Android noma eminye imikhiqizo ye-Google.

Phakathi kokubi kwayo, ayilula noma ayilula njengezinye izinketho ezifana ne-Bulma noma i-Milligram, futhi incike ku-JavaScript ukuze ithole izithombe ezithile kanye nokuziphatha. Ayinawo umphakathi omkhulu njenge-Bootstrap noma i-Tailwind.

Ngakolunye uhlangothi, i-Material Design Lite (MDL) kwakuwumzamo we-Google wokunikeza inguqulo elula nelula yohlaka lwayo. Isebenzisa i-JavaScript encane, ihlose ukufinyeleleka kumadivayisi ahlukahlukene, futhi ifaka izingxenye ezifana nezinkinobho, amakhadi, kanye nama-slider. Kodwa-ke, ayisatholi izibuyekezo ezisebenzayo , ngakho-ke namuhla ibhekwa njengephelelwe yisikhathi futhi inqunyelwe ngokwezinto ezinhle kanye nokugcinwa kwayo.

I-Semantic UI: I-HTML cishe ngolimi lwemvelo

I-Semantic UI ithatha indlela ehlukile: amakilasi afundeka kubantu aguqula i-HTML yakho ibe yinto esondele kakhulu olimini lwemvelo. Umqondo uwukuthi ikhodi ifundeka cishe njengesiNgisi, okwenza kube lula ukuyiqonda ngisho nakubasebenzisi abangenabo ubuchwepheshe.

Inomtapo wolwazi omkhulu wezingxenye ze-UI: izinkinobho, amakhadi, amamodali, amamenyu, amasimu efomu, amaswishi, izakhiwo eziyinkimbinkimbi… kanye nesistimu yetimu enamandla kakhulu enezinkulungwane zezinto eziguquguqukayo ezizuzwe njengefa kuzo zonke izakhi.

Iyaziswa kakhulu ngokubhala ngokushesha kanye namaqembu azisa ukufundeka kwekhodi kanye nokuhleleka kwayo . Ngaphezu kwalokho, ihlangana kahle nezinhlaka zeJavaScript ezifana ne-Angular kanye ne-React, futhi imibhalo yayo iphelele impela.

Ngokubuyisela, usayizi ungaba mkhulu uma ungaluthuthukisi ulwakhiwo, futhi lufaka ikhodi eningi kakhulu kunaleyo ongayisebenzisa kumaphrojekthi alula. Umphakathi mncane kunowabanye abantu abakhulu, futhi abanye abathuthukisi bathola ukuthi indlela yawo yokufunda iphakeme kancane ngenxa yenani lemiqondo (imibono, amaqoqo, ukuziphatha, njll.) eyethulayo.

Ezinye izinhlaka eziphawulekayo: i-UIkit, i-Ant Design, i-Tachyons, i-Pure, i-Spectre, i-Milligram, i-Water

Ngaphandle kwamagama amakhulu, kukhona uhlu olude lwezinhlaka ze-CSS kanye nemitapo yolwazi ehlanganisa izidingo ezithile noma egxile ezindaweni ezithile.

I-UIkit iyi-framework ehlelekile, elula egxile kakhulu ekwakhiweni kwesikhombimsebenzisi somsebenzisi. Inikeza isethi enhle yezingxenye, ukusebenza kwegridi okuphendulayo, iziguquguquko ze-Sass kanye ne-Less zokwenza ngokwezifiso, kanye nobuhle besimanje, bobungcweti. Idumile kumaphrojekthi afana ne-Crunchyroll kanye ne-Rover, yize umphakathi wayo umncane futhi ukuthola izibonelo eziqondile ngezinye izikhathi kungaba yinselele.

I-Ant Design idlula uhlaka lwe-CSS olulula, izethula njengohlelo lokuklama oluphelele oluneqoqo elikhulu lezingxenye ze-React. Isetshenziswa kabanzi ohlelweni lwe-Alibaba kanye nezinye izinkampani ezinkulu zobuchwepheshe. Inamandla, iyahambisana, futhi icebile ngezinsizakusebenza, kodwa inosayizi abakhulu bamafayela kanye nokuthembela okuqinile ku-React.

I-Tachyons iyiphayona lendlela yokusebenzisa izinto kuqala: amakilasi amancane, e-athomu okwakha izixhumi ezisheshayo, ezifundekayo, neziphendula ngokugcwele nge-CSS encane. Ilungele amaphrojekthi amancane, amaphothifoliyo, noma amakhasi okufikela alula, yize ingase ingaphumeleli ezinhlelweni zokusebenza eziyinkimbinkimbi kakhulu uma ingahlanganiswa nezitayela ezengeziwe.

I-Pure.css , eyadalwa yi-Yahoo, iyiqoqo lamamojula amancane kakhulu futhi alula ongawasebenzisa ndawonye noma ngawodwana. Ihlanganisa amagridi, izitayela zefomu eziyisisekelo, amatafula, kanye nezinye izingxenye ezimbalwa. Ikhanya njengesengezo kwezinye izinhlaka noma i-CSS yakho, kunokuba ibe yisisombululo esiphelele sokuklama.

I-Spectre.css inikeza indlela encane kodwa esebenziseka kakhulu, enefayela elincane elicindezelwe, igridi esekelwe ku-Flexbox, kanye namakilasi ezinsiza. Kuhle kakhulu uma ufuna idizayini elula, ehlanzekile, engenazo izinto eziningi, yize ungalindeli umphakathi omkhulu noma izindikimba eziningi ezilungiselelwe.

I-Milligram ithatha i-minimalism ibe sezingeni eliphezulu: ama-kilobyte ambalwa e-gzip ukukunikeza isisekelo esisebenzayo se-Flexbox esinezitayela ezihlanzekile kakhulu. Ilungele amaphrojekthi asheshayo noma okuhlola , noma uma ufuna isisekelo esincane ongakha kuso ngaphandle kokwengeza isisindo esiningi.

Okokugcina, i-Water.css iphakamisa indlela exakile: uhlelo "olungenazo izigaba" olusebenzisa izitayela ngqo ezintweni ze-HTML ezizenzakalelayo. Lulula kakhulu futhi luwusizo kumathempulethi alula, amadokhumenti, noma ama-demo asheshayo, yize lungenayo igridi nezingxenye eziyinkimbinkimbi, futhi alufaneleki ezinhlelweni zokusebenza ezinkulu.

Uhlaka lwe-Vanilla CSS kanye ne-Vanilla: Kunini lapho kufanele ungabi nohlaka

Uma abantu bekhuluma nge- Vanilla CSS, bavame ukusho i-CSS emsulwa, engenawo amalabhulali noma ama-preprocessor . Ukusebenza ngale ndlela kudinga ukuqonda okuqinile kolimi, okuhlanganisa izitayela ezihlukanisayo, izikhethi, ukucacisa, imibuzo yemidiya, njalo njalo. Kuyinselele kakhulu ekuqaleni, kodwa kukunikeza ukulawula okuphelele phezu komphumela futhi akukho ama-byte engeziwe ongakawanqumi.

Ukusebenza "kusukela ekuqaleni" kunconywa kakhulu uma uqala futhi ufuna ukufunda izisekelo ngempela , noma uma iphrojekthi yakho icacile kangangokuthi noma yiluphi uhlaka aludingeki nhlobo. Iphinde ikuvumele ukuthi ugweme ukugcwala kwesitayela okuza nemitapo yolwazi eminingi emikhulu.

Ngakolunye uhlangothi, kukhona i-Vanilla Framework (akufanele ididaniswe nomqondo we-vanilla CSS), eyathuthukiswa yi-Canonical, inkampani ephethe i-Ubuntu. Luhlaka olukwazi ukukhuliswa nolune-modular, olwakhiwe nge-Sass futhi lwaklanyelwe amaphrojekthi amakhulu ewebhu, olunobuhle obungathathi hlangothi kakhulu futhi olugxile ekufinyelelekeni nasekuhambisaneni kwesiphequluli kanye nesikrini.

I-Vanilla Framework inikeza izingxenye nezitayela ezibanzi, imibhalo yezinga lebhizinisi, kanye namathuluzi okuhlola ukufinyeleleka okubonakalayo kumadivayisi ahlukene. Abanye bakuthola "kungacacile" ngokubonakalayo, kodwa lokhu kungathathi hlangothi kungenye yamandla ayo kumaphrojekthi ezinkampani kamuva enza ngezifiso ungqimba olubonakalayo phezulu.

Indlela yokukhetha uhlaka lwe-CSS olufanele

Ngale kohlu olungenamkhawulo, okubaluleke ngempela ukuqonda ukuthi ungalukhetha kanjani uhlaka olufanele lwecala ngalinye elithile. Asikho ikhambi elilodwa elifanelana nakho konke.

Qala ngokuhlaziya izidingo nezinhloso zephrojekthi : kuwebhusayithi yomuntu siqu noma ikhasi elincane lokufika, into efana ne-Milligram, i-Spectre, i-Water.css, noma ngisho lutho ngaphandle kwe-CSS yakho ingase yanele. Kuhlelo lokusebenza olukhulu, iphaneli yokuphatha, noma i-SaaS ezokhula kakhulu, i-Bootstrap, i-Foundation, i-Ant Design, i-UIkit, noma ngisho ne-Tailwind kungaba ukukhetha okungcono.

Cabanga ngolwazi lwakho nolwethimba lakho . Uma usaqala nje ngezinhlaka, kungaba ukuhlakanipha ukuqala nge-Bootstrap noma i-Bulma ngaphambi kokudlulela ku-Tailwind noma izixazululo eziyinkimbinkimbi kakhulu. Uma usuvele uyiqonda kahle i-CSS, indlela yokusebenzisa i-utility-first ingathuthukisa kakhulu umkhiqizo wakho esikhathini esimaphakathi.

Futhi cabanga ngezinga lokwenza ngokwezifiso elidingwa yibhrendi . Uma unencwadi yokukhomba ebonakalayo eqinile kakhulu, khetha izinhlaka ezilula ukuzibeka itimu (i-Bootstrap, i-Bulma, i-Semantic UI, i-UIkit). Uma ungakwazi ukusebenzisa isitayela esihlukile kakhulu (isibonelo, i-Material Design), i-Materialize noma i-Ant Design ingakusindisa ezinhlungwini eziningi.

Okokugcina, ungakhohlwa ukuhlola ukusebenza kanye nosayizi wefayela . Ku-SEO kanye ne-UX, i-kilobyte ngayinye iyabalwa. Sebenzisa ukwakheka ngokwezifiso, amathuluzi afana ne-PurgeCSS, noma uhlanganise ngisho nezinhlaka ezincane nekhodi yakho yangokwezifiso ukuze ugweme ukuhudula i-CSS eningi kunokudingekile.

Ekugcineni, indlela ehlakaniphe kakhulu ukuhlola izinhlaka eziningana kuma-prototypes amancane bese unamathela kuleyo efanelana kahle nomsebenzi wakho, izidingo zangempela zephrojekthi, kanye ne-tech stack yakho ekhona. Ukwazi okungenani ezimbalwa zazo, kanye nokuqonda okuqinile kwe-CSS emsulwa, kuzokunikeza ukuguquguquka okukhulu kokubhekana nanoma yiluphi uhlobo lwesixhumi esibonakalayo ohlangana naso.