Ҳангоми омӯхтани принсипҳои асосии CSS, ба кас навиштани услубҳои модулӣ, такрорӣ ва тавсифӣ барои таъмини нигоҳдорӣ таълим дода мешавад. Аммо вақте ки таҳиягарон бо замимаҳои воқеии ҷаҳонӣ ҷалб мешаванд, аксар вақт илова кардани хусусиятҳои UI бе сабкҳо ба минтақаҳои ғайричашмдошт ғайриимкон аст. Ин масъала аксар вақт ба як ҳалқаи худфаъолият табдил меёбад; услубҳое, ки аз ҷиҳати назариявӣ ба як унсур ё синф фаро гирифта шудаанд, дар куҷое, ки онҳо тааллуқ надоранд, пайдо мешаванд. Ин таҳиякунандаро маҷбур мекунад, ки селекторҳои боз ҳам мушаххастареро эҷод кунад, то сабкҳои фошшударо аз байн барад, ки онҳо тасодуфан сабкҳои глобалиро бекор мекунанд ва ғайра. Конвенсияҳои қатъии номи синфҳо, ба монанди BEM, як ҳалли назариявии ин масъала мебошанд. Методологияи BEM (Block, Element, Modifier) як роҳи систематикии номгузории синфҳои CSS барои таъмини такрорӣ ва сохтор дар дохили файлҳои CSS мебошад. Номгузории конвенсияҳои монанди ин метавонад сарбории маърифатиро тавассути истифодаи забони домен барои тавсифи унсурҳо ва ҳолати онҳо коҳиш диҳад ва агар дуруст амалӣ карда шавад, метавонад нигоҳдории услубҳоро барои барномаҳои калон осонтар кунад. Бо вуҷуди ин, дар ҷаҳони воқеӣ, на ҳамеша ин тавр кор мекунад. Афзалиятҳо метавонанд тағир ёбанд ва бо тағирот татбиқи он номувофиқ мегардад. Тағироти хурд дар сохтори HTML метавонад ислоҳоти зиёди номи синфи CSS-ро талаб кунад. Бо замимаҳои хеле интерактивии фронталӣ, номҳои синфҳо аз рӯи намунаи BEM метавонанд дароз ва ноустувор шаванд (масалан, app-user-overview__status --аст-аверсификатсия) ва риоя накардани пурра ба қоидаҳои номгузорӣ сохтори системаро вайрон мекунад ва ба ин васила манфиатҳои онро рад мекунад. Бо назардошти ин мушкилот, тааҷҷубовар нест, ки таҳиягарон ба чаҳорчӯбаҳо рӯ овардаанд, Tailwind маъмултарин чаҳорчӯбаи CSS мебошад. Ба ҷои кӯшиши мубориза бо он чизе, ки як ҷанги мушаххаси ғолибнашаванда байни сабкҳо ба назар мерасад, даст кашидан аз CSS Cascade ва истифодаи абзорҳое осонтар аст, ки ҷудоии комилро кафолат медиҳанд. Таҳиягарон бештар ба коммуналӣ такя мекунанд Мо аз куҷо медонем, ки баъзе таҳиягарон мехоҳанд аз услубҳои каскадӣ канорагирӣ кунанд? Ин болоравии асбобҳои "муосир"-и фронталӣ мебошад, ба монанди чаҳорчӯбаҳои CSS-in-JS - махсус барои ин мақсад тарҳрезӣ шудааст. Кор бо услубҳои ҷудогона, ки ба ҷузъҳои мушаххас зич алоқаманданд, метавонад мисли нафаси ҳавои тоза ба назар расад. Он зарурати номгузории чизҳоро аз байн мебарад - ҳоло ҳам яке аз вазифаҳои нафратовар ва вақтталаби пешакӣ - ва ба таҳиягарон имкон медиҳад, ки бидуни пурра дарк ё истифодаи манфиатҳои мероси CSS самаранок бошанд. Аммо даст кашидан аз CSS Cascade бо мушкилоти худ меояд. Масалан, эҷод кардани услубҳо дар JavaScript конфигуратсияҳои вазнинро талаб мекунад ва аксар вақт ба сабкҳо бо аломатгузории ҷузъҳо ё HTML ба таври заҳматталаб омехта мешаванд. Ба ҷои конвенсияҳои номгузории бодиққат баррасӣ, мо ба асбобҳо иҷозат медиҳем, ки селекторҳо ва идентификаторҳоро барои мо худкор созанд (масалан, .jsx-3130221066), ки аз таҳиягарон талаб мекунад, ки боз як забони псевдозабони дигарро дар худ нигоҳ доранд. (Гӯё сарбории маърифатӣ барои фаҳмидани он, ки ҳама эффектҳои истифодаи ҷузъҳои шумо чӣ кор мекунанд, аллакай кофӣ набуданд!) Абстраксияи минбаъдаи кори номгузории синфҳо ба асбобҳо маънои онро дорад, ки ислоҳи асосӣ аксар вақт ба версияҳои мушаххаси барномае, ки барои таҳия тартиб дода шудаанд, маҳдуд аст, на истифода аз хусусиятҳои браузери маҳаллӣ, ки ислоҳи мустақимро дастгирӣ мекунанд, ба монанди Tools Developer. Ин тақрибан ба мо лозим аст, ки асбобҳоеро таҳия кунем, ки абзорҳоеро, ки мо барои абстраксияи он чизе, ки веб аллакай пешкаш мекунанд, таҳия кунем - ҳама ба хотири гурехтани "дард" -и навиштани CSS стандартӣ. Хушбахтона, хусусиятҳои муосири CSS на танҳо навиштани CSS-и стандартиро чандиртар мекунанд, балки ба таҳиягарон мисли мо барои идора кардани каскад қудрати бештар медиҳанд ва онро барои мо кор мекунанд. CSS Cascade Layers як намунаи олиҷаноб аст, аммо як хусусияти дигаре ҳаст, ки ба таври ҳайратангези таваҷҷӯҳ ба вуҷуд меояд - гарчанде ки он ҳоло тағир меёбад, ки ба наздикӣ ба Baseline мувофиқ шудааст. CSS @scope At-Rule Ман CSS @scope at-rule-ро як табобати эҳтимолии як навъ изтироби бо ихроҷи услуб, ки мо фаро гирифтаем, меҳисобам, ки моро маҷбур намекунад, ки бартариҳои веби ватаниро барои абстраксияҳо ва асбобҳои иловагии сохтмон халалдор созем. "Қоидаи @scope CSS ба шумо имкон медиҳад, ки унсурҳоро дар зердарахтҳои мушаххаси DOM интихоб кунед, ба таври дақиқ унсурҳоро бидуни навиштани селекторҳои аз ҳад хосе, ки бартараф карданашон душвор аст ва бидуни пайваст кардани селекторҳои худ ба сохтори DOM хеле зич пайваст кунед." - MDN.
Ба ибораи дигар, мо метавонем бо услубҳои ҷудогона дар ҳолатҳои мушаххас бидуни қурбонии мерос, каскад ва ҳатто ҷудоии асосии нигарониҳо кор кунем.ки прннципи мудимми пеш-рафти тараккиёт буд. Илова бар ин, он фарогирии аълои браузер дорад. Дар асл, Firefox 146 дар моҳи декабр дастгирии @scope-ро илова кард, ки онро бори аввал ба Baseline мувофиқ мекунад. Дар ин ҷо як муқоисаи оддӣ байни тугма бо истифода аз намунаи BEM бо қоидаи @scope:
Қоидаи @scope имкон медиҳад, ки дақиқ бо мураккабии камтар. Таҳиягар дигар лозим нест, ки бо истифода аз номҳои синф сарҳад эҷод кунад, ки дар навбати худ ба онҳо имкон медиҳад, ки дар асоси унсурҳои аслии HTML интихобкунандаҳо нависад ва ба ин васила зарурати намунаҳои номҳои синфии CSS-ро аз байн мебарад. Бо бартараф кардани ниёз ба идоракунии номи синф, @scope метавонад тарси марбут ба CSS-ро дар лоиҳаҳои калон коҳиш диҳад. Истифодаи асосӣ Барои оғоз кардан, қоидаи @scope -ро ба CSS-и худ илова кунед ва як селектори решавӣ гузоред, ки ба он услубҳо фаро гирифта мешаванд: @scope (<интихобкунанда>) { /* Услубҳо ба <интихобкунанда> фаро гирифта шудаанд */ }
Ҳамин тавр, масалан, агар мо услубҳоро ба унсури
@scope (nav) { a { /* Услубҳои истинод дар доираи nav */ }
a:active { /* услубҳои истинодҳои фаъол */ }
a:active::pefor { /* Истиноди фаъол бо псевдоэлемент барои ороиши иловагӣ */ }
@media (барои ҳадди аксар: 768px) { a { /* Танзимоти ҷавобӣ */ } } }
Ин, худ аз худ, хусусияти асоснок нест. Бо вуҷуди ин, далели дуюмро метавон ба миқёс илова кард, то сарҳади поёниро эҷод кунад ва нуқтаҳои ибтидоӣ ва ниҳоии миқёсро самаранок муайян кунад.
/* Ягон унсури дохили ul услубҳои татбиқшавандаро надорад */ @scope (nav) то (ul) { а { андозаи шрифт: 14px; } }
Ин амалия миқёси донут номида мешавад ва якчанд равишҳо мавҷуданд, ки онҳоро метавон истифода бурд, аз ҷумла як қатор селекторҳои шабеҳ ва хеле мушаххас, ки бо сохтори DOM пайваст шудаанд, :на псевдо-селектор ё таъин кардани номҳои мушаххаси синф ба элементҳои дар дохили
Хулоса Чаҳорчӯби аввалини CSS, ба монанди Tailwind, барои прототипсозӣ ва лоиҳаҳои хурдтар хуб кор мекунанд. Манфиатҳои онҳо зуд кам мешаванд, аммо вақте ки дар лоиҳаҳои калонтаре, ки зиёда аз якчанд таҳиягаронро дар бар мегиранд, истифода мешаванд. Рушди фронталӣ дар чанд соли охир хеле мураккабтар шудааст ва CSS низ истисно нест. Гарчанде ки қоидаи @scope ҳамаро табобат намекунад, он метавонад ниёз ба асбобҳои мураккабро коҳиш диҳад. Ҳангоми истифода ё дар баробари номгузории синфҳои стратегӣ, @scope метавонад навиштани CSS-и нигоҳдориро осонтар ва шавқовартар кунад. Хониши минбаъда
CSS @scope (MDN) "CSS @scope", Хуан Диего Родригес (CSS-Tricks) Қайдҳои нашри Firefox 146 (Firefox) Дастгирии браузер (CanIUse) Чаҳорчӯбаҳои маъмули CSS (Ҳолати CSS 2024) "С" дар CSS: Каскад", Томас Йип (CSS-Tricks) Муқаддимаи BEM (Ged BEM)
