ሓደ ሰብ መትከላት መሰረታዊ ሲኤስኤስ ክመሃር ከሎ፡ ምዕቃብ ንምርግጋጽ ሞዱላዊ፡ ዳግማይ ክጥቀመሉ ዝኽእልን ገላጺን ቅዲታት ክጽሕፍ ይምሃር። ዲቨሎፐራት ምስ ናይ ሓቂ ዓለም ኣፕሊኬሽናት ክጽመዱ ከለዉ ግን፡ መብዛሕትኡ ግዜ ቅዲታት ናብ ዘይተሓሰበ ከባቢታት ከይፈሰሱ ናይ UI ባህርያት ምውሳኽ ዘይከኣል ኮይኑ ይስምዓካ። እዚ ጉዳይ እዚ መብዛሕትኡ ግዜ ናብ ርእሰ-ምምላእ ዝሕግዝ ሉፕ በረድ ይኸውን፤ ብክልሰ-ሓሳብ ናብ ሓደ ባእታ ወይ ክፍሊ ዝተሰፍሑ ቅዲታት ኣብ ዘይምልከቶም ቦታ ክረኣዩ ይጅምሩ። እዚ ድማ ነቲ ዲቨሎፐር ነቶም ዝፈሰሱ ቅዲታት ንምግልባጥ ዝያዳ ፍሉያት መምረጺታት ክፈጥር የገድዶ፣ እዚኦም ድማ ብጌጋ ዓለማዊ ቅዲታት ይሽርሽሩ፣ ወዘተ። ከም BEM ዝኣመሰሉ ተሪር ናይ ክፍሊ ስም ውዕላት ሓደ ሓደ ክልሰ-ሓሳባዊ መፍትሒ ናይዚ ጉዳይ እዩ። BEM (Block, Element, Modifier) ዝበሃል ኣገባብ ኣብ ውሽጢ CSS ፋይላት ዳግመ-ምጥቃምን ቅርጽን ንምርግጋጽ፡ ንCSS classes ንምስያም ዝሕግዝ ስርዓታዊ መንገዲ እዩ። ከምዚ ዝኣመሰለ ናይ ምጽዋዕ ውዕላት ንባእታታትን ኩነታቶምን ንምግላጽ ቋንቋ ዓውዲ ብምጥቃም ንኣእምሮኣዊ ጽዕነት ከጉድል ይኽእል፣ ብትኽክል እንተተተግቢሩ ድማ ንዓበይቲ መተግበሪታት ቅዲታት ንምዕቃብ ቀሊል ክገብሮ ይኽእል። ኣብ’ቲ ሓቀኛ ዓለም ግን ኩሉ ግዜ ከምኡ ኣይሰርሕን’ዩ። ቀዳምነታት ክቕየሩ ይኽእሉ እዮም፡ ምስ ለውጢ ድማ ኣተገባብራ ዘይቃዶ ይኸውን። ንኣሽቱ ለውጥታት ኣብ ኣቃውማ ኤችቲኤምኤል ብዙሕ ምኽልካል ስም ክፍሊ CSS ከድልዮ ይኽእል። ምስ ኣዝዮም መስተጋብራዊ ቅድመ-መወዳእታ መተግበሪታት፡ ነቲ BEM ቅዲ ዝኽተሉ ኣስማት ክፍልታት ነዊሕን ዘይሕዙን ክኾኑ ይኽእሉ (ንኣብነት፡ app-user-overview__status--is-authenticating)፡ ምሉእ ብምሉእ ድማ ንሕግታት ምጽዋዕ ዘይምኽባር ድማ ንኣቃውማ ናይ’ቲ ስርዓት ይሰብር፡ በዚ ድማ ረብሓታቱ ይነጽግ። ነዚ ብድሆታት’ዚ ኣብ ግምት ብምእታው፡ ዲቨሎፐራት ናብ ፍሬምዎርክ ምቕያሮም ዘገርም ኣይኮነን፡ Tailwind እቲ ዝበዝሐ ተፈታዊ CSS framework’ዩ። ኣብ ክንዲ ነቲ ኣብ መንጎ ቅዲታት ዝካየድ ዘይዕወት ፍሉይነት ኲናት ዝመስል ክትቃለስ ምፍታን፡ ንCSS Cascade ኢድካ ምሃብን ምሉእ ተነጽሎ ዘረጋግጹ መሳርሒታት ምጥቃምን ይቐልል። ዲቨሎፐራት ዝያዳ ኣብ ዩቲሊቲታት ይጽግዑ ገለ ዲቨሎፐራት ካብ ካስኬድ ቅዲታት ንምውጋድ ድሌት ከምዘለዎም ብኸመይ ንፈልጥ? ንሱ’ዩ ምልዓል ናይ “ዘመናዊ” ቅድመ-መወዳእታ መሳርሒታት — ከም CSS-in-JS frameworks — ብፍሉይ ንዕኡ ዕላማ ዝተዳለወ። ምስ ፍሉያት ባእታታት ብጽኑዕ ዝተሰነዩ ዝተነጸሉ ቅዲታት ምስራሕ ንጹህ ኣየር ምትንፋስ ክመስል ይኽእል። ንነገራት ምጽዋዕ ኣድላይነት የወግድ - ሕጂ'ውን ሓደ ካብቶም ኣዝዮም ዝጽልኡን ግዜ ዝወስድን ናይ ቅድሚት ዕማማት - ከምኡ'ውን ዲቨሎፐራት ንረብሓታት ውርሻ ሲኤስኤስ ምሉእ ብምሉእ ከይተረድኡ ወይ ከይተጠቐሙ ኣፍረይቲ ክኾኑ የኽእሎም። ንሲኤስኤስ ካስኬድ ምጉሓፍ ግን ናይ ገዛእ ርእሱ ጸገማት ሒዙ ይመጽእ እዩ። ንኣብነት ቅዲታት ብጃቫስክሪፕት ምድላው ከቢድ ናይ ህንጻ ውቅርታት ዝሓትት ኮይኑ መብዛሕትኡ ግዜ ቅዲታት ብዘይ ምግናን ምስ component markup ወይ HTML ዝተሓዋወሱ ይመርሕ። Instead of carefully considered naming conventions, we allow build tools to autogenerate selectors and identifiers for us (e.g., .jsx-3130221066), requiring developers to keep up with yet another pseudo-language in and of itself. (ኩሎም ናይ ክፍሊካ useEffects እንታይ ከም ዝገብሩ ናይ ምርዳእ ኣእምሮኣዊ ጽዕነት ድሮ እኹል ከም ዘይኮነ!) ንስራሕ ምጽዋዕ ክፍልታት ናብ መሳርሒታት ዝያዳ ርጡብ ምግባር ማለት መሰረታዊ ምእራም መብዛሕትኡ ግዜ ኣብቶም ንልምዓት ዝተጠርነፉ ፍሉያት ስሪት መተግበሪታት ዝተሓጽረ እዩ ማለት እዩ፣ ኣብ ክንዲ ንቀጥታዊ ምእራም ዝድግፉ ተወለድቲ ናይ መርበብ ሓበሬታ ባህርያት፣ ከም መሳርሒታት ዲቨሎፐር ምጥቃም። ዳርጋ ነቲ ድሮ መርበብ ሓበሬታ ዝህቦ ኣብስትራክት ንምግባር እንጥቀመሎም መሳርሒታት ንምእራም መሳርሒታት ከነማዕብል ከምዘለና’ዩ ዝመስል — እዚ ኩሉ ካብ “ቃንዛ” መደበኛ CSS ምጽሓፍ ንምህዳም ኢዩ። ዕድል ኮይኑ ዘመናዊ ባህርያት ሲኤስኤስ ንጽሑፍ ስታንዳርድ ሲኤስኤስ ዝያዳ ተዓጻጻፊ ይገብሮ ጥራይ ዘይኮነስ ከማና ዝኣመሰሉ ዲቨሎፐራት ነቲ ካስኬድ ንምምሕዳርን ንዓና ክሰርሓልናን ኣዝዩ ዝያዳ ሓይሊ ይህቦም። CSS Cascade Layers ዓቢ ኣብነት’ዩ፡ ግን ካልእ ዘገርም ስእነት ኣቓልቦ ዝረክብ ባህሪ ኣሎ — ዋላ’ኳ ሕጂ ኣብ ቀረባ እዋን ምስ Baseline ዝሰማማዕ ስለዝኾነ ይቕየር እንተሎ። እቲ CSS @scope ኣብ-ሕጊ CSS @scope at-rule ከም’ቲ ዝሸፈንናዮ ዓይነት ቅዲ-ምፍሳስ ዝመጽእ ጭንቀት ክኸውን ዝኽእል መድሃኒት’የ ዝቖጽሮ፣ ንኣብስትራክሽንን ተወሳኺ ናይ ህንጻ መሳርሒታትን ንመበቆላዊ ብልጫታት መርበብ ሓበሬታ ኣብ ዋጋ ዕዳጋ ከነእቱ ዘየገድደና። “እቲ @scope CSS at-rule ኣብ ፍሉያት ንኡሳን ኣግራብ DOM ንዘለዉ ባእታታት ክትመርጽ የኽእለካ፣ ንባእታታት ብትኽክል ዕላማ ብምግባር ካብ መጠን ንላዕሊ ፍሉያት መምረጺታት ከይጸሓፍካ፣ ንኽትግልፎም ኣጸጋሚ ዝኾነ፣ ከምኡ’ውን ንመምረጽትኻ ምስ ኣቃውማ DOM ኣዝዩ ኣጽኒዕካ ከይተኣሳሰርካ።”— MDN
ብኻልእ ኣዘራርባ፡ ውርሻ፡ ምውራድ፡ ወይ’ውን መሰረታዊ ምፍላይ ስክፍታታት ከይተረፈ ከይሰዋእና፡ ኣብ ፍሉይ ኣጋጣሚታት ምስ ዝተነጸሉ ቅዲታት ክንሰርሕ ንኽእልthat has been a long-running guiding principle of front-end development. ተወሳኺ ብሉጽ ሽፋን መርበብ ሓበሬታ ኣለዎ። ብሓቂ ፋየርፎክስ 146 ኣብ ወርሒ ታሕሳስ ን@scope ደገፍ ብምውሳኽ ንመጀመርታ ግዜ ምስ Baseline ዝሰማማዕ ገይርዎ። ኣብ መንጎ ሓደ BEM ቅዲ ዝጥቀም መጠወቒ ኣንጻር ሕጊ @scope ቀሊል ምውድዳር ኣብዚ ኣሎ፤ ዝብል ጽሑፍ ኣሎ።
<ቅዲ> ዝብል ጽሑፍ ኣሎ። .button .button__text { /* ቅዲታት ጽሑፍ መጠወቒ */ } .button .button__icon { /* ቅዲታት ምልክት መጠወቒ */ } .button--primary { ቀዳማይ ቅዲታት መጠወቒ */ } ዝብል ጽሑፍ ኣሎ።
ዝብል ጽሑፍ ኣሎ።
<ቅዲ> ዝብል ጽሑፍ ኣሎ። @ስኮፕ (.ቀዳማይ-መጠወቒ) { span:first-child { /* ቅዲታት ጽሑፍ መጠወቒ */ } span:last-child { /* ቅዲታት ምልክት መጠወቒ */ } } ዝብል ጽሑፍ ኣሎ።
እቲ @scope ዝብል ሕጊ ብውሑድ ዝተሓላለኸ ትኽክለኛነት የፍቅድ። እቲ መሃዚ ድሕሪ ደጊም ኣስማት ክፍልታት ተጠቒሙ ዶባት ምፍጣር ኣየድልዮን እዩ፣ እዚ ድማ ብግዲኡ ኣብ ተወለድቲ ኤችቲኤምኤል ባእታታት ዝተመርኮሰ መምረጺታት ክጽሕፉ የኽእሎም፣ በዚ ድማ ኣድላይነት ትእዛዛዊ ቅጥዕታት ስም ክፍሊ ሲኤስኤስ የወግድ። ኣድላይነት ምሕደራ ስም ክፍሊ ብምእላይ ጥራይ፡ @scope ኣብ ዓበይቲ ፕሮጀክትታት ምስ CSS ዝተኣሳሰር ፍርሒ ከቃልል ይኽእል። መሰረታዊ ኣጠቓቕማ ንምጅማር፡ @scope ዝብል ሕጊ ኣብ CSS ናትካ ወስኸሉ እሞ፡ ኣየኖት ቅዲታት ስኮፕ ዝግበረሎም ሱር መምረጺ ኣእቱ፤ @ስኮፕ (<መምረጺ>) { /* ቅዲታት ናብ <መምረጺ> ዝተዓቀኑ */ }
ስለዚ ንኣብነት ቅዲታት ናብ ሓደ
@ስኮፕ (nav) { a { /* ቅዲታት ምትእስሳር ኣብ ውሽጢ nav scope */ }
a:active { /* ንጡፋት ቅዲታት መላግቦ */ }
a:active::before { /* ንጡፍ መላግቦ ምስ pseudo-element ንተወሳኺ ቅዲ */ }
@media (ዝለዓለ-ስፍሓት: 768px) { a { /* ምላሽ ዝህብ ምትዕርራይ */ } } }
እዚ ንባዕሉ መሰረት ዝሰበረ ባህሪ ኣይኮነን። ይኹን እምበር፡ ካልኣይ ስነ-ሞጎት ኣብቲ ስፍሓት ክውሰኽ ይኽእል’ዩ፡ ታሕተዋይ ዶብ ንምፍጣር፡ ነቲ ስኮፕ መበገሲን መወዳእታን ነጥብታት ብኣድማዒ መንገዲ ይገልጽ።
/* ዝኾነ ኣብ ውሽጢ ul ዘሎ ባእታ እቶም ቅዲታት ኣብ ግብሪ ኣይክህልዎምን እዮም */ @ስኮፕ (nav) ክሳብ (ul) { a { ቅርጺ-ዓቐን: 14px; } }
እዚ ልምዲ እዚ ዶናት ስኮፒንግ ይበሃል፣ ሓደ ሰብ ክጥቀመሉ ዝኽእል ሓያሎ ኣገባባት ኣለዉ፣ ንሳቶም ድማ ተኸታታሊ ተመሳሰልቲ፣ ኣዝዮም ፍሉያት መምረጽቲ ምስ ቅርጺ DOM ብጽኑዕ ዝተተሓሓዙ፣ ሓደ :not pseudo-selector፣ ወይ ድማ ነቲ ዝተፈላለየ CSS ንምሕላው ኣብ ውሽጢ
መደምደምታ ከም ቴይልዊንድ ዝኣመሰሉ ዩቲሊቲ-ፈርስት ሲኤስኤስ ፍሬምዎርክስ ንፕሮቶታይፒንግን ንኣሽቱ ፕሮጀክትታትን ጽቡቕ ይሰርሑ። ልዕሊ ሓደ ክልተ ኣማዕበልቲ ኣብ ዘሳትፍ ዓበይቲ ፕሮጀክትታት ምስ ዝጥቀሙ ግን ረብሓታቶም ቀልጢፉ ይንኪ። ኣብ ዝሓለፈ ሒደት ዓመታት ምዕባለ ቅድመ-መወዳእታ ካብ መጠን ንላዕሊ እናተሓላለኸ መጺኡ፡ ሲኤስኤስ እውን ካብዚ ወጻኢ ኣይኮነን። ሕጊ @scope ንኹሉ መድሃኒት’ኳ እንተዘይኮነ፡ ኣድላይነት ዝተሓላለኸ መሳርሒታት ግን ከጉድል ይኽእል። ኣብ ክንዲ፡ ወይ ጎኒ ጎኒ ስትራተጂካዊ ኣጸዋውዓ ክፍሊ ኣብ ዝጥቀመሉ እዋን፡ @scope ንኽዕቀብ ዝኽእል CSS ንምጽሓፍ ዝቐለለን ዘዘናግዕን ክገብሮ ይኽእል። ተወሳኺ ንባብ
CSS @scope (MDN) “CSS @scope”፡ ጁዋን ድየጎ ሮድሪገዝ (CSS-Tricks) ፋየርፎክስ 146 መተሓሳሰቢ ምውጻእ (ፋየርፎክስ) ደገፍ መርበብ ሓበሬታ (CanIUse) ህቡባት ማዕቀፋት ሲኤስኤስ (ኩነታት ሲኤስኤስ 2024) “እቲ “C” ኣብ CSS: Cascade”፣ ቶማስ ይፕ (CSS-Tricks) መእተዊ ቢኢኤም (Get BEM)
