އަސާސީ ސީއެސްއެސްގެ އުސޫލުތައް ދަސްކުރާއިރު، ބެލެހެއްޓޭނެ ގޮތް ކަށަވަރުކުރުމަށްޓަކައި މޮޑިއުލަރ، ރީޔޫޒް ކުރެވޭ، އަދި ޑިސްކްރިޕްޓިވް ސްޓައިލްތައް ލިޔަން ދަސްކޮށްދެއެވެ. އެކަމަކު ޑިވެލޮޕަރުން ހަގީގީ ދުނިޔޭގެ އެޕްލިކޭޝަންތަކާ ގުޅިގެން އުޅޭއިރު، ގިނަ ފަހަރަށް ހީވަނީ ނޭދެވޭ ދާއިރާތަކަށް ސްޓައިލްތައް ލީކު ނުވެ ޔޫއައި ފީޗާސް އިތުރުކުރުމަކީ ކުރެވޭނެ ކަމެއް ނޫން ކަމަށެވެ. މި މައްސަލަ ގިނަ ފަހަރަށް ސްނޯބޯލް ވެގެން ދަނީ އަމިއްލައަށް ފުރިހަމަވާ ލޫޕަކަށް؛ styles that are theoretically scoped to one element or class start showing up where they don’t belong. މިކަމުގެ ސަބަބުން ޑިވެލޮޕަރަށް މަޖުބޫރުވަނީ ލީކް ވެފައިވާ ސްޓައިލްތައް އޮވަރރައިޑް ކުރުމަށްޓަކައި އިތުރު ވަކި ސެލެކްޓަރުތަކެއް އުފެއްދުމަށެވެ، އެއަށްފަހު އެކްސިޑެންޓްވެގެން ގްލޯބަލް ސްޓައިލްތައް އޮވަރރައިޑްކޮށް، މިހެންގޮސް. ބީއީއެމް ފަދަ ރިޖިޑް ކްލާސް ނަން ކޮންވެންޝަންތަކަކީ މި މައްސަލައަށް އެއް ތިއަރީ ހައްލެވެ. ބީއީއެމް (ބްލޮކް، އެލިމެންޓް، މޮޑިފައިއަރ) މެތޮޑޮލޮޖީއަކީ ސީއެސްއެސް ފައިލްތަކުގެ ތެރޭގައި ރީޔޫޒަބިލިޓީއާއި ސްޓްރަކްޗަރ ކަށަވަރުކުރުމަށްޓަކައި ސީއެސްއެސް ކްލާސްތަކަށް ނަން ދިނުމުގެ ނިޒާމީ ގޮތެކެވެ. މިފަދަ ނަން ދިނުމުގެ ކޮންވެންޝަންތަކުގެ ސަބަބުން އެލިމެންޓްތަކާއި އެތަކެތީގެ ހާލަތު ބަޔާންކުރުމަށް ޑޮމެއިން ލޭންގުއޭޖް ލީވަރކޮށްގެން ކޮގްނިޓިވް ލޯޑް ކުޑަކުރެވި، ރަނގަޅަށް ތަންފީޒުކުރެވިއްޖެނަމަ ބޮޑެތި އެޕްލިކޭޝަންތަކަށް ސްޓައިލްތައް ބެލެހެއްޓުމަށް ފަސޭހަވެގެންދެއެވެ. ނަމަވެސް ހަގީގީ ދުނިޔޭގައި އަބަދު އެގޮތަށް ކަންތައް ނުވާނެއެވެ. އިސްކަންދޭ ކަންތައްތައް ބަދަލުވެދާނެ ކަމަށާއި، ބަދަލާއެކު ތަންފީޒުކުރުން އެއްގޮތް ނުވާ ކަމަށް ވެސް ވިދާޅުވި އެވެ. އެޗްޓީއެމްއެލް ސްޓްރަކްޗަރ އަށް ކުދިކުދި ބަދަލުތައް ގެނައުމަށް ސީއެސްއެސް ކްލާސް ނަން ގިނަ ރިވިޝަންތަކެއް ކުރަން ޖެހިދާނެއެވެ. ވަރަށް އިންޓަރެކްޓިވް ފްރަންޓް އެންޑް އެޕްލިކޭޝަންތަކާއެކު، ބީއީއެމް ޕެޓަރންއަށް ތަބާވާ ކްލާސް ނަންތައް ދިގުވެ، އުނދަގޫވެދާނެ (އެބަހީ، app-user-overview__status--is-authenticating)، އަދި ނަން ދިނުމުގެ އުސޫލުތަކަށް ފުރިހަމައަށް ތަބާނުވުމުން ސިސްޓަމްގެ އޮނިގަނޑު މުގުރާލައި، އޭގެ ފައިދާ ނަފީވެއެވެ. މި ގޮންޖެހުންތަކަށް ބަލާއިރު، ޑިވެލޮޕަރުން ފްރޭމްވޯކްތަކަށް އެނބުރި ދިއުމަކީ އަޖައިބެއް ނޫން، ޓޭލްވިންޑް އަކީ އެންމެ މަގުބޫލު ސީއެސްއެސް ފްރޭމްވޯކެވެ. ސްޓައިލްތަކުގެ މެދުގައި ކާމިޔާބު ނުކުރެވޭ ސްޕެސިފިކްޓީ ހަނގުރާމައެއް ކަހަލަ ކަމެއް ކުރަން މަސައްކަތް ކުރުމުގެ ބަދަލުގައި ސީއެސްއެސް ކެސްކޭޑް ދޫކޮށްލާފައި ފުރިހަމަ އެކަހެރިކަން ކަށަވަރުކޮށްދޭ ޓޫލްތައް ބޭނުން ކުރުމަކީ ފަސޭހަ ކަމެކެވެ. ޑިވެލޮޕަރުން ލީން މޯރ އޮން ޔުޓިލިޓީސް ބައެއް ޑިވެލޮޕަރުން ކެސްކޭޑް ސްޓައިލްތަކުން ދުރުހެލިވުމަށް ޝައުގުވެރިވާކަން އަޅުގަނޑުމެންނަށް އެނގޭނީ ކިހިނެއް ހެއްޔެވެ؟ އެއީ “ޒަމާނީ” ފްރަންޓް އެންޑް ޓޫލިންގ — ސީއެސްއެސް-އިން-ޖޭއެސް ފްރޭމްވޯކްސް ފަދައިން — އެކަމަށް ޚާއްޞަކޮށް ފަރުމާކޮށްފައިވާ އުފެދުމެވެ. ވަކި ކޮމްޕޯނެންޓްތަކަށް ވަރުގަދައަށް ސްކޯޕްކޮށްފައިވާ އެކަހެރި ސްޓައިލްތަކާއެކު މަސައްކަތް ކުރުމަކީ ތާޒާ ވައިގެ ނޭވާއެއް ކަމުގައި ހީވެދާނެއެވެ. އެއީ ކަންކަމަށް ނަން ކިޔުމުގެ ބޭނުން ނައްތާލާ — އަދިވެސް އެންމެ ނަފްރަތު ކުރެވޭ އަދި ވަގުތު ނަގާ އެއް ފްރަންޓް އެންޑް ޓާސްކް — އަދި ޑިވެލޮޕަރުންނަށް ސީއެސްއެސް އިންހެރިޓޭޝަންގެ ފައިދާ ފުރިހަމައަށް ނުވިސްނި ނުވަތަ ލީވަރ ނުކޮށް އުފެއްދުންތެރި ވުމުގެ ފުރުސަތު ލިބިގެންދާ ކަމެކެވެ. އެކަމަކު ސީއެސްއެސް ކެސްކޭޑް ޑިޗް ކުރުމަކީ އޭގެ އަމިއްލަ މައްސަލަތަކެއް ވެސް ދިމާވާ ކަމެކެވެ. މިސާލަކަށް ޖާވާސްކްރިޕްޓްގައި ސްޓައިލްތައް ކޮމްޕޯސް ކުރުމަށް ބޮޑެތި ބިލްޑް ކޮންފިގްރޭޝަންތައް ބޭނުންވާއިރު، ގިނަ ފަހަރަށް ސްޓައިލްތައް ކޮމްޕޮނެންޓް މާކަޕް ނުވަތަ އެޗްޓީއެމްއެލް އާއި އުނދަގޫ ގޮތަކަށް ގުޅިފައި ހުރެއެވެ. ފަރުވާތެރިކަމާއެކު ވިސްނާފައިވާ ނަން ދިނުމުގެ މުއާހަދާތަކުގެ ބަދަލުގައި، އަޅުގަނޑުމެންނަށް ސެލެކްޓަރސް އަދި އައިޑެންޓިފައިޓަރސް (އެބަހީ، .jsx-3130221066) އޮޓޯޖެނެރޭޓް ކުރުމަށް ބިލްޑް ޓޫލްތަކަށް ހުއްދަދެމެވެ. (ތިބާގެ ހުރިހާ ކޮމްޕޮނެންޓްގެ ޔޫސްއެފެކްޓްސް އިން ކުރާ ކަންތައްތައް ވިސްނުމުގެ ކޮގްނިޓިވް ލޯޑް މިހާރުވެސް ފުދޭވަރުގެ ކަމެއް ނޫންހެން!) ކްލާސްތަކަށް ޓޫލިންގ އަށް ނަން ދިނުމުގެ މަސައްކަތް އިތުރަށް އެބްސްޓްރެކްޓް ކުރުމުގެ މާނައަކީ، ޑިވެލޮޕަރ ޓޫލްސް ފަދަ ލައިވް ޑިބަގިންގ އަށް ސަޕޯޓްކުރާ ނެޓިވް ބްރައުޒާ ފީޗާސް ލީވަރ ކުރުމުގެ ބަދަލުގައި، ގިނަ ފަހަރަށް އަސާސީ ޑިބަގިންގ ޑިވެލޮޕަރ ޓޫލްސް ފަދަ ލައިވް ޑިބަގިންގ އަށް ސަޕޯޓްކުރާ ނެޓިވް ބްރައުޒާ ފީޗާސް ލީވަރ ކުރުމުގެ ބަދަލުގައި، ޑިވެލޮޕްމަންޓަށް ކޮމްޕައިލް ކުރެވިފައިވާ ވަކި އެޕްލިކޭޝަން ވަރޝަންތަކަށް ކޮންސްޓްރެއިން ކުރެވެއެވެ. އެއީ ގާތްގަނޑަކަށް ވެބުން މިހާރުވެސް ފޯރުކޮށްދޭ އެއްޗެހި އެބްސްޓްރެކްޓް ކުރުމަށް އަޅުގަނޑުމެން ބޭނުންކުރާ ޓޫލްތައް ޑިބަގް ކުރުމަށް ޓޫލްތައް ޑިވެލޮޕް ކުރަން ޖެހޭ ކަހަލަ ކަމެއް — މި ހުރިހާ ކަމެއް ވެސް ކުރެވެނީ ސްޓޭންޑަރޑް ސީއެސްއެސް ލިޔުމުގެ “ވޭނުން” ފިލައިގެން ދިއުމުގެ ބޭނުމުގައެވެ. Luckily, modern CSS features not only make writing standard CSS more flexible but also give developers like us a great deal more power to manage the cascade and make it work for us. ސީއެސްއެސް ކެސްކޭޑް ލޭޔަރސް އަކީ މޮޅު މިސާލެއް ނަމަވެސް ހައިރާން ކުރުވަނިވި ސަމާލުކަމެއް ނުލިބޭ އެހެން ފީޗާއެއް އެބައޮތް — ދާދިފަހުން ބޭސްލައިން ކޮމްޕެޓިބަލް ވެފައިވާތީ މިހާރު އެކަން ބަދަލުވަމުން އަންނަ ނަމަވެސް. އެ ސީއެސްއެސް @scope އެޓް-ރޫލް އަޅުގަނޑު ދެކެނީ ސީއެސްއެސް @scope at-rule އަކީ އަޅުގަނޑުމެން ކަވަރުކޮށްފައިވާ ސްޓައިލް ލީކް އިންޑައުސްޑް އެންޒައިޓީއަށް ލިބޭނެ ފަރުވާއެއް ކަމުގައި، އެބްސްޓްރެކްޝަންސް އަދި އެކްސްޓްރާ ބިލްޑް ޓޫލިންގ އަށް ނެޓިވް ވެބް އެޑްވާންޓޭޖްސް ކޮމްޕްރޮމައިޒް ކުރަން މަޖުބޫރު ނުކުރާ އެއްޗެކެވެ. “@scope CSS at-rule ގެ ސަބަބުން ވަކި ޑީއޯއެމް ސަބްޓްރީތަކުގައި ހުންނަ އެލިމެންޓްތައް ސެލެކްޓް ކުރެވޭއިރު، އޮވަރރައިޑް ކުރަން އުނދަގޫ މާ ވަކި ސެލެކްޓަރުތައް ނުލިޔެ، އަދި ޑީއޯއެމް ސްޓްރަކްޗާއާ މާ ބާރަށް ސެލެކްޓަރުތައް ކަޕްލް ނުކޮށް އެލިމެންޓްތަކަށް ސީދާ ޓާގެޓް ކުރެވޭނެއެވެ.”— އެމްޑީއެން
އެހެން ގޮތަކަށް ބުނާނަމަ، ވާރުތަވެރިކަން، ކެސްކޭޑިންގ، ނުވަތަ ކަންބޮޑުވުންތަކުގެ އަސާސީ ވަކިކުރުން ވެސް ގުރުބާން ނުކޮށް، ވަކި ހާލަތްތަކެއްގައި އެކަހެރި ސްޓައިލްތަކާއެކު މަސައްކަތް ކުރެވިދާނެއެވެއެއީ ފްރަންޓް އެންޑް ޑިވެލޮޕްމަންޓްގެ ދިގު މުއްދަތަކަށް މަގުދައްކާ އުސޫލެކެވެ. ޕްލަސް، އެއީ މޮޅު ބްރައުޒާ ކަވަރޭޖެއް ލިބިފައިވާ އެއްޗެކެވެ. ހަގީގަތުގައި ފަޔަރފޮކްސް 146 އިން ޑިސެމްބަރު މަހު @scope އަށް ސަޕޯޓް އިތުރުކޮށް، ފުރަތަމަ ފަހަރަށް ބޭސްލައިން ކޮމްޕެޓިބަލް ވެގެން ދިޔައެވެ. Here is a simple comparison between a button using the BEM pattern versus the @scope rule:
<ސްޓައިލް> އެވެ .button .button__text { /* ބަޓަން ޓެކްސްޓް ސްޓައިލްސް */ } .button .button__icon { /* ބަޓަން އައިކޮން ސްޓައިލްސް */ } .button--primary { ޕްރައިމަރީ ބަޓަން ސްޓައިލްސް */ } އެވެ
<ބަޓަން ކްލާސް="ޕްރައިމަރީ-ބަޓަން"> އަހަރެންނަށް ކްލިކް ކުރާށެވެ <ސްޕަން>→ އެވެ
<ސްޓައިލް> އެވެ @ސްކޯޕް (.ޕްރައިމަރީ-ބަޓަން) { span:first-child { /* ބަޓަން ޓެކްސްޓް ސްޓައިލްސް */ } span:last-child { /* ބަޓަން އައިކޮން ސްޓައިލްސް */ } } އެވެ
@scope އުސޫލުން ކޮމްޕްލެކްސިޓީ މަދު ޕްރެސިޝަން އެއް ލިބިގެންދެއެވެ. ޑިވެލޮޕަރަށް މިހާރު ކްލާސް ނަންތައް ބޭނުންކޮށްގެން ބައުންޑަރީސް އުފައްދަން ނުޖެހޭއިރު، މިއީ އަނެއްކާވެސް ނެޓިވް އެޗްޓީއެމްއެލް އެލިމެންޓްތަކުގެ މައްޗަށް ބިނާކޮށް ސެލެކްޓަރސް ލިޔުމުގެ ފުރުސަތު ލިބިގެންދާ ކަމެކެވެ. ހަމައެކަނި ކްލާސް ނަން މެނޭޖްކުރުމުގެ ބޭނުން ނައްތާލުމުން، @scope އިން ބޮޑެތި ޕްރޮޖެކްޓްތަކުގައި ސީއެސްއެސް އާއި ގުޅިފައިވާ ބިރުވެރިކަން ކުޑަކުރެވޭނެއެވެ. އަސާސީ ބޭނުންކުރުން ފެށުމަށްޓަކައި، ތިބާގެ ސީއެސްއެސް އަށް @scope އުސޫލު އިތުރުކޮށް، ސްކޯޕް ކުރެވޭނީ ކޮން ސްޓައިލްތަކަށް ރޫޓް ސެލެކްޓަރެއް ޖައްސާށެވެ: @ސްކޯޕް (<ސެލެކްޓަރ>) { /* <ސެލެކްޓަރ> އަށް ސްކޯޕް ކުރެވިފައިވާ ސްޓައިލްތައް */ }
So, for example, if we were to scope styles to a
@ސްކޯޕް (ނަވް) { a { /* nav ސްކޯޕްގެ ތެރޭގައި ސްޓައިލްތައް ލިންކްކުރުން */ }
a:active { /* އެކްޓިވް ލިންކް ސްޓައިލްސް */ }
a:active::before { /* އިތުރު ސްޓައިލިންގ އަށް ސޫޑޯ-އެލިމެންޓް އާއި އެކު އެކްޓިވް ލިންކް */ }
@media (މެކްސް-ވިޑްތް: 768px) { a { /* ރެސްޕޮންސިވް އެޖެސްޓްމަންޓްސް */ } } }
މިއީ، އަމިއްލައަށް ބަލާއިރު، ބިންގާ އަޅާނެ ސިފައެއް ނޫނެވެ. ނަމަވެސް ދެވަނަ ޙުއްޖަތެއް ސްކޯޕަށް އިތުރުކޮށްގެން ތިރި ބައުންޑަރީއެއް އުފެދި، ސްކޯޕްގެ ފެށޭ ހިސާބުތަކާއި ނިމޭ ހިސާބުތައް ފައިދާހުރި ގޮތެއްގައި ކަނޑައެޅިދާނެއެވެ.
/* ul ގެ ތެރޭގައިވާ އެއްވެސް އެލިމެންޓެއްގައި ސްޓައިލްތައް އެޕްލައި ނުކުރެވޭނެ */ @scope (nav) އިން (ul) { a { ފޮންޓް-ސައިޒް: 14px؛ } }
މި ޢަމަލަށް ކިޔަނީ ޑޮނަޓް ސްކޯޕިންގ ކަމަށާއި، ޑީއޯއެމް ސްޓްރަކްޗަރ އާއި ވަރުގަދައަށް ގުޅިފައިވާ އެއްގޮތް، ވަރަށް ވަކި ސެލެކްޓަރތަކެއްގެ ސިލްސިލާއެއް، :not pseudo-selector، ނުވަތަ ތަފާތު ސީއެސްއެސް ޙައްލުކުރުމަށްޓަކައި
/*
ނިންމުން ޓޭލްވިންޑް ފަދަ ޔުޓިލިޓީ ފަސްޓް ސީއެސްއެސް ފްރޭމްވޯކްސް ޕްރޮޓޯޓައިޕިންގ އާއި ކުދި ޕްރޮޖެކްޓްތަކަށް ރަނގަޅަށް މަސައްކަތް ކުރެއެވެ. ނަމަވެސް ދެތިން ޑިވެލޮޕަރުންނަށް ވުރެ ގިނަ ޑިވެލޮޕަރުން ބައިވެރިވާ ބޮޑެތި މަޝްރޫއުތަކުގައި ބޭނުން ކުރުމުން އެމީހުންގެ ފައިދާ ވަރަށް އަވަހަށް ކުޑަވެގެންދެއެވެ. ފްރަންޓް އެންޑް ޑިވެލޮޕްމަންޓް މިދިޔަ މަދު އަހަރުތަކުގައި މާ ކޮމްޕްލިކޭޓެޑް ވެފައިވާއިރު، ސީއެސްއެސް ވެސް މިކަމުން އިސްތިސްނާއެއް ނުވެ އެވެ. @scope އުސޫލަކީ ހުރިހާ ފަރުވާއެއް ނޫން ނަމަވެސް، ކޮމްޕްލެކްސް ޓޫލިންގ ގެ ބޭނުން ކުޑަކުރެވޭނެ އުސޫލެކެވެ. ސްޓްރެޓެޖިކް ކްލާސް ނަން ދިނުމުގެ ބަދަލުގައި ނުވަތަ އެއާއެކު ބޭނުން ކުރާއިރު، @scope އިން ބެލެހެއްޓޭ ސީއެސްއެސް ލިޔުމަށް ފަސޭހަ އަދި މަޖާ ކޮށްދެވިދާނެ އެވެ. އިތުރަށް ކިޔެވުން
ސީއެސްއެސް @ސްކޯޕް (އެމްޑީއެން) “ސީއެސްއެސް @ސްކޯޕް”، ޚުއާން ޑިއޭގޯ ރޮޑްރިގޭޒް (ސީއެސްއެސް-ޓްރިކްސް) ފަޔަރފޮކްސް 146 ރިލީޒް ނޯޓްސް (ފަޔަރފޮކްސް) ބްރައުޒާ ސަޕޯޓް (ކެންއައިޔޫސް) މަޝްހޫރު ސީއެސްއެސް ފްރޭމްވޯކްސް (ސްޓޭޓް އޮފް ސީއެސްއެސް 2024) “ސީއެސްއެސް: ކެސްކޭޑްގައިވާ “ސީ””، ތޯމަސް ޔިޕް (ސީއެސްއެސް-ޓްރިކްސް) ބީއީއެމް ތަޢާރަފް (ބީއީއެމް ހޯދުން)
