የመሠረታዊ CSS መርሆዎችን በሚማርበት ጊዜ አንድ ሰው ሞጁል ፣ ተደጋጋሚ ጥቅም ላይ ሊውል የሚችል እና ገላጭ ዘይቤዎችን እንዲጽፍ ይማራል ፣ ይህም ተጠብቆ እንዲቆይ ለማድረግ። ነገር ግን ገንቢዎች በገሃዱ ዓለም መተግበሪያዎች ሲሳተፉ፣ ቅጦች ወደ ወዳልተፈለገ ቦታ ሳይገቡ የUI ባህሪያትን ማከል ብዙ ጊዜ የማይቻል ሆኖ ይሰማል። ይህ ጉዳይ ብዙውን ጊዜ የበረዶ ኳሶችን ወደ እራስ-ሙላ ዑደት ውስጥ ያስገባል; ለአንድ አካል ወይም ክፍል በንድፈ ሀሳብ የተቀመጡ ቅጦች የሌሉበት መታየት ይጀምራሉ። ይህ ገንቢው የፈሱትን ቅጦች ለመሻር ይበልጥ ልዩ የሆኑ መራጮችን እንዲፈጥር ያስገድደዋል፣ይህም በአጋጣሚ አለምአቀፍ ቅጦችን ይሽራል። እንደ BEM ያሉ ጠንካራ የመደብ ስም ስምምነቶች ለዚህ ጉዳይ አንድ ንድፈ ሃሳብ መፍትሄዎች ናቸው። የBEM (Block, Element, Modifier) ዘዴ በCSS ፋይሎች ውስጥ እንደገና ጥቅም ላይ መዋልን እና መዋቅሩን ለማረጋገጥ የሲኤስኤስ ክፍሎችን ለመሰየም ስልታዊ መንገድ ነው። እንደዚህ አይነት ስምምነቶችን መሰየም የጎራ ቋንቋን በመጠቀም አካላትን እና ሁኔታቸውን ለመግለጽ የግንዛቤ ጫናን ሊቀንስ ይችላል፣ እና በትክክል ከተተገበሩ ለትላልቅ መተግበሪያዎች ቅጦችን ለማቆየት ቀላል ያደርገዋል። በገሃዱ ዓለም ግን ሁልጊዜ እንደዚህ አይሰራም. ቅድሚያ የሚሰጣቸው ነገሮች ሊለወጡ ይችላሉ፣ እና ከለውጥ ጋር፣ ትግበራው ወጥነት የለውም። በኤችቲኤምኤል መዋቅር ላይ የተደረጉ ትናንሽ ለውጦች ብዙ የሲኤስኤስ ክፍል ስም ማሻሻያ ሊፈልጉ ይችላሉ። በጣም በይነተገናኝ የፊት-መጨረሻ መተግበሪያዎች፣ የ BEM ስርዓተ-ጥለትን የሚከተሉ የክፍል ስሞች ረጅም እና የማይጠቅሙ ሊሆኑ ይችላሉ (ለምሳሌ፣ መተግበሪያ-ተጠቃሚ-አጠቃላይ እይታ__ሁኔታ --አረጋጋጭ ነው)፣ እና የስያሜ ህጎቹን ሙሉ በሙሉ አለማክበር የስርዓቱን መዋቅር ይሰብራል፣ በዚህም ጥቅሞቹን ይጎዳል። ከእነዚህ ተግዳሮቶች አንጻር፣ ገንቢዎች ወደ ማዕቀፎች መመለሳቸው ምንም አያስደንቅም፣ Tailwind በጣም ታዋቂው የCSS ማዕቀፍ ነው። በቅጦች መካከል የማይሸነፍ የልዩነት ጦርነት የሚመስለውን ለመዋጋት ከመሞከር ይልቅ በCSS Cascade ላይ መተው እና ሙሉ በሙሉ መገለልን የሚያረጋግጡ መሳሪያዎችን መጠቀም ቀላል ነው። ገንቢዎች በመገልገያዎች ላይ የበለጠ ይደግፋሉ አንዳንድ ገንቢዎች የተበላሹ ቅጦችን ለማስወገድ እንደሚፈልጉ እንዴት እናውቃለን? እንደ CSS-in-JS ማዕቀፎች - ለዚያ ዓላማ ተብሎ የተነደፈው "ዘመናዊ" የፊት-መጨረሻ መሣሪያ መጨመር ነው. ከተለዩ አካላት ጋር በጥብቅ ከተቀመጡት ገለልተኛ ቅጦች ጋር መሥራት እንደ ንጹህ አየር እስትንፋስ ሊመስል ይችላል። ነገሮችን መሰየምን አስፈላጊነት ያስወግዳል - አሁንም በጣም ከሚጠሉት እና ብዙ ጊዜ የሚወስዱ የፊት-መጨረሻ ስራዎች - እና ገንቢዎች የሲኤስኤስ ውርስ ጥቅሞችን ሙሉ በሙሉ ሳይረዱ ወይም ሳይጠቀሙ ውጤታማ እንዲሆኑ ያስችላቸዋል። ነገር ግን የሲኤስኤስ ካስኬድን መጣል ከራሱ ችግሮች ጋር አብሮ ይመጣል። ለምሳሌ፣ በጃቫ ስክሪፕት ውስጥ ቅጦችን መፃፍ ከባድ የግንባታ ውቅሮችን ይፈልጋል እና ብዙውን ጊዜ ከክፍል ማርክ ወይም ኤችቲኤምኤል ጋር ወደ ሚጣመሩ ቅጦች ይመራል። የስም ስምምነቶችን በጥንቃቄ ከማሰብ ይልቅ የግንባታ መሳሪያዎች መራጮችን እና መለያዎችን በራስ-ሰር እንዲፈጥሩን እንፈቅዳለን (ለምሳሌ፦ .jsx-3130221066)፣ ገንቢዎች በራሱ ውስጥ ሌላ የውሸት ቋንቋ እንዲቀጥሉ እንፈልጋለን። (ሁሉም የእርስዎ ክፍሎች ጥቅም ውጤቶች ምን እንደሚሠሩ የመረዳት የእውቀት (ኮግኒቲቭ) ሸክም በቂ እንዳልሆኑ!) ክፍሎችን በመሳሪያነት መሰየምን የበለጠ ማጠቃለል ማለት እንደ ገንቢ መሳሪያዎች ያሉ የቀጥታ ማረምን የሚደግፉ ቤተኛ አሳሽ ባህሪያትን ከመጠቀም ይልቅ ለልማት በተዘጋጁ የተወሰኑ የመተግበሪያ ስሪቶች ላይ መሰረታዊ ማረም ማለት ነው። እኛ የምንጠቀምባቸውን መሳሪያዎች ለማረም የምንጠቀምባቸውን መሳሪያዎች ለማረም የሚያስፈልገንን ያህል ነው ድሩ አስቀድሞ የሚያቀርበውን ረቂቅ ለማረም - ሁሉም መደበኛ ሲ ኤስ ኤስ ከመጻፍ "ህመም" ለመሸሽ ነው። እንደ እድል ሆኖ፣ ዘመናዊ የሲኤስኤስ ባህሪያት መደበኛ ሲኤስኤስን መፃፍ የበለጠ ተለዋዋጭ ያደርጉታል ነገር ግን እንደ እኛ ላሉ ገንቢዎች ፏፏቴውን እንዲያስተዳድሩ እና ለእኛ እንዲሰራ ትልቅ ኃይል ይሰጡታል። የሲኤስኤስ ካስኬድ ንብርብሮች በጣም ጥሩ ምሳሌ ናቸው፣ ነገር ግን የሚያስገርም ትኩረት እጦት የሚያገኝ ሌላ ባህሪ አለ - ምንም እንኳን አሁን በቅርቡ ከቤዝላይን ጋር ተኳሃኝ ሆኖ እየተለወጠ ቢሆንም። CSS @scope At-Rule CSS @scope at-rule ለሸፈነነው አይነት ቅጥ-ልቅነት-አስጨናቂ ጭንቀቶች እንደ እምቅ ፈውስ እቆጥረዋለሁ፣ ይህም የአካባቢያዊ ድር ጥቅማ ጥቅሞችን ለአብስትራክት እና ለተጨማሪ የግንባታ መሳሪያዎች እንድንጎዳ አያስገድደንም። "የ @scope CSS at-rule በተወሰኑ የ DOM ንዑስ ዛፎች ውስጥ ኤለመንቶችን እንድትመርጡ ያስችሎታል፣ ከመጠን በላይ ልዩ የሆኑ መራጮችን ለመሻር አስቸጋሪ የሆኑ ነገሮችን ሳይፅፉ እና መራጮችዎን ከDOM መዋቅር ጋር በጥብቅ ሳያጣምሩ በትክክል ኢላማ ያድርጉ።"
በሌላ አነጋገር፣ ውርስ ሳንቆርጥ፣ ሳንቆርጥ፣ ወይም የጭንቀት መሠረታዊ መለያየትን ሳናደርግ በልዩ ሁኔታዎች በተገለሉ ቅጦች መስራት እንችላለን።የፊት-ፍጻሜ ልማት የረዥም ጊዜ መሪ መርህ ነው። በተጨማሪም, በጣም ጥሩ የአሳሽ ሽፋን አለው. በእርግጥ ፋየርፎክስ 146 በዲሴምበር ውስጥ ለ @scope ድጋፍን ጨምሯል፣ ይህም Baselineን ለመጀመሪያ ጊዜ ተኳሃኝ አድርጎታል። የ BEM ስርዓተ-ጥለትን ከ@scope ደንብ ጋር በሚመሳሰል አዝራር መካከል ቀላል ንጽጽር እነሆ፡-
የ @scope ህግ ባነሰ ውስብስብነት ትክክለኛነትን ይፈቅዳል። ገንቢው ከአሁን በኋላ የክፍል ስሞችን በመጠቀም ድንበሮችን መፍጠር አያስፈልገውም፣ ይህም በተራው፣ ቤተኛ ኤችቲኤምኤል አባሎችን መሰረት በማድረግ መራጮችን እንዲጽፉ ያስችላቸዋል፣ በዚህም የቅድሚያ የ CSS ክፍል ስም ቅጦችን ያስወግዳል። በቀላሉ የክፍል ስም አስተዳደርን ፍላጎት በማስወገድ @scope በትልልቅ ፕሮጀክቶች ውስጥ ከሲኤስኤስ ጋር የተያያዘውን ፍርሃት ሊያቃልል ይችላል. መሰረታዊ አጠቃቀም ለመጀመር የ@scope ደንቡን ወደ የእርስዎ CSS ያክሉ እና ለየትኞቹ ቅጦች የሚካፈሉበትን ስርወ መራጭ ያስገቡ፡ @scope (<መራጭ>) { /* ለ <መራጭ> */ የተቀመጡ ቅጦች }
ስለዚህ፣ ለምሳሌ፣ ቅጦችን ወደ
@scope (nav) { በናቭ ወሰን ውስጥ የ{/* አገናኝ ቅጦች */}
a: ገቢር {/* ንቁ የአገናኝ ቅጦች */}
a:active::ከዚህ በፊት ከ{/* ገባሪ አገናኝ ከሐሰተኛ ኤለመንት ጋር ለተጨማሪ የቅጥ አሰራር */}
@ሚዲያ (ከፍተኛ ስፋት፡ 768 ፒክስል) { አንድ {/* ምላሽ ሰጪ ማስተካከያዎች */} } }
ይህ በራሱ, የመሬት አቀማመጥ ባህሪ አይደለም. ሆኖም ግን, ዝቅተኛ ወሰን ለመፍጠር ሁለተኛ ክርክር ወደ ወሰን መጨመር ይቻላል, የቦታውን መጀመሪያ እና የመጨረሻ ነጥቦችን በትክክል ይገልፃል.
/* በ ul ውስጥ ያለ ማንኛውም አካል የተተገበሩ ቅጦች አይኖረውም */ @scope (nav) ወደ (ul) { አ { የቅርጸ-ቁምፊ መጠን: 14 ፒክስል; } }
ይህ ልምምድ ዶናት ስኮፒንግ ተብሎ ይጠራል፣ እና አንድ ሊጠቀምባቸው የሚችላቸው በርካታ አቀራረቦች አሉ፣ ተከታታይ ተመሳሳይ፣ በጣም ልዩ የሆኑ ከDOM መዋቅር ጋር ተጣምረው፣ ሀ : አስመሳይ-መራጭ ያልሆነ፣ ወይም ልዩ ልዩ CSSን ለመቆጣጠር በ
/* በ
መደምደሚያ የመገልገያ-የመጀመሪያው የCSS ማዕቀፎች፣ እንደ Tailwind፣ ለፕሮቶታይፕ እና ለትናንሽ ፕሮጀክቶች ጥሩ ይሰራሉ። ነገር ግን ከሁለት በላይ ገንቢዎችን በሚያካትቱ ትላልቅ ፕሮጀክቶች ውስጥ ጥቅም ላይ ሲውል የእነሱ ጥቅም በፍጥነት ይቀንሳል። የፊት-ፍጻሜ ልማት ባለፉት ጥቂት ዓመታት ውስጥ ከጊዜ ወደ ጊዜ እየተወሳሰበ መጥቷል፣ እና CSS ከዚህ የተለየ አይደለም። የ @scope ደንቡ ሁሉም ፈውስ ባይሆንም ውስብስብ የመሳሪያዎችን ፍላጎት ሊቀንስ ይችላል። @scope ከስትራቴጂክ ክፍል ስያሜ ጋር በምትኩ ወይም ጎን ለጎን ጥቅም ላይ ሲውል ሊቆይ የሚችል CSS ለመጻፍ ቀላል እና የበለጠ አስደሳች ያደርገዋል። ተጨማሪ ንባብ
CSS @scope (ኤምዲኤን) “CSS @scope”፣ ሁዋን ዲዬጎ ሮድሪጌዝ (CSS-Tricks) ፋየርፎክስ 146 የመልቀቂያ ማስታወሻዎች (ፋየርፎክስ) የአሳሽ ድጋፍ (CanIUse) ታዋቂ የሲኤስኤስ ማዕቀፎች (የሲኤስኤስ 2024 ግዛት) “C” በCSS: Cascade”፣ Thomas Yip (CSS-Tricks) የBEM መግቢያ (BEM ያግኙ)
