Pophunzira mfundo za CSS zoyambira, munthu amaphunzitsidwa kulemba masitayelo okhazikika, osinthika, komanso ofotokozera kuti atsimikizire kukhazikika. Koma otukula akayamba kukhudzidwa ndi mapulogalamu adziko lapansi, nthawi zambiri zimamveka zosatheka kuwonjezera mawonekedwe a UI popanda masitayilo odumphira m'malo omwe sanafune. Nkhaniyi nthawi zambiri imalowa m'malo odzikwaniritsa; masitayelo omwe amangotengera chinthu chimodzi kapena kalasi amayamba kuwonekera pomwe sakuyenera. Izi zimakakamiza wopanga mapulogalamu kuti apange osankha enanso kuti athe kuwongolera masitayelo omwe adatsitsidwa, omwe mwangozi amapitilira masitayilo apadziko lonse lapansi, ndi zina zotero. Misonkhano ya mayina okhwima a m'kalasi, monga BEM, ndi njira imodzi yothetsera vutoli. Njira ya BEM (Block, Element, Modifier) ndi njira yodziwika bwino yotchulira makalasi a CSS kuti awonetsetse kuti mafayilo a CSS amatha kugwiritsidwanso ntchito. Kutchula mayina monga chonchi kungathe kuchepetsa chidziwitso chazidziwitso pogwiritsira ntchito chinenero chodziwika bwino kuti chifotokoze zinthu ndi chikhalidwe chawo, ndipo ngati zikugwiritsidwa ntchito moyenera, zingapangitse masitayilo azinthu zazikulu kukhala zosavuta kusunga. M'dziko lenileni, komabe, sizikhala choncho nthawi zonse. Zoyambira zimatha kusintha, ndipo ndikusintha, kukhazikitsa kumakhala kosagwirizana. Kusintha kwakung'ono pamapangidwe a HTML kungafune kusinthidwa kwa mayina amtundu wa CSS. Ndi mapulogalamu ogwiritsira ntchito kutsogolo kwambiri, mayina a makalasi omwe amatsatira ndondomeko ya BEM akhoza kukhala aatali komanso osasunthika (mwachitsanzo, app-user-overview__status--is-authenticating), ndipo kusatsatira kwathunthu malamulo otchula mayina kumaphwanya dongosolo la dongosolo, motero kunyalanyaza ubwino wake. Chifukwa cha zovuta izi, n'zosadabwitsa kuti omanga atembenukira kumapangidwe, Tailwind kukhala ndondomeko yotchuka kwambiri ya CSS. M'malo moyesera kumenya nkhondo yomwe ikuwoneka ngati yosatheka kumenya nkhondo pakati pa masitayelo, ndikosavuta kusiya pa CSS Cascade ndikugwiritsa ntchito zida zomwe zimatsimikizira kudzipatula kwathunthu. Madivelopa Amadalira Zambiri Pazantchito Kodi tikudziwa bwanji kuti okonza mapulogalamu ena amafunitsitsa kupewa masitayelo otsika? Ndiko kukwera kwa zida "zamakono" zakutsogolo - monga zomangira za CSS-in-JS - zopangidwira cholinga chimenecho. Kugwira ntchito ndi masitayelo akutali omwe amawunikiridwa mwamphamvu kuzinthu zina kumatha kuwoneka ngati mpweya wabwino. Imachotsa kufunikira kotchula zinthu - ikadali imodzi mwantchito zodedwa kwambiri komanso zowononga nthawi - ndikulola otukula kukhala opindulitsa osamvetsetsa bwino kapena kugwiritsa ntchito phindu la cholowa cha CSS. Koma kusiya CSS Cascade kumabwera ndi zovuta zake. Mwachitsanzo, kupanga masitayelo mu JavaScript kumafuna masinthidwe olemetsa ndipo nthawi zambiri kumapangitsa masitayelo kusakanikirana movutikira ndi zolemba kapena HTML. M'malo moganiziridwa bwino za kutchula mayina, timalola zida zopangira kuti tizisankha okha ndi zozindikiritsa (monga .jsx-3130221066), zomwe zimafuna kuti okonza mapulogalamu azitsatiranso chilankhulo china chabodza. (Monga kuti chidziwitso chakumvetsetsa zomwe chigawo chanu chonse chimagwiritsa ntchito sichinali chokwanira!) Kupititsa patsogolo ntchito yotcha makalasi kukhala zida kumatanthauza kuti kukonza zolakwika nthawi zambiri kumangoperekedwa ku mitundu ina ya mapulogalamu omwe amapangidwa kuti apangidwe, m'malo mogwiritsa ntchito mawonekedwe a msakatuli omwe amathandizira kukonza zolakwika, monga Developer Tools. Zili ngati tikufunika kupanga zida zosinthira zida zomwe tikugwiritsa ntchito kuti tipeze zomwe intaneti imapereka kale - zonse chifukwa chothawa "kuwawa" polemba CSS yokhazikika. Mwamwayi, mawonekedwe amakono a CSS sikuti amangopangitsa kulemba kwa CSS kukhala kosavuta komanso kumapatsa opanga ngati ife mphamvu zochulukirapo zowongolera ndi kutithandiza. CSS Cascade Layers ndi chitsanzo chabwino, koma palinso chinthu china chomwe chimasowa chidwi chodabwitsa - ngakhale izi zikusintha tsopano popeza posachedwapa zakhala zogwirizana. CSS @scope At-Rule Ndimaona CSS @scope at-rule kukhala njira yochiritsira yamtundu wa nkhawa zomwe zakhala zikutuluka, zomwe sizimatikakamiza kunyalanyaza zabwino zapaintaneti zomwe zimangowonjezera komanso zida zowonjezera. "The @scope CSS at-rule imakuthandizani kuti musankhe zinthu m'magawo ang'onoang'ono a DOM, kulunjika zinthu ndendende osalemba zosankhidwa mwapadera kwambiri zomwe ndizovuta kuzilemba, komanso osaphatikiza zosankhidwa zanu mwamphamvu kwambiri ku DOM." MDN
M'mawu ena, titha kugwira ntchito ndi masitayelo odzipatula nthawi zina popanda kupereka cholowa, kutsitsa, kapenanso kulekanitsa nkhawa.zomwe zakhala zikutsogolera kwanthawi yayitali chitukuko chakutsogolo. Komanso, ili ndi msakatuli wabwino kwambiri. M'malo mwake, Firefox 146 idawonjezera thandizo la @scope mu Disembala, ndikupangitsa kuti Baseline igwirizane koyamba. Pano pali kufananitsa kosavuta pakati pa batani pogwiritsa ntchito chitsanzo cha BEM motsutsana ndi lamulo la @scope: