Lè w ap aprann prensip CSS debaz yo, yo anseye yon moun pou yo ekri estil modilè, ki kapab itilize ankò ak deskriptif pou asire antretyen. Men, lè devlopè yo patisipe nan aplikasyon pou mond reyèl la, li souvan santi li enposib pou ajoute karakteristik UI san estil yo koule nan zòn ki pa vle. Pwoblèm sa a souvan snowballs nan yon bouk pwòp tèt ou-ranpli; estil ki teyorikman sijè a nan yon sèl eleman oswa klas kòmanse parèt kote yo pa fè pati. Sa a fòse pwomotè a kreye selektè menm plis espesifik pou pase sou tèt estil yo fwit, ki Lè sa a, aksidantèlman depase estil mondyal, ak sou sa. Konvansyon non klas rijid yo, tankou BEM, se yon solisyon teyorik pou pwoblèm sa a. Metodoloji BEM (Blòk, Eleman, Modifikatè) se yon fason sistematik pou bay non klas CSS pou asire ke yo ka itilize ankò ak estrikti nan dosye CSS yo. Konvansyon nonmen tankou sa a ka diminye chaj kognitif lè yo itilize langaj domèn pou dekri eleman yo ak eta yo, epi si yo aplike kòrèkteman, ka fè estil pou aplikasyon gwo pi fasil pou kenbe. Nan mond reyèl la, sepandan, li pa toujou travay deyò tankou sa. Priyorite yo ka chanje, epi ak chanjman, aplikasyon an vin konsistan. Ti chanjman nan estrikti HTML la ka mande anpil revizyon non klas CSS. Avèk aplikasyon entèaktif ki trè entèaktif, non klas ki swiv modèl BEM yo ka vin long ak enkonplè (egzanp, app-user-overview__status--is-authentiating), epi yo pa respekte règ nonmen yo konplètman kraze estrikti sistèm nan, kidonk anile benefis li yo. Bay defi sa yo, se pa etonan ke devlopè yo te tounen vin jwenn kad, Tailwind se fondasyon CSS ki pi popilè. Olye ke yo eseye goumen sa ki sanble tankou yon lagè espesifik ki pa genyen ant estil, li pi fasil bay moute sou Cascade CSS la epi sèvi ak zouti ki garanti izolasyon konplè. Devlopè yo apiye plis sou sèvis piblik yo Ki jan nou fè konnen ke gen kèk devlopè ki pike sou evite estil kaskad? Li se ogmantasyon nan zouti "modèn" front-end - tankou CSS-in-JS kad - ki fèt espesyalman pou objektif sa a. Travay ak estil izole ki byen sere nan konpozan espesifik ka sanble tankou yon souf lè fre. Li retire nesesite pou non bagay yo - toujou youn nan travay ki pi rayi ak ki pran tan - epi li pèmèt devlopè yo dwe pwodiktif san yo pa konprann konplètman oswa pwofite benefis eritaj CSS yo. Men, abandone CSS Cascade a vini ak pwòp pwoblèm li yo. Pou egzanp, konpozisyon Styles nan JavaScript mande pou konfigirasyon konstriksyon lou epi souvan mennen nan estil malonnman melanje ak maketing eleman oswa HTML. Olye pou nou konsidere ak anpil atansyon konvansyon nonmen, nou pèmèt bati zouti pou jenere otomatikman seleksyon ak idantifyan pou nou (egzanp, .jsx-3130221066), ki egzije devlopè yo kenbe ak yon lòt pseudo-lang ankò poukont li. (Kòm si chaj kognitif la nan konpreyansyon kisa tout Efè itilizasyon eleman ou a fè pa t deja ase!) Plis abstrè travay nonmen klas yo nan zouti vle di ke debogaj debaz yo souvan limite nan vèsyon aplikasyon espesifik konpile pou devlopman, olye ke ogmante karakteristik navigatè natif natal ki sipòte debogaj vivan, tankou Zouti Developer. Se prèske tankou nou bezwen devlope zouti pou debogaj zouti nou ap itilize pou fè abstrè sa entènèt la deja bay - tout pou dedomajman pou yo kouri lwen "doulè" nan ekri CSS estanda. Erezman, karakteristik CSS modèn yo pa sèlman fè ekri CSS estanda pi fleksib, men tou bay devlopè tankou nou anpil plis pouvwa pou jere kaskad la epi fè li travay pou nou. Kouch Cascade CSS yo se yon bon egzanp, men gen yon lòt karakteristik ki vin yon mank de atansyon etone - byenke sa ap chanje kounye a ke li te fèk vin konpatib Baseline. CSS @scope At-Rule la Mwen konsidere CSS @scope at-rule a kòm yon gerizon potansyèl pou sòt de enkyetid style-fuit-induit nou te kouvri, youn ki pa fòse nou konpwomi avantaj entènèt natif natal pou abstraksyon ak zouti bati siplemantè. "@scope CSS at-rule a pèmèt ou chwazi eleman nan sous-pye bwa DOM espesifik, vize eleman jisteman san yo pa ekri seleksyon ki twò espesifik ki difisil pou pase sou kontwòl, epi san yo pa kouple seleksyon ou yo twò sere ak estrikti DOM la." - MDN
Nan lòt mo, nou ka travay ak estil izole nan ka espesifik san yo pa sakrifye eritaj, kaskad, oswa menm separasyon debaz nan enkyetid.ki te yon prensip ki dire lontan nan devlopman front-end. Anplis de sa, li gen pwoteksyon navigatè ekselan. An reyalite, Firefox 146 te ajoute sipò pou @scope nan mwa desanm, sa ki fè li Baseline konpatib pou premye fwa. Men yon senp konparezon ant yon bouton ki itilize modèl BEM ak règ @scope:
Règ @scope pèmèt pou presizyon ak mwens konpleksite. Pwomotè a pa bezwen kreye limit lè l sèvi avèk non klas yo, ki, an vire, pèmèt yo ekri seleksyon ki baze sou eleman HTML natif natal, kidonk elimine nesesite pou modèl non klas CSS preskriptif. Pa senpleman retire nesesite pou jesyon non klas, @scope ka soulaje laperèz ki asosye ak CSS nan gwo pwojè.
Itilizasyon debaz
Pou kòmanse, ajoute règ @scope nan CSS ou a epi mete yon seleksyon rasin nan ki estil yo pral aplike:
@scope (
Se konsa, pou egzanp, si nou ta dwe sijè ki abòde estil nan yon eleman
@scope (nav) { a { /* Styles lyen nan sijè ki abòde nav */ }
a:active { /* Styles lyen aktif */ }
a:active::before { /* Aktif lyen ak pseudo-eleman pou style siplemantè */ }
@medya (max-lajè: 768px) { a { /* Ajisteman repons */ } } }
Sa a, pou kont li, se pa yon karakteristik inogirasyon. Sepandan, yon dezyèm agiman ka ajoute nan sijè ki abòde lan pou kreye yon fwontyè ki pi ba, efektivman defini pwen kòmansman ak fen sijè ki abòde lan.
/* Nenpòt eleman andedan ul pa pral gen estil yo aplike */ @scope (nav) pou (ul) { yon { font-gwosè: 14px; } }
Pratik sa a rele beye skoping, epi gen plizyè apwòch yon moun ta ka itilize, ki gen ladan yon seri seleksyon ki sanble, trè espesifik makonnen byen sere ak estrikti DOM la, yon :not pseudo-selector, oswa bay non klas espesifik nan eleman ki nan
Konklizyon Kad CSS premye sèvis piblik yo, tankou Tailwind, travay byen pou pwototip ak pwojè ki pi piti yo. Benefis yo byen vit diminye, sepandan, lè yo itilize nan pi gwo pwojè ki enplike plis pase yon koup nan devlopè. Devlopman Front-end te vin de pli zan pli twò konplike nan dènye ane yo, ak CSS pa gen okenn eksepsyon. Pandan ke règ la @scope se pa yon geri-tout, li ka diminye bezwen an pou zouti konplèks. Lè yo itilize nan plas, oswa ansanm ak non klas estratejik, @scope ka fè li pi fasil ak plis plezi yo ekri CSS ki ka kenbe. Pli lwen Lekti
CSS @scope (MDN) "CSS @scope", Juan Diego Rodríguez (CSS-Trick) Nòt lage Firefox 146 (Firefox) Sipò navigatè (CanIUse) Kad CSS popilè (Eta CSS 2024) "C" nan CSS: Cascade", Thomas Yip (CSS-Trick) Entwodiksyon BEM (Jwenn BEM)
