ᱢᱩᱲᱩᱫ CSS ᱨᱮᱭᱟᱜ ᱥᱟᱛᱷᱟᱢ ᱪᱮᱫᱚᱜ ᱚᱠᱛᱮ, ᱢᱤᱫ ᱦᱚᱲ ᱫᱚ ᱢᱚᱰᱩᱞᱟᱨ, ᱫᱚᱦᱲᱟ ᱵᱮᱵᱷᱟᱨᱚᱜ, ᱟᱨ ᱵᱚᱨᱱᱟᱱ ᱥᱴᱟᱭᱤᱞ ᱚᱞ ᱪᱮᱫᱚᱜ ᱠᱟᱱᱟ ᱡᱮᱢᱚᱱ ᱥᱟᱢᱲᱟᱣ ᱫᱟᱲᱮᱭᱟᱜ ᱠᱟᱱᱟ᱾ ᱢᱮᱱᱠᱷᱟᱱ ᱛᱤᱱ ᱨᱮ ᱰᱮᱵᱷᱞᱚᱯᱟᱨ ᱠᱚ ᱥᱟᱹᱨᱤ ᱫᱷᱟᱹᱨᱛᱤ ᱨᱮ ᱮᱯᱞᱤᱠᱮᱥᱚᱱ ᱠᱚ ᱥᱟᱶ ᱠᱚ ᱥᱮᱞᱮᱫᱚᱜ-ᱟ, ᱛᱚᱵᱮ ᱵᱟᱝ ᱵᱩᱡᱷᱟᱹᱣ ᱟᱠᱟᱱ ᱴᱚᱴᱷᱟ ᱨᱮ ᱥᱴᱟᱭᱤᱞ ᱵᱟᱝ ᱞᱤᱠ ᱠᱟᱛᱮ UI ᱯᱷᱤᱪᱟᱨ ᱠᱚ ᱡᱚᱲᱟᱣ ᱫᱚ ᱵᱟᱝ ᱥᱚᱢᱵᱷᱚᱵᱚᱱᱟ᱾ ᱱᱚᱣᱟ ᱮᱴᱠᱮᱴᱚᱬᱮ ᱫᱚ ᱟᱪᱠᱟ ᱥᱱᱚᱣᱵᱚᱞ ᱛᱮ ᱟᱡ ᱛᱮ ᱯᱩᱨᱟᱹᱣ ᱞᱩᱯ ᱨᱮ ᱛᱟᱦᱮᱱᱟ; ᱥᱴᱟᱭᱤᱞ ᱡᱟᱦᱟᱸ ᱫᱚ ᱥᱟᱛᱷᱟᱢᱤᱠ ᱞᱮᱠᱟᱛᱮ ᱢᱤᱫ ᱛᱮᱛᱮᱫ ᱥᱮ ᱪᱟᱱᱟᱪ ᱨᱮ ᱥᱠᱚᱯ ᱢᱮᱱᱟᱜᱼᱟ ᱚᱱᱟ ᱫᱚ ᱩᱫᱩᱜ ᱮᱦᱚᱵᱚᱜ ᱠᱟᱱᱟ ᱚᱠᱟ ᱨᱮ ᱚᱱᱟ ᱫᱚ ᱵᱟᱝ ᱥᱟᱹᱜᱟᱹᱭ ᱢᱮᱱᱟᱜᱼᱟ ᱾ ᱱᱚᱶᱟ ᱫᱚ ᱰᱮᱵᱷᱞᱚᱯᱟᱨ ᱠᱚ ᱞᱤᱠ ᱥᱴᱟᱭᱤᱞ ᱠᱚ ᱚᱵᱷᱟᱨᱟᱭᱤᱰ ᱞᱟᱹᱜᱤᱫ ᱟᱨᱦᱚᱸ ᱵᱟᱹᱲᱛᱤ ᱠᱷᱟᱥ ᱥᱮᱞᱮᱠᱴᱚᱨ ᱵᱮᱱᱟᱣ ᱞᱟᱹᱜᱤᱫ ᱵᱟᱹᱡᱤ ᱮᱢᱟ ᱠᱚᱣᱟ, ᱚᱠᱟ ᱫᱚ ᱵᱟᱝ ᱵᱩᱡᱷᱟᱹᱣ ᱠᱟᱛᱮ ᱜᱞᱚᱵᱟᱞ ᱥᱴᱟᱭᱤᱞ ᱠᱚ ᱚᱵᱷᱟᱨᱟᱭᱤᱰ ᱠᱟᱱᱟ, ᱟᱨ ᱚᱱᱠᱟ ᱜᱮ᱾ ᱠᱮᱴᱮᱡ ᱪᱟᱱᱟᱪ ᱧᱩᱛᱩᱢ ᱥᱚᱢᱵᱷᱚᱵᱚᱱ, ᱡᱮᱞᱠᱟ ᱵᱤ ᱤ ᱮᱢ, ᱱᱚᱣᱟ ᱮᱴᱠᱮᱴᱚᱬᱮ ᱨᱮᱭᱟᱜ ᱢᱤᱫ ᱥᱟᱫᱷᱟᱨᱚᱱ ᱥᱚᱢᱟᱫᱷᱟᱱ ᱠᱟᱱᱟ ᱾ BEM (Block, Element, Modifier) ᱯᱚᱱᱛᱷᱟ ᱫᱚ CSS ᱯᱷᱟᱭᱤᱞ ᱠᱚ ᱵᱷᱤᱛᱨᱤ ᱨᱮ ᱫᱚᱦᱚ ᱞᱟᱹᱜᱤᱫ ᱟᱨ ᱥᱴᱨᱟᱠᱴᱚᱨ ᱞᱟᱹᱜᱤᱫ CSS ᱪᱟᱱᱟᱪ ᱠᱚ ᱧᱩᱛᱩᱢ ᱞᱟᱹᱜᱤᱫ ᱢᱤᱫ ᱵᱮᱵᱚᱦᱟᱨ ᱯᱚᱱᱛᱷᱟ ᱠᱟᱱᱟ᱾ ᱱᱚᱝᱠᱟᱱ ᱧᱩᱛᱩᱢ ᱫᱚ ᱰᱚᱢᱮᱱ ᱯᱟᱹᱨᱥᱤ ᱞᱟᱹᱜᱤᱫ ᱰᱚᱢᱮᱱ ᱯᱟᱹᱨᱥᱤ ᱵᱮᱵᱚᱦᱟᱨ ᱠᱟᱛᱮ ᱠᱚᱜᱽᱱᱤᱴᱤᱵᱷ ᱞᱳᱰ ᱠᱚᱢ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ, ᱟᱨ ᱡᱩᱫᱤ ᱴᱷᱤᱠ ᱛᱮ ᱞᱟᱹᱜᱩᱜ ᱠᱷᱟᱱ, ᱢᱟᱨᱟᱝ ᱮᱯᱞᱤᱠᱮᱥᱚᱱ ᱞᱟᱹᱜᱤᱫ ᱥᱴᱟᱭᱤᱞ ᱠᱚ ᱟᱞᱜᱟ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ᱾ ᱥᱟᱹᱨᱤ ᱡᱮᱜᱮᱛ ᱨᱮ, ᱢᱮᱱᱠᱷᱟᱱ, ᱱᱚᱣᱟ ᱫᱚ ᱥᱟᱨᱟ ᱜᱷᱟᱹᱲᱤᱡ ᱚᱱᱠᱟ ᱵᱟᱝ ᱠᱟᱹᱢᱤᱭᱟ᱾ ᱯᱩᱭᱞᱩ ᱠᱚ ᱵᱚᱫᱚᱞ ᱫᱟᱲᱮᱭᱟᱜᱼᱟ, ᱟᱨ ᱵᱚᱫᱚᱞ ᱥᱟᱶᱛᱮ, ᱥᱟᱯᱲᱟᱣ ᱦᱚᱸ ᱵᱟᱝ ᱥᱚᱢᱟᱱᱚᱜᱼᱟ ᱾ HTML ᱥᱴᱨᱟᱠᱪᱟᱨ ᱨᱮ ᱠᱟᱹᱴᱤᱡ ᱵᱚᱫᱚᱞ ᱞᱟᱹᱜᱤᱫ ᱟᱭᱢᱟ CSS ᱪᱟᱱᱟᱪ ᱧᱩᱛᱩᱢ ᱥᱩᱫᱷᱨᱟᱹᱣ ᱨᱮᱭᱟᱜ ᱞᱟᱹᱠᱛᱤ ᱦᱩᱭ ᱫᱟᱲᱮᱭᱟᱜᱼᱟ᱾ ᱟᱹᱰᱤ ᱜᱟᱱ ᱜᱟᱯᱟᱞᱢᱟᱨᱟᱣ ᱯᱨᱚᱱᱴ-ᱮᱱᱰ ᱮᱯᱞᱤᱠᱮᱥᱚᱱ ᱥᱟᱶᱛᱮ, BEM ᱯᱮᱴᱟᱨᱱ ᱯᱟᱧᱡᱟ ᱠᱟᱛᱮ ᱪᱟᱱᱟᱪ ᱧᱩᱛᱩᱢ ᱫᱚ ᱡᱮᱞᱮᱝ ᱟᱨ ᱵᱟᱝ ᱵᱮᱵᱷᱟᱨ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ (e.g., app-user-overview__status--is-authenticating), ᱟᱨ ᱧᱩᱛᱩᱢ ᱱᱤᱭᱚᱢ ᱵᱟᱝ ᱵᱟᱛᱟᱣ ᱠᱟᱛᱮ ᱥᱤᱥᱴᱚᱢ ᱨᱮᱭᱟᱜ ᱜᱚᱦᱚᱲ ᱵᱟᱝ ᱛᱟᱦᱮᱱᱟ, ᱚᱱᱟ ᱛᱮ ᱱᱚᱣᱟ ᱨᱮᱭᱟᱜ ᱞᱟᱵᱷ ᱵᱟᱝ ᱛᱟᱦᱮᱱᱟ᱾ ᱱᱚᱶᱟ ᱠᱚ ᱵᱟᱹᱲᱤᱡ ᱠᱚ ᱧᱮᱞ ᱠᱟᱛᱮ, ᱱᱚᱶᱟ ᱫᱚ ᱵᱟᱝ ᱦᱟᱦᱟᱲᱟ ᱠᱟᱱᱟ ᱡᱮ ᱰᱮᱵᱷᱞᱚᱯᱟᱨ ᱠᱚ ᱯᱷᱨᱟᱢᱣᱟᱨᱠ ᱨᱮ ᱠᱚ ᱪᱟᱞᱟᱣ ᱟᱠᱟᱱᱟ, ᱴᱮᱞᱣᱤᱱᱰ ᱫᱚ ᱡᱚᱛᱚ ᱠᱷᱚᱱ ᱵᱟᱹᱲᱛᱤ ᱯᱷᱨᱟᱢᱣᱟᱨᱠ ᱠᱟᱱᱟ᱾ ᱥᱴᱟᱭᱤᱞ ᱠᱚ ᱛᱟᱞᱟ ᱨᱮ ᱵᱟᱝ ᱡᱤᱛᱠᱟᱹᱨ ᱥᱟᱹᱦᱤᱡ ᱞᱟᱹᱲᱦᱟᱹᱭ ᱞᱮᱠᱟ ᱧᱮᱞᱚᱜ ᱠᱟᱱᱟ ᱚᱱᱟ ᱠᱷᱚᱱ ᱞᱟᱹᱲᱦᱟᱹᱭ ᱨᱮᱭᱟᱜ ᱠᱩᱨᱩᱢᱩᱴᱩ ᱠᱷᱚᱱ, CSS Cascade ᱨᱮ ᱦᱟᱨᱟᱣ ᱟᱨ ᱯᱩᱨᱟᱹ ᱵᱷᱮᱱᱟᱣ ᱨᱮᱭᱟᱜ ᱜᱮᱨᱮᱱᱴ ᱵᱮᱵᱚᱦᱟᱨ ᱫᱚ ᱟᱞᱜᱟ ᱜᱮᱭᱟ᱾ ᱩᱛᱱᱟᱹᱣᱠᱚ ᱵᱮᱵᱷᱟᱨᱚᱜ ᱠᱚ ᱨᱮ ᱵᱟᱹᱲᱛᱤ ᱠᱚ ᱞᱤᱱ ᱮᱫᱟ ᱟᱵᱚ ᱪᱤᱠᱟᱹᱛᱮ ᱵᱚᱱ ᱵᱟᱲᱟᱭᱟ ᱡᱮ ᱛᱤᱱᱟᱹᱜ ᱜᱟᱱ ᱩᱛᱱᱟᱹᱣᱤᱭᱟᱹ ᱠᱚ ᱫᱚ ᱠᱟᱥᱠᱮᱰ ᱥᱴᱟᱭᱤᱞ ᱠᱷᱚᱱ ᱥᱟᱦᱟᱨ ᱨᱮ ᱢᱮᱱᱟᱜ ᱠᱚᱣᱟ? ᱱᱚᱣᱟ ᱫᱚ “ᱱᱟᱦᱟᱜ” ᱯᱷᱨᱚᱱᱴ-ᱮᱱᱰ ᱴᱩᱞᱤᱝ ᱨᱮᱭᱟᱜ ᱩᱛᱷᱱᱟᱹᱣ ᱠᱟᱱᱟ — ᱡᱮᱞᱠᱟ CSS-in-JS ᱯᱷᱨᱟᱢᱣᱟᱨᱠ — ᱚᱱᱟ ᱡᱚᱥ ᱞᱟᱹᱜᱤᱫ ᱠᱷᱟᱥ ᱠᱟᱭᱛᱮ ᱰᱤᱡᱟᱭᱤᱱ ᱟᱠᱟᱱᱟ᱾ ᱵᱷᱮᱜᱟᱨ ᱥᱴᱟᱭᱤᱞ ᱥᱟᱶ ᱠᱟᱹᱢᱤ ᱚᱠᱟ ᱫᱚ ᱠᱷᱟᱥ ᱜᱷᱚᱴᱚᱠ ᱠᱚ ᱞᱟᱹᱜᱤᱫ ᱠᱮᱴᱮᱡ ᱥᱠᱚᱯ ᱢᱮᱱᱟᱜᱼᱟ ᱚᱱᱟ ᱫᱚ ᱥᱟᱯᱷᱟ ᱦᱚᱭ ᱨᱮᱭᱟᱜ ᱥᱟᱦᱮᱫ ᱞᱮᱠᱟ ᱧᱮᱞᱚᱜᱼᱟ᱾ ᱱᱚᱶᱟ ᱫᱚ ᱡᱤᱱᱤᱥ ᱠᱚ ᱧᱩᱛᱩᱢ ᱨᱮᱭᱟᱜ ᱡᱟᱹᱨᱩᱲ ᱪᱟᱵᱟᱭᱟ — ᱱᱤᱛ ᱦᱚᱸ ᱟᱹᱰᱤ ᱦᱤᱨᱠᱟᱹ ᱟᱨ ᱚᱠᱛᱚ ᱡᱚᱢ ᱯᱷᱨᱚᱱᱴ ᱠᱟᱹᱢᱤ ᱠᱚ ᱢᱩᱫᱽ ᱨᱮ ᱢᱤᱫᱴᱮᱱ ᱠᱟᱱᱟ — ᱟᱨ ᱩᱛᱱᱟᱹᱣ ᱠᱚ ᱫᱚ CSS ᱵᱟᱹᱲᱤᱡ ᱠᱚ ᱵᱟᱝ ᱵᱩᱡᱷᱟᱹᱣ ᱟᱨ ᱵᱟᱝ ᱞᱟᱵᱷ ᱠᱟᱛᱮ ᱯᱨᱚᱰᱟᱠᱴ ᱠᱚ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ᱾ ᱢᱮᱱᱠᱷᱟᱱ ᱥᱤ ᱮᱥ ᱮᱥ ᱠᱟᱥᱠᱮᱰ ᱫᱚ ᱟᱡᱟᱜ ᱮᱴᱠᱮᱴᱚᱬᱮ ᱥᱟᱶᱛᱮ ᱦᱤᱡᱩᱜ ᱠᱟᱱᱟ ᱾ ᱫᱟᱹᱭᱠᱟᱹ ᱞᱮᱠᱟᱛᱮ, JavaScript ᱨᱮ ᱥᱴᱟᱭᱤᱞ ᱠᱚᱢᱯᱚᱡᱽ ᱞᱟᱹᱜᱤᱫ ᱦᱟᱢᱟᱞ ᱵᱤᱞᱰ ᱠᱚᱱᱯᱷᱤᱜᱟᱨᱮᱥᱚᱱ ᱨᱮᱭᱟᱜ ᱡᱟᱹᱨᱩᱲ ᱢᱮᱱᱟᱜ-ᱟ ᱟᱨ ᱟᱹᱰᱤ ᱜᱷᱟᱹᱲᱤᱡ ᱥᱴᱟᱭᱤᱞ ᱠᱚ ᱠᱚᱯᱚᱱᱴ ᱢᱟᱨᱠᱟᱯ ᱥᱮ HTML ᱥᱟᱶ ᱵᱟᱹᱲᱤᱡ ᱞᱮᱠᱟ ᱢᱮᱥᱟᱞᱚᱜ-ᱟ᱾ ᱱᱟᱯᱟᱭ ᱛᱮ ᱵᱤᱪᱟᱹᱨ ᱟᱠᱟᱱ ᱧᱩᱛᱩᱢ ᱥᱟᱛᱟᱢ ᱵᱚᱫᱚᱞ ᱛᱮ, ᱟᱵᱚ ᱫᱚ ᱟᱵᱚ ᱞᱟᱹᱜᱤᱫ ᱵᱟᱪᱷᱟᱣ ᱟᱨ ᱩᱯᱨᱩᱢ ᱠᱚ ᱟᱴᱚᱜ ᱞᱟᱹᱜᱤᱫ ᱥᱟᱯᱟᱵ ᱠᱚ ᱵᱮᱱᱟᱣ ᱞᱟᱹᱜᱤᱫ ᱵᱚᱱ ᱫᱟᱣ ᱮᱢᱟᱠᱚᱣᱟ (e.g., .jsx-3130221066), ᱰᱮᱵᱷᱚᱨᱠᱚ ᱫᱚ ᱟᱡ ᱛᱮ ᱟᱨ ᱢᱤᱫ ᱥᱩᱰᱩ ᱯᱟᱹᱨᱥᱤ ᱥᱟᱶ ᱛᱟᱦᱮᱱ ᱞᱟᱹᱜᱤᱫ ᱡᱟᱹᱨᱩᱲ ᱢᱮᱱᱟᱜ-ᱟ᱾ (ᱡᱮᱞᱠᱟ ᱡᱮ ᱟᱢᱟᱜ ᱡᱚᱛᱚ ᱜᱷᱚᱴᱚᱠ ᱨᱮᱭᱟᱜ ᱵᱮᱵᱷᱟᱨ ᱮᱥᱮᱨ ᱪᱮᱫ ᱠᱚ ᱠᱟᱹᱢᱤᱭᱟ ᱚᱱᱟ ᱵᱩᱡᱷᱟᱹᱣ ᱨᱮᱭᱟᱜ ᱠᱚᱜᱽᱱᱚᱴᱤᱵᱷ ᱞᱳᱰ ᱞᱟᱦᱟ ᱠᱷᱚᱱ ᱜᱮ ᱵᱟᱝ ᱰᱷᱮᱨ ᱛᱟᱦᱮᱸ ᱠᱟᱱᱟ!) ᱴᱩᱞᱤᱝ ᱨᱮ ᱪᱟᱱᱟᱪ ᱠᱚ ᱧᱩᱛᱩᱢ ᱨᱮᱭᱟᱜ ᱠᱟᱹᱢᱤ ᱟᱨᱦᱚᱸ ᱵᱮᱵᱷᱟᱨ ᱨᱮᱭᱟᱜ ᱢᱟᱱᱮ ᱫᱚ ᱱᱚᱶᱟ ᱠᱟᱱᱟ ᱡᱮ ᱢᱩᱲᱩᱫ ᱰᱤᱵᱟᱜᱽ ᱫᱚ ᱩᱛᱱᱟᱹᱣ ᱞᱟᱹᱜᱤᱫ ᱠᱚᱢᱯᱟᱭᱤᱞ ᱟᱠᱟᱱ ᱠᱷᱟᱥ ᱮᱯᱞᱤᱠᱮᱥᱚᱱ ᱵᱷᱟᱨᱥᱚᱱ ᱠᱚ ᱞᱟᱹᱜᱤᱫ ᱵᱟᱝ ᱵᱟᱹᱲᱤᱡ ᱜᱮᱭᱟ᱾ ᱱᱚᱶᱟ ᱫᱚ ᱯᱟᱹᱦᱤᱞ ᱞᱮᱠᱟ ᱜᱮ ᱢᱮᱱᱟᱜ-ᱟ ᱡᱮ ᱟᱵᱚ ᱫᱚ ᱣᱮᱵᱽ ᱫᱚ ᱞᱟᱦᱟ ᱠᱷᱚᱱ ᱜᱮ ᱮᱢ ᱟᱠᱟᱱ ᱡᱤᱱᱤᱥ ᱠᱚ ᱰᱤᱵᱟᱜᱽ ᱞᱟᱹᱜᱤᱫ ᱵᱚᱱ ᱵᱮᱵᱚᱦᱟᱨ ᱮᱫᱟ — ᱡᱚᱛᱚ ᱫᱚ ᱥᱮᱢᱟᱱ CSS ᱚᱞ ᱨᱮᱭᱟᱜ “ᱦᱟᱥ” ᱠᱷᱚᱱ ᱥᱟᱦᱟᱜ ᱞᱟᱹᱜᱤᱫ᱾ ᱵᱷᱟᱹᱜᱽ ᱞᱮᱠᱟᱛᱮ, ᱱᱟᱦᱟᱜ CSS ᱨᱮᱭᱟᱜ ᱯᱷᱤᱪᱟᱨ ᱠᱚ ᱫᱚ ᱮᱠᱮᱱ ᱢᱟᱱᱚᱛ CSS ᱚᱞ ᱞᱟᱹᱜᱤᱫ ᱵᱟᱝ ᱞᱮᱵᱽᱲᱮᱡ ᱜᱮᱭᱟ ᱵᱟᱝᱠᱷᱟᱱ ᱟᱵᱚ ᱞᱮᱠᱟᱱ ᱰᱮᱵᱷᱚᱨᱠᱚ ᱦᱚᱸ ᱟᱹᱰᱤ ᱵᱟᱹᱲᱛᱤ ᱫᱟᱲᱮ ᱮᱢᱟᱠᱚᱣᱟ ᱟᱨ ᱟᱵᱚ ᱞᱟᱹᱜᱤᱫ ᱠᱟᱹᱢᱤ ᱠᱚ ᱮᱢᱟᱠᱚᱣᱟ᱾ CSS Cascade Layers do̠ ᱢᱤᱫ ᱢᱟᱨᱟᱝ ᱫᱟᱹᱭᱠᱟᱹ ᱠᱟᱱᱟ, ᱢᱮᱱᱠᱷᱟᱱ ᱟᱨ ᱢᱤᱫ ᱯᱷᱤᱪᱟᱨ ᱢᱮᱱᱟᱜ-ᱟ ᱡᱟᱦᱟᱸ ᱫᱚ ᱟᱹᱰᱤ ᱦᱟᱦᱟᱲᱟ ᱞᱮᱠᱟ ᱧᱮᱞᱚᱜ-ᱟ — ᱡᱩᱫᱤ ᱚᱱᱟ ᱫᱚ ᱱᱤᱛ ᱵᱚᱫᱚᱞᱚᱜ ᱠᱟᱱᱟ ᱡᱮ ᱱᱚᱶᱟ ᱫᱚ ᱱᱤᱛ ᱜᱮ Baseline compatible ᱦᱩᱭ ᱟᱠᱟᱱᱟ᱾ ᱥᱤᱮᱥᱮᱥ @ᱥᱠᱳᱯ ᱮᱴ-ᱱᱤᱭᱚᱢ ᱤᱧ ᱫᱚ CSS @scope at-rule ᱫᱚ ᱟᱵᱚ ᱠᱚᱵᱚᱡᱽ ᱟᱠᱟᱱ style-leak-induced anxiety ᱞᱟᱹᱜᱤᱫ ᱢᱤᱫ ᱥᱚᱢᱵᱷᱚᱵᱚᱱ ᱥᱟᱢᱵᱷᱟᱣ ᱞᱮᱠᱟᱧ ᱵᱩᱡᱷᱟᱹᱣᱟ, ᱚᱠᱟ ᱫᱚ ᱟᱵᱚ ᱵᱟᱝ ᱵᱟᱹᱲᱤᱡ ᱟᱨ ᱵᱟᱹᱲᱛᱤ ᱵᱤᱞᱰ ᱴᱩᱞᱤᱝ ᱞᱟᱹᱜᱤᱫ ᱵᱟᱝ ᱵᱟᱹᱲᱤᱡ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ᱾ “@scope CSS at-rule do̠ ᱟᱢ ᱠᱷᱟᱥ DOM subtrees ᱨᱮ ᱮᱞᱤᱢᱮᱱᱴ ᱠᱚ ᱵᱟᱪᱷᱟᱣ ᱞᱟᱹᱜᱤᱫ ᱮ ᱜᱚᱲᱚ ᱟᱢᱟ, ᱮᱞᱤᱢᱮᱱᱴ ᱠᱚ ᱵᱟᱝ ᱚᱞ ᱠᱟᱛᱮ ᱵᱟᱹᱲᱛᱤ ᱠᱷᱟᱥ ᱵᱟᱪᱷᱟᱣ ᱠᱚ ᱵᱟᱝ ᱚᱞ ᱠᱟᱛᱮ ᱚᱠᱟ ᱠᱚ ᱫᱚ ᱵᱟᱝ ᱵᱟᱹᱲᱤᱡ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ, ᱟᱨ ᱟᱢᱟᱜ ᱵᱟᱪᱷᱟᱣ ᱠᱚ ᱫᱚ DOM ᱥᱴᱨᱟᱠᱴᱚᱨ ᱥᱟᱶ ᱟᱹᱰᱤ ᱠᱮᱴᱮᱡ ᱛᱮ ᱵᱟᱝ ᱡᱚᱲᱟᱣ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ ᱾”— MDN
ᱮᱴᱟᱜ ᱟᱹᱲᱟᱹ ᱛᱮ ᱢᱮᱱ ᱠᱷᱟᱱ, ᱟᱵᱚ ᱫᱚ ᱵᱤᱱᱟᱹ ᱛᱚᱞᱟᱥ, ᱠᱟᱥᱠᱮᱰᱤᱝ, ᱥᱮ ᱪᱤᱱᱛᱟᱹ ᱠᱚ ᱨᱮᱭᱟᱜ ᱢᱩᱲᱩᱫ ᱵᱷᱮᱜᱟᱨ ᱵᱟᱝ ᱠᱟᱛᱮ ᱠᱷᱟᱥ ᱚᱠᱛᱚ ᱨᱮ ᱵᱷᱮᱜᱟᱨ ᱥᱴᱟᱭᱤᱞ ᱥᱟᱶ ᱠᱟᱹᱢᱤ ᱫᱟᱲᱮᱭᱟᱜᱼᱟ ᱵᱚᱱᱚᱱᱟ ᱫᱚ ᱥᱟᱢᱟᱝ ᱩᱛᱱᱟᱹᱣ ᱨᱮᱭᱟᱜ ᱟᱹᱰᱤ ᱜᱷᱟᱹᱲᱤᱡ ᱪᱟᱹᱞᱩ ᱫᱤᱥᱦᱩᱫᱤᱥ ᱪᱚᱞᱚᱱ ᱠᱟᱱᱟ ᱾ ᱥᱟᱶᱛᱮ, ᱱᱚᱣᱟ ᱨᱮ ᱵᱷᱟᱹᱜᱤ ᱵᱽᱨᱟᱣᱩᱡᱟᱨ ᱠᱚᱵᱷᱟᱨᱮᱡᱽ ᱢᱮᱱᱟᱜᱼᱟ ᱾ ᱥᱟᱹᱨᱤ ᱠᱟᱛᱷᱟ ᱫᱚ, ᱯᱷᱟᱭᱟᱨᱯᱷᱚᱠᱥ ᱑᱔᱖ ᱫᱚ ᱰᱤᱥᱮᱢᱵᱚᱨ ᱨᱮ @ᱥᱠᱚᱯ ᱞᱟᱹᱜᱤᱫ ᱥᱟᱯᱚᱨᱴ ᱥᱮᱞᱮᱫ ᱠᱮᱫᱟᱭ, ᱚᱱᱟ ᱛᱮ ᱯᱩᱭᱞᱩ ᱫᱷᱟᱣ ᱵᱮᱥᱞᱟᱭᱤᱱ ᱟᱱᱩᱠᱩᱞ ᱮᱱᱟ᱾ ᱱᱚᱸᱰᱮ ᱫᱚ ᱵᱤ ᱤ ᱮᱢ ᱯᱮᱴᱟᱨᱱ ᱵᱚᱱᱟᱢ @ᱥᱠᱚᱯ ᱱᱤᱭᱚᱢ ᱵᱮᱵᱷᱟᱨ ᱠᱟᱛᱮ ᱢᱤᱫ ᱵᱩᱛᱟᱢ ᱛᱟᱞᱟ ᱨᱮ ᱟᱞᱜᱟ ᱛᱩᱞᱟᱹ ᱡᱚᱠᱷᱟ ᱢᱮᱱᱟᱜᱼᱟ: <ᱵᱩᱛᱟᱢ ᱪᱟᱱᱟᱪ="ᱵᱩᱛᱟᱢ ᱵᱩᱛᱟᱢ--ᱯᱨᱟᱭᱢᱟᱨᱤ"> <ᱥᱯᱟᱱ ᱪᱟᱱᱟᱪ="ᱵᱩᱛᱟᱢ__ᱚᱞ">ᱤᱧ ᱨᱮ ᱚᱛᱟᱭ ᱢᱮ <ᱥᱯᱮᱱ ᱪᱟᱱᱟᱪ="ᱵᱩᱛᱟᱢ__ᱟᱭᱠᱚᱱ">→
<ᱥᱴᱟᱭᱤᱞ> .ᱵᱩᱛᱟᱢ .ᱵᱩᱛᱟᱢ__ᱚᱞ {/* ᱵᱩᱛᱟᱢ ᱚᱞ ᱥᱴᱟᱭᱤᱞ*/} .ᱵᱩᱛᱟᱢ .ᱵᱩᱛᱟᱢ__ᱟᱭᱠᱚᱱ {/* ᱵᱩᱛᱟᱢ ᱟᱭᱠᱚᱱ ᱥᱴᱟᱭᱤᱞ */} .ᱵᱩᱛᱟᱢ--ᱯᱨᱟᱭᱢᱟᱨᱤ {ᱯᱨᱟᱭᱢᱟᱨᱤ ᱵᱩᱛᱟᱢ ᱥᱴᱟᱭᱤᱞ */}
<ᱵᱩᱛᱟᱢ ᱪᱟᱱᱟᱪ="ᱯᱨᱟᱭᱢᱟᱨᱤ-ᱵᱩᱛᱟᱢ"> ᱤᱧ ᱨᱮ ᱚᱛᱟᱭ ᱢᱮ <ᱥᱯᱟᱱ>→
<ᱥᱴᱟᱭᱤᱞ> @ᱥᱠᱚᱯ (.ᱯᱨᱟᱭᱢᱟᱨᱤ-ᱵᱩᱛᱟᱹᱢ) { ᱥᱯᱮᱱ:ᱯᱩᱭᱞᱩ-ᱜᱤᱫᱽᱨᱟᱹ {/* ᱵᱩᱛᱟᱢ ᱚᱞ ᱥᱴᱟᱭᱤᱞ*/} ᱥᱯᱮᱱ:ᱢᱩᱪᱟᱹᱫ-ᱜᱤᱫᱽᱨᱟᱹ {/* ᱵᱩᱛᱟᱢ ᱪᱤᱱᱦᱟᱹ ᱥᱴᱟᱭᱤᱞ*/} }
@ᱥᱠᱳᱯ ᱱᱤᱭᱚᱢ ᱫᱚ ᱠᱚᱢ ᱦᱟᱨᱚᱱ ᱥᱟᱶ ᱥᱩᱦᱤ ᱞᱟᱹᱜᱤᱫ ᱮ ᱪᱷᱟᱹᱲ ᱮᱢᱚᱜ ᱠᱟᱱᱟ ᱾ ᱰᱮᱵᱷᱚᱨᱟᱨ ᱫᱚ ᱱᱤᱛ ᱫᱚ ᱪᱟᱱᱟᱪ ᱧᱩᱛᱩᱢ ᱵᱮᱵᱚᱦᱟᱨ ᱠᱟᱛᱮ ᱥᱤᱢᱟᱹ ᱵᱮᱱᱟᱣ ᱨᱮᱭᱟᱜ ᱡᱟᱹᱨᱩᱲ ᱵᱟᱹᱱᱩᱜ-ᱟ, ᱚᱱᱟ ᱛᱮ ᱩᱱᱠᱩ ᱫᱚ ᱫᱟᱹᱵᱤ HTML ᱮᱞᱮᱴ ᱠᱚ ᱵᱮᱵᱚᱦᱟᱨ ᱠᱟᱛᱮ ᱵᱟᱪᱷᱟᱣ ᱠᱚ ᱚᱞ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ, ᱚᱱᱟ ᱛᱮ ᱯᱨᱤᱥᱠᱤᱴᱤᱵᱷ CSS ᱪᱟᱱᱟᱪ ᱧᱩᱛᱩᱢ ᱯᱮᱴᱟᱨ ᱨᱮᱭᱟᱜ ᱡᱟᱹᱨᱩᱲ ᱵᱟᱝ ᱦᱩᱭᱩᱜ-ᱟ᱾ ᱪᱟᱱᱟᱪ ᱧᱩᱛᱩᱢ ᱵᱮᱵᱮᱥᱛᱟ ᱨᱮᱭᱟᱜ ᱞᱟᱹᱠᱛᱤ ᱚᱪᱚᱜ ᱠᱟᱛᱮ, @scope ᱢᱟᱨᱟᱝ ᱯᱨᱚᱡᱮᱠᱴ ᱨᱮ CSS ᱥᱟᱶ ᱡᱚᱲᱟᱣ ᱵᱚᱛᱚᱨ ᱠᱚᱢ ᱫᱟᱲᱮᱭᱟᱜᱼᱟ᱾ ᱢᱩᱲᱩᱫ ᱵᱮᱵᱷᱟᱨ ᱮᱦᱚᱵ ᱞᱟᱹᱜᱤᱫ, ᱟᱢᱟᱜ CSS ᱨᱮ @scope ᱱᱤᱭᱚᱢ ᱥᱮᱞᱮᱫ ᱢᱮ ᱟᱨ ᱢᱤᱫ ᱨᱩᱴ ᱵᱟᱪᱷᱟᱣᱤᱡ ᱥᱮᱞᱮᱫ ᱢᱮ ᱡᱟᱦᱟᱸ ᱨᱮ ᱥᱴᱟᱭᱤᱞ ᱥᱠᱚᱯ ᱦᱩᱭᱩᱜᱼᱟ: @ᱥᱠᱚᱯ (<ᱵᱟᱪᱷᱟᱣᱤᱡ>) { /* ᱥᱴᱟᱭᱤᱞ ᱠᱚ ᱫᱚ <ᱥᱮᱞᱮᱠᱴᱚᱨ> ᱨᱮ ᱥᱠᱚᱯ ᱟᱠᱟᱱᱟ */ }
ᱚᱱᱟᱛᱮ, ᱫᱟᱹᱭᱠᱟᱹ ᱞᱮᱠᱟᱛᱮ, ᱡᱩᱫᱤ ᱟᱵᱚ ᱥᱴᱟᱭᱤᱞ ᱠᱚ ᱢᱤᱫ
@ᱥᱠᱳᱯ (ᱱᱮᱣ) { ᱢᱤᱫ {/* ᱱᱮᱣ ᱥᱠᱚᱯ ᱵᱷᱤᱛᱨᱭ ᱨᱮ ᱞᱤᱝᱠ ᱥᱴᱟᱭᱤᱞ ᱠᱚ*/}
ᱮ:ᱮᱠᱴᱤᱵᱷ {/*ᱮᱠᱴᱤᱵᱷ ᱞᱤᱝᱠ ᱥᱴᱟᱭᱤᱞᱥ*/}
ᱮ:ᱮᱠᱴᱤᱵᱷ::ᱢᱟᱲᱟᱝ {/* ᱵᱟᱹᱲᱛᱤ ᱥᱴᱟᱭᱞᱤᱝ ᱞᱟᱹᱜᱤᱫ ᱥᱩᱰᱚ-ᱮᱞᱤᱢᱮᱱᱴ ᱥᱟᱶ ᱮᱠᱴᱤᱵᱷ ᱞᱤᱝᱠ */}
@ᱢᱤᱰᱤᱭᱟ (ᱵᱟᱹᱲᱛᱤ-ᱚᱥᱟᱨ: ᱗᱖᱘ᱯᱤᱮᱠᱥ) { a {/* ᱛᱮᱞᱟ ᱮᱢᱚᱜ ᱵᱮᱵᱷᱟᱨ */ } } }
ᱱᱚᱣᱟ, ᱟᱡ ᱛᱮ, ᱢᱤᱫ ᱜᱽᱨᱟᱣᱩᱱᱰ ᱯᱷᱤᱪᱟᱨ ᱫᱚ ᱵᱟᱝ ᱠᱟᱱᱟ ᱾ ᱢᱮᱱᱠᱷᱟᱱ, ᱫᱚᱥᱟᱨ ᱟᱨᱜᱩᱴ ᱫᱚ ᱞᱟᱛᱟᱨ ᱥᱤᱢᱟᱹ ᱵᱮᱱᱟᱣ ᱞᱟᱹᱜᱤᱫ ᱥᱠᱚᱯ ᱨᱮ ᱥᱮᱞᱮᱫ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ, ᱥᱠᱚᱯ ᱨᱮᱭᱟᱜ ᱮᱛᱚᱦᱚᱵ ᱟᱨ ᱢᱩᱪᱟᱹᱫ ᱯᱚᱭᱮᱱᱴ ᱠᱚ ᱯᱨᱚᱵᱷᱟᱣ ᱫᱟᱲᱮᱭᱟᱜ-ᱟ᱾
/* ul ᱵᱷᱤᱛᱨᱭ ᱨᱮ ᱡᱟᱦᱟᱱ ᱮᱞᱤᱢᱮᱱᱴ ᱨᱮ ᱥᱴᱟᱭᱤᱞ ᱵᱟᱝ ᱞᱟᱹᱜᱩᱜᱼᱟ */ @ᱥᱠᱳᱯ (ᱱᱮᱣ) ᱠᱷᱚᱱ (ᱩᱞ) { ᱮ { ᱯᱷᱚᱱᱴ-ᱜᱚᱲᱦᱚᱱ: ᱑᱔ ᱯᱤ ᱮᱠᱥ; } }
ᱱᱚᱶᱟ ᱦᱮᱣᱟ ᱫᱚ ᱰᱚᱱᱟᱴ ᱥᱠᱚᱯᱤᱝ ᱠᱚ ᱢᱮᱛᱟᱜ-ᱟ, ᱟᱨ ᱟᱭᱢᱟ ᱰᱟᱦᱟᱨ ᱢᱮᱱᱟᱜ-ᱟ ᱡᱟᱦᱟᱸ ᱨᱮ ᱢᱤᱫ ᱞᱮᱠᱟᱱ, ᱟᱹᱰᱤ ᱠᱷᱟᱥ ᱵᱟᱪᱷᱟᱣᱤᱭᱟᱹ ᱠᱚ ᱫᱚ DOM ᱥᱴᱨᱟᱠᱴᱚᱨ ᱥᱟᱶ ᱠᱮᱴᱮᱡ ᱛᱮ ᱡᱚᱲᱟᱣ ᱟᱠᱟᱱᱟ, a :not pseudo-selector, ᱥᱮ ᱵᱷᱮᱜᱟᱨ CSS ᱥᱟᱢᱵᱷᱟᱨ ᱞᱟᱹᱜᱤᱫ
ᱢᱩᱪᱟᱹᱫ ᱠᱟᱛᱷᱟ ᱵᱮᱵᱷᱟᱨᱚᱜ-ᱯᱩᱭᱞᱩ ᱥᱤᱮᱥᱮᱥ ᱯᱷᱨᱟᱢᱣᱟᱨᱠ, ᱡᱮᱞᱠᱟ ᱴᱮᱞᱣᱤᱱᱰ, ᱯᱨᱚᱴᱚᱴᱟᱭᱤᱯᱤᱝ ᱟᱨ ᱠᱟᱹᱴᱤᱡ ᱯᱨᱚᱡᱮᱠᱴ ᱠᱚ ᱞᱟᱹᱜᱤᱫ ᱱᱟᱯᱟᱭ ᱠᱟᱹᱢᱤ ᱮᱫᱟᱭ ᱾ ᱩᱱᱠᱩᱣᱟᱜ ᱞᱟᱵᱷ ᱩᱥᱟᱹᱨᱟ ᱜᱮ ᱠᱚᱢᱚᱜ ᱠᱟᱱᱟ, ᱮᱱᱛᱮᱨᱮᱦᱚᱸ, ᱢᱟᱨᱟᱝ ᱯᱨᱚᱡᱮᱠᱴ ᱨᱮ ᱵᱮᱵᱷᱟᱨᱚᱜ ᱠᱟᱱ ᱡᱚᱠᱷᱚᱱ ᱢᱤᱫ ᱵᱟᱨ ᱠᱷᱚᱱ ᱵᱟᱹᱲᱛᱤ ᱩᱛᱱᱟᱹᱣᱤᱭᱟᱹ ᱠᱚ ᱥᱮᱞᱮᱫᱚᱜ ᱠᱟᱱᱟ᱾ ᱪᱟᱞᱟᱣᱮᱱ ᱵᱟᱨ ᱯᱮ ᱥᱮᱨᱢᱟ ᱨᱮ ᱢᱟᱲᱟᱝ ᱩᱛᱱᱟᱹᱣ ᱫᱚ ᱟᱹᱰᱤ ᱜᱮ ᱦᱟᱨᱠᱮᱛ ᱮᱱᱟ, ᱟᱨ ᱥᱤ ᱮᱥ ᱮᱥ ᱦᱚᱸ ᱵᱟᱝ ᱩᱞᱴᱟᱹ ᱜᱮᱭᱟ ᱾ ᱡᱚᱠᱷᱚᱱ @scope ᱱᱤᱭᱚᱢ ᱫᱚ ᱥᱟᱱᱟᱢ ᱠᱷᱚᱱ ᱥᱟᱦᱟᱣ ᱵᱟᱝ ᱠᱟᱱᱟ, ᱱᱚᱣᱟ ᱫᱚ ᱦᱟᱨᱚᱱ ᱴᱩᱞᱤᱝ ᱨᱮᱭᱟᱜ ᱞᱟᱹᱠᱛᱤ ᱠᱚᱢ ᱫᱟᱲᱮᱭᱟᱜᱼᱟ᱾ ᱚᱠᱟ ᱡᱷᱚᱜ ᱵᱮᱵᱷᱟᱨᱚᱜ ᱠᱟᱱᱟ ᱡᱟᱭᱜᱟ ᱨᱮ, ᱟᱨ ᱥᱟᱶᱛᱮ ᱠᱟᱹᱢᱤᱦᱚᱨᱟ ᱪᱟᱱᱟᱪ ᱧᱩᱛᱩᱢ, @scope ᱫᱚ ᱥᱟᱢᱲᱟᱣ CSS ᱚᱞ ᱞᱟᱹᱜᱤᱫ ᱟᱞᱜᱟ ᱟᱨ ᱟᱹᱰᱤ ᱨᱟᱹᱥᱠᱟᱹ ᱵᱮᱱᱟᱣ ᱫᱟᱲᱮᱭᱟᱜᱼᱟ᱾ ᱞᱟᱦᱟ ᱯᱟᱲᱦᱟᱣ
ᱥᱤᱮᱥᱮᱥ @ᱥᱠᱳᱯ (ᱮᱢᱰᱤᱮᱱ) “ᱥᱤᱮᱥᱮᱥ @ᱥᱠᱳᱯ”, ᱡᱩᱣᱟᱱ ᱰᱤᱭᱮᱜᱳ ᱨᱳᱰᱨᱤᱜᱩᱜᱮᱡᱽ (ᱥᱤᱮᱥᱮᱥ-ᱴᱨᱤᱠᱥ) ᱯᱷᱟᱭᱟᱨᱯᱷᱚᱠᱥ ᱑᱔᱖ ᱨᱤᱞᱤᱡᱽ ᱱᱚᱴᱥ (ᱯᱷᱟᱭᱟᱨᱯᱷᱚᱠᱥ) ᱵᱽᱨᱟᱣᱩᱡᱟᱨ ᱜᱚᱲᱚ (ᱤᱧ ᱵᱮᱵᱷᱟᱨ ᱫᱟᱲᱮᱭᱟᱜᱼᱟ) ᱯᱚᱥᱟᱨ ᱥᱤ ᱮᱥ ᱮᱥ ᱯᱷᱨᱟᱢᱣᱟᱨᱠ (ᱥᱤ ᱮᱥ ᱮᱥ ᱒᱐᱒᱔ ᱨᱮᱭᱟᱜ ᱚᱵᱚᱥᱛᱟ) “ᱥᱤᱮᱥᱮᱥ ᱨᱮ “ᱥᱤ”: ᱠᱟᱥᱠᱮᱰ”, ᱛᱷᱚᱢᱥ ᱭᱤᱯ (ᱥᱤᱮᱥᱮᱥ-ᱴᱨᱤᱠᱥ) ᱵᱤ ᱤ ᱮᱢ ᱩᱱᱩᱯᱩᱨᱩᱢ (ᱵᱤ ᱤ ᱮᱢ ᱧᱟᱢ ᱢᱮ)
