ꯕꯦꯁꯤꯛ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯄ꯭ꯔꯤꯟꯁꯤꯄꯂꯁꯤꯡ ꯇꯝꯕꯥ ꯃꯇꯃꯗꯥ, ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ ꯃꯦꯟꯇꯦꯅꯦꯕꯤꯂꯤꯇꯤ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯟꯅꯕꯥ ꯃꯣꯗꯨꯂꯔ, ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯑꯃꯁꯨꯡ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯇꯤꯕ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯏꯕꯥ ꯇꯝꯕꯤꯔꯤ꯫ ꯑꯗꯨꯕꯨ ꯗꯤꯕꯦꯂꯄꯔꯁꯤꯡꯅꯥ ꯔꯤꯑꯦꯜ-ꯋꯥꯔꯜꯗ ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯁꯤꯡꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯑꯌꯥꯝꯕꯅꯥ ꯑꯄꯥꯝꯕꯥ ꯃꯐꯃꯁꯤꯡꯗꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯂꯤꯛ ꯇꯧꯗꯅꯥ ꯌꯨ.ꯑꯥꯏ.ꯒꯤ ꯐꯤꯆꯔꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯉꯃꯗꯕꯥ ꯑꯣꯏꯅꯥ ꯐꯥꯑꯣꯏ꯫ ꯃꯁꯤꯒꯤ ꯏꯁꯨ ꯑꯁꯤ ꯑꯌꯥꯝꯕꯅꯥ ꯃꯁꯥꯅꯥ ꯃꯁꯥꯕꯨ ꯃꯄꯨꯡ ꯐꯥꯍꯅꯕꯥ ꯉꯝꯕꯥ ꯂꯨꯞ ꯑꯃꯗꯥ ꯅꯣꯡꯃꯩ ꯀꯥꯞꯂꯤ; ꯊꯤꯑꯣꯔꯤꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯅꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯗꯥ ꯁ꯭ꯀꯣꯞ ꯇꯧꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯅꯥ ꯃꯈꯣꯌꯅꯥ ꯌꯥꯑꯣꯗꯕꯥ ꯃꯐꯃꯗꯥ ꯎꯠꯄꯥ ꯍꯧꯏ꯫ ꯃꯁꯤꯅꯥ ꯗꯤꯕꯦꯂꯄꯔꯗꯥ ꯂꯤꯛ ꯇꯧꯔꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯅꯕꯥ ꯍꯦꯟꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯋꯥꯁꯀꯍꯜꯂꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯃꯈꯣꯌꯅꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ ꯑꯗꯨ ꯑꯁꯣꯏ-ꯑꯉꯥꯝ ꯌꯥꯑꯣꯗꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯏ, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ꯫ ꯕꯤ.ꯏ.ꯑꯦꯝ.ꯒꯨꯝꯕꯥ ꯑꯀꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯅꯦꯝ ꯀꯅꯚꯦꯟꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯋꯥꯐꯝ ꯑꯁꯤꯒꯤ ꯊꯤꯑꯣꯔꯤꯇꯤꯀꯦꯜ ꯁꯣꯂꯨꯁꯟ ꯑꯃꯅꯤ꯫ BEM (ꯕ꯭ꯂꯣꯛ, ꯏꯂꯤꯃꯦꯟꯇ, ꯃꯣꯗꯤꯐꯥꯏꯌꯔ) ꯃꯦꯊꯣꯗꯣꯂꯣꯖꯤ ꯑꯁꯤ CSS ꯐꯥꯏꯂꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯑꯃꯁꯨꯡ ꯁ꯭ꯠꯔꯀꯆꯔ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯟꯅꯕꯥ CSS ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯃꯤꯡ ꯊꯣꯅꯕꯒꯤ ꯁꯤꯁ꯭ꯇꯦꯃꯦꯇꯤꯛ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡ ꯑꯃꯅꯤ꯫ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯃꯤꯡ ꯊꯣꯅꯕꯒꯤ ꯀꯅꯚꯦꯟꯁꯅꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ ꯐꯣꯡꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛꯇꯥ ꯗꯣꯃꯦꯟ ꯂꯦꯉ꯭ꯒꯨꯌꯦꯖ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀꯣꯒꯅꯤꯇꯤꯕ ꯂꯣꯗ ꯍꯟꯊꯍꯅꯕꯥ ꯉꯃꯒꯅꯤ, ꯑꯃꯁꯨꯡ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯔꯕꯗꯤ ꯑꯆꯧꯕꯥ ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯍꯦꯟꯅꯥ ꯂꯥꯌꯊꯣꯀꯍꯅꯕꯥ ꯉꯃꯒꯅꯤ꯫ ꯑꯗꯨꯕꯨ ꯇꯁꯦꯡꯕꯥ ꯃꯥꯂꯦꯝ ꯑꯁꯤꯗꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯗꯨꯃꯛ ꯑꯣꯏꯗꯦ꯫ ꯄ꯭ꯔꯥꯏꯑꯣꯔꯤꯇꯤꯁꯤꯡ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ, ꯑꯃꯁꯨꯡ ꯑꯍꯣꯡꯕꯥ ꯂꯥꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯥ ꯑꯁꯤ ꯂꯦꯞꯄꯥ ꯂꯩꯇꯕꯥ ꯑꯣꯏꯔꯀꯏ꯫ HTML ꯁ꯭ꯠꯔꯀꯆꯔꯗꯥ ꯑꯄꯤꯀꯄꯥ ꯑꯍꯣꯡꯕꯁꯤꯡ ꯑꯁꯤ CSS ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯔꯤꯚꯤꯖꯟ ꯀꯌꯥ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫ ꯌꯥꯝꯅꯥ ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯐ꯭ꯔꯟꯇ-ꯑꯦꯟꯗ ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ, BEM ꯄꯦꯇꯔꯟ ꯇꯨꯡ ꯏꯟꯗꯨꯅꯥ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯡꯅꯥ ꯑꯃꯁꯨꯡ ꯌꯥꯝꯅꯥ ꯂꯨꯕꯥ ꯑꯣꯏꯔꯀꯄꯥ ꯌꯥꯏ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯦꯞ-ꯌꯨꯖꯔ-ꯑꯣꯚꯔꯚꯤꯌꯨ__ꯁ꯭ꯇꯦꯇꯁ--ꯏꯁ-ꯑꯣꯊꯦꯟꯇꯤꯀꯦꯇꯤꯡ), ꯑꯃꯁꯨꯡ ꯅꯦꯃꯤꯡ ꯔꯨꯂꯁꯤꯡ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯉꯥꯛꯅꯥ ꯆꯠꯇꯕꯅꯥ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯤ ꯁ꯭ꯠꯔꯀꯆꯔ ꯑꯁꯤ ꯊꯨꯒꯥꯏꯔꯤ, ꯃꯁꯤꯅꯥ ꯃꯁꯤꯒꯤ ꯀꯥꯟꯅꯕꯥ ꯑꯁꯤ ꯅꯦꯒꯦꯠ ꯇꯧꯏ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯁꯤꯡꯅꯕꯁꯤꯡ ꯑꯁꯤ ꯌꯦꯡꯂꯒꯥ, ꯗꯤꯕꯦꯂꯄꯔꯁꯤꯡꯅꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯗꯥ ꯂꯥꯀꯄꯥ ꯑꯁꯤ ꯑꯉꯀꯄꯥ ꯑꯃꯅꯤ, ꯇꯦꯂꯋꯤꯟꯗ ꯑꯁꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯃꯤꯡ ꯆꯠꯄꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯃꯥꯏꯄꯥꯀꯄꯥ ꯉꯃꯗꯕꯥ ꯁ꯭ꯄꯦꯁꯤꯐꯤꯁꯤꯇꯤ ꯋꯥꯔ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯑꯁꯤ ꯂꯥꯟꯊꯦꯡꯅꯅꯕꯥ ꯍꯣꯠꯅꯕꯗꯒꯤ, ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯗꯤꯕꯦꯂꯄꯔꯁꯤꯡꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯗꯥ ꯍꯦꯟꯅꯥ ꯂꯦꯞꯂꯤ꯫ ꯗꯤꯕꯦꯂꯄꯔ ꯈꯔꯅꯥ ꯀꯦꯁꯀꯦꯗ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯗꯒꯤ ꯂꯥꯞꯅꯥ ꯂꯩꯅꯕꯥ ꯋꯥꯈꯜ ꯄꯣꯀꯏ ꯍꯥꯌꯕꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯀꯔꯝꯅꯥ ꯈꯉꯒꯅꯤ? ꯃꯁꯤ “ꯃꯣꯗꯔꯟ” ꯐ꯭ꯔꯟꯇ-ꯑꯦꯟꯗ ꯇꯨꯂꯤꯡꯒꯤ ꯍꯦꯅꯒꯠꯂꯀꯄꯅꯤ — ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.-ꯏꯟ-ꯖꯦ.ꯑꯦꯁ.ꯀꯤ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯒꯨꯝꯅꯥ — ꯄꯥꯟꯗꯝ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯑꯈꯟꯅꯅꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯕꯥ꯫ ꯑꯀꯛꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯌꯥꯝꯅꯥ ꯀꯟꯅꯥ ꯁ꯭ꯀꯣꯞ ꯇꯧꯕꯥ ꯑꯥꯏꯁꯣꯂꯦꯇꯦꯗ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ ꯑꯁꯤ ꯑꯐꯕꯥ ꯅꯨꯡꯁꯤꯠꯀꯤ ꯁ꯭ꯕꯔ ꯍꯣꯅꯕꯥ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯌꯥꯏ꯫ ꯃꯁꯤꯅꯥ ꯄꯣꯠꯁꯤꯡꯒꯤ ꯃꯃꯤꯡ ꯊꯣꯅꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ — ꯍꯧꯖꯤꯀꯁꯨ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯌꯦꯛꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯇꯝ ꯌꯥꯝꯅꯥ ꯆꯪꯕꯥ ꯐ꯭ꯔꯟꯇ-ꯑꯦꯟꯗ-ꯑꯦꯟꯗꯀꯤ ꯊꯕꯀꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯅꯤ — ꯑꯃꯁꯨꯡ ꯗꯤꯕꯦꯂꯄꯔꯁꯤꯡꯕꯨ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯑꯗꯨꯕꯨ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯦꯁꯀꯦꯗ ꯑꯁꯤ ꯗꯤꯆ ꯇꯧꯕꯗꯥ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯁꯃꯁ꯭ꯌꯥꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯇꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯀꯝꯄꯣꯖ ꯇꯧꯕꯗꯥ ꯑꯀꯅꯕꯥ ꯕꯤꯜꯗ ꯀꯅꯐꯤꯒꯔꯦꯁꯅꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ ꯑꯃꯁꯨꯡ ꯑꯌꯥꯝꯕꯅꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯃꯥꯔꯀꯑꯥꯞ ꯅꯠꯠꯔꯒꯥ HTMLꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯁꯣꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯊꯣꯀꯍꯜꯂꯤ꯫ ꯆꯦꯀꯁꯤꯟꯅꯥ ꯈꯟꯅꯔꯕꯥ ꯃꯃꯤꯡ ꯊꯣꯅꯕꯒꯤ ꯀꯅꯚꯦꯟꯁꯅꯁꯤꯡꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯕꯤꯜꯗ ꯇꯨꯂꯁꯤꯡꯅꯥ ꯑꯩꯈꯣꯌꯒꯤꯗꯃꯛꯇꯥ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯥꯏꯗꯦꯟꯇꯤꯐꯥꯌꯔꯁꯤꯡ ꯑꯣꯇꯣꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯅꯕꯥ ꯑꯌꯥꯕꯥ ꯄꯤꯔꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .jsx-3130221066), ꯃꯁꯤꯅꯥ ꯗꯤꯕꯦꯂꯄꯔꯁꯤꯡꯅꯥ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯑꯃꯁꯨꯡ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯑꯇꯣꯞꯄꯥ ꯁꯨꯞꯅꯒꯤ ꯂꯣꯜ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯆꯠꯃꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ (ꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯀꯤ useEffects ꯄꯨꯝꯅꯃꯛꯅꯥ ꯇꯧꯔꯤꯕꯥ ꯊꯕꯛ ꯑꯗꯨ ꯈꯪꯖꯤꯅꯕꯒꯤ ꯀꯣꯒꯅꯤꯇꯤꯚ ꯂꯣꯗ ꯑꯗꯨ ꯍꯥꯟꯅꯅꯥ ꯃꯇꯤꯛ ꯆꯥꯗꯕꯒꯨꯝ!) ꯀ꯭ꯂꯥꯁꯁꯤꯡꯕꯨ ꯇꯨꯂꯤꯡꯗꯥ ꯃꯃꯤꯡ ꯊꯣꯅꯕꯒꯤ ꯊꯕꯛ ꯑꯁꯤ ꯃꯈꯥ ꯇꯥꯅꯥ ꯑꯦꯕꯁ꯭ꯠꯔꯦꯛꯇ ꯇꯧꯕꯅꯥ ꯕꯦꯁꯤꯛ ꯗꯤꯕꯥꯒꯤꯡ ꯑꯁꯤ ꯑꯌꯥꯝꯕꯅꯥ ꯗꯤꯕꯦꯂꯄꯔ ꯇꯨꯂꯁꯤꯡꯒꯨꯝꯕꯥ ꯂꯥꯏꯕ ꯗꯤꯕꯥꯒꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯅꯦꯇꯤꯕ ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯐꯤꯆꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇꯀꯤꯗꯃꯛꯇꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯦꯞꯂꯤꯀꯦꯁꯟ ꯚꯔꯖꯅꯁꯤꯡꯗꯥ ꯊꯤꯡꯏ ꯍꯥꯌꯕꯅꯤ꯫ ꯃꯁꯤ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯋꯦꯕꯅꯥ ꯍꯥꯟꯅꯅꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯗꯨ ꯑꯦꯕꯁ꯭ꯠꯔꯦꯛꯇ ꯇꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯈꯨꯠꯂꯥꯌꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯕꯒ ꯇꯧꯅꯕꯥ ꯈꯨꯠꯂꯥꯌꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯨꯝꯅꯥ — ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯂꯥꯏꯕꯛ ꯐꯕꯗꯤ, ꯃꯣꯗꯔꯟ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯐꯤꯆꯔꯁꯤꯡꯅꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯀꯦꯁꯀꯦꯗ ꯂꯦꯌꯔꯁꯤꯡ ꯑꯁꯤ ꯑꯆꯧꯕꯥ ꯈꯨꯗꯝ ꯑꯃꯅꯤ, ꯑꯗꯨꯕꯨ ꯑꯉꯀꯄꯥ ꯃꯑꯣꯡꯗꯥ ꯃꯤꯠꯌꯦꯡ ꯆꯪꯗꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯐꯤꯆꯔ ꯑꯃꯁꯨ ꯂꯩꯔꯤ — ꯑꯗꯨꯕꯨ ꯍꯧꯖꯤꯛꯇꯤ ꯃꯁꯤ ꯍꯟꯗꯛꯇꯥ ꯕꯦꯖꯂꯥꯏꯟ ꯀꯝꯄꯦꯇꯤꯕꯜ ꯑꯣꯏꯔꯀꯄꯗꯒꯤ ꯍꯣꯡꯂꯛꯂꯤ꯫ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ @ꯁ꯭ꯀꯣꯞ ꯑꯦꯠ-ꯔꯨꯜ꯫ ꯑꯩꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.@ꯁ꯭ꯀꯣꯞ ꯑꯦꯠ-ꯔꯨꯜ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯀꯣꯅꯁꯤꯜꯂꯤꯕꯥ ꯃꯈꯜ ꯑꯁꯤꯒꯤ ꯁ꯭ꯇꯥꯏꯜ-ꯂꯤꯛ-ꯏꯟꯗꯨꯁ ꯇꯧꯔꯕꯥ ꯋꯥꯈꯜ ꯋꯥꯕꯥ ꯑꯁꯤꯒꯤ ꯄꯣꯇꯦꯟꯁꯤꯌꯦꯜ ꯍꯤꯗꯥꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯧꯏ, ꯃꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯗꯥ ꯑꯦꯕꯁ꯭ꯠꯔꯦꯛꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯍꯦꯅꯕꯥ ꯕꯤꯜꯗ ꯇꯨꯂꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯅꯦꯇꯤꯕ ꯋꯦꯕ ꯑꯦꯗꯚꯥꯟꯇꯦꯖꯁꯤꯡꯗꯥ ꯁꯣꯀꯍꯟꯅꯕꯥ ꯋꯥꯁꯀꯄꯤꯗꯕꯥ ꯑꯃꯅꯤ꯫ “@scope CSS at-rule ꯑꯁꯤꯅꯥ ꯑꯀꯛꯅꯕꯥ DOM ꯁꯕꯠꯔꯤꯁꯤꯡꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯈꯅꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯏ, ꯃꯁꯤꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯌꯥꯝꯅꯥ ꯂꯨꯕꯥ ꯑꯀꯛꯅꯕꯥ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ ꯏꯕꯥ ꯌꯥꯗꯅꯥ, ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡꯕꯨ DOM ꯁ꯭ꯠꯔꯀꯆꯔꯗꯥ ꯌꯥꯝꯅꯥ ꯀꯟꯅꯥ ꯀꯞꯂꯤꯡ ꯇꯧꯗꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯕꯨ ꯑꯀꯛꯅꯅꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯕꯥ ꯉꯃꯍꯜꯂꯤ꯫”— MDN
ꯑꯇꯣꯞꯄꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯑꯃꯗꯥ ꯍꯥꯌꯔꯕꯗꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯊꯧꯗꯣꯀꯁꯤꯡꯗꯥ ꯑꯥꯏꯁꯣꯂꯦꯇꯦꯗ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯏꯅꯍꯦꯔꯤꯇꯦꯁꯟ, ꯀꯦꯁꯀꯦꯗꯤꯡ, ꯅꯠꯔꯒꯥ ꯑꯋꯥꯕꯁꯤꯡꯒꯤ ꯕꯦꯁꯤꯛ ꯁꯦꯄꯥꯔꯦꯁꯟ ꯐꯥꯑꯣꯕꯥ ꯀꯠꯊꯣꯛꯂꯒꯥ꯫ꯃꯗꯨ ꯐ꯭ꯔꯟꯇ-ꯑꯦꯟꯗ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇꯀꯤ ꯃꯇꯝ ꯁꯥꯡꯅꯥ ꯆꯠꯅꯔꯛꯂꯕꯥ ꯒꯥꯏꯗꯂꯥꯏꯟ ꯄ꯭ꯔꯤꯟꯁꯤꯄꯜ ꯑꯃꯥ ꯑꯣꯏꯗꯨꯅꯥ ꯂꯥꯛꯂꯤ꯫ ꯄ꯭ꯂꯥꯁ, ꯃꯁꯤꯗꯥ ꯑꯐꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯚꯔꯦꯖ ꯂꯩ꯫ ꯇꯁꯦꯡꯕꯗꯤ, ꯐꯥꯏꯔꯐꯛꯁ ꯱꯴꯶ꯅꯥ ꯗꯤꯁꯦꯝꯕꯔꯗꯥ @scope ꯒꯤꯗꯃꯛ ꯁꯄꯣꯔꯠ ꯍꯥꯄꯆꯤꯜꯂꯀꯈꯤ, ꯃꯁꯤꯅꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯕꯦꯖꯂꯥꯏꯟ ꯀꯝꯄꯦꯇꯤꯇꯤꯕ ꯑꯣꯏꯍꯅꯈꯤ꯫ ꯃꯈꯥꯗꯥ BEM ꯄꯦꯇꯔꯟ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯕꯇꯟ ꯑꯃꯒꯥ @scope ꯔꯨꯂꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯥ ꯑꯃꯥ ꯄꯤꯔꯤ: ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫ <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ="ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ-ꯕꯇꯟ"> ꯑꯩꯗꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯣ꯫ →ꯒꯤ ꯃꯇꯥꯡꯗꯥ꯫ ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫
<ꯁ꯭ꯇꯥꯏꯜ> ꯍꯥꯌꯕꯁꯤꯅꯤ꯫ @ꯁ꯭ꯀꯣꯞ (.ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ-ꯕꯇꯟ) { span:first-child { /* ꯕꯇꯟ ꯇꯦꯛꯁ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ */ } span:last-child { /* ꯕꯇꯟ ꯑꯥꯏꯀꯟ ꯃꯑꯣꯡꯁꯤꯡ */ } } ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫
@scope ꯔꯨꯜ ꯑꯁꯤꯅꯥ ꯍꯦꯟꯅꯥ ꯀꯝꯞꯂꯦꯛꯁ ꯑꯣꯏꯕꯥ ꯄ꯭ꯔꯤꯁꯤꯁꯟ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫ ꯗꯤꯕꯦꯂꯄꯔꯅꯥ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯉꯃꯈꯩ ꯁꯦꯝꯕꯥ ꯃꯊꯧ ꯇꯥꯗ꯭ꯔꯦ, ꯃꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯃꯈꯣꯌꯗꯥ ꯅꯦꯇꯤꯕ HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ ꯏꯕꯥ ꯌꯥꯍꯜꯂꯤ, ꯃꯁꯤꯅꯥ ꯄ꯭ꯔꯤꯁ꯭ꯛꯔꯤꯄꯇꯤꯕ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯀ꯭ꯂꯥꯁ ꯅꯦꯝ ꯄꯦꯇꯔꯅꯁꯤꯡꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯗꯨ ꯀꯣꯀꯍꯜꯂꯤ꯫ ꯀ꯭ꯂꯥꯁ ꯅꯦꯝ ꯃꯦꯅꯦꯖꯃꯦꯟꯇꯀꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯗꯨ ꯁꯨꯞꯅꯇꯒꯤ ꯂꯧꯊꯣꯛꯇꯨꯅꯥ, @scopeꯅꯥ ꯑꯆꯧꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡꯗꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯀꯤꯕꯥ ꯑꯗꯨ ꯍꯟꯊꯍꯅꯕꯥ ꯉꯃꯒꯅꯤ꯫
ꯕꯦꯁꯤꯛ ꯑꯣꯏꯕꯥ ꯁꯤꯖꯤꯟꯅꯐꯝ꯫
ꯍꯧꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ, ꯅꯍꯥꯛꯀꯤ CSSꯗꯥ @scope ꯔꯨꯜ ꯍꯥꯄꯆꯤꯜꯂꯨ ꯑꯃꯁꯨꯡ ꯀꯔꯝꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯗꯥ ꯁ꯭ꯀꯣꯞ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯕꯒꯤ ꯔꯨꯠ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯍꯥꯄꯀꯗꯕꯅꯤ:
@ꯁ꯭ꯀꯣꯞ (<ꯁꯦꯂꯦꯛꯇꯔ>) {
/*
ꯑꯗꯨꯅꯥ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ
@ꯁ꯭ꯀꯣꯞ (ꯅꯥꯚ) { a { /* nav ꯁ꯭ꯀꯣꯄꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ */ }
a:active { /* ꯑꯦꯛꯇꯤꯕ ꯂꯤꯉ꯭ꯛ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ */ }
a:active::before { /* ꯑꯍꯦꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤꯗꯃꯛ ꯁ꯭ꯌꯨꯗꯣ-ꯏꯂꯤꯃꯦꯟꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯂꯤꯉ꯭ꯛ */ }
@ꯃꯤꯗꯤꯌꯥ (ꯃꯦꯛꯁ-ꯋꯥꯏꯗ: ꯷꯶꯸px) { a { /* ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯦꯗꯖꯁ꯭ꯇꯃꯦꯟꯇꯁꯤꯡ */ } . } }
ꯃꯁꯤ, ꯃꯁꯥ ꯃꯊꯟꯇꯥ, ꯒ꯭ꯔꯥꯎꯟꯗꯕ꯭ꯔꯦꯀꯤꯡ ꯐꯤꯆꯔ ꯑꯃꯅꯤ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯁ꯭ꯀꯣꯄꯀꯤ ꯍꯧꯔꯀꯐꯝ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯥ ꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯏꯐꯦꯛꯇꯤꯕ ꯑꯣꯏꯅꯥ ꯂꯦꯄꯊꯣꯛꯇꯨꯅꯥ ꯂꯣꯌꯔꯕꯥ ꯉꯃꯈꯩ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯁ꯭ꯀꯣꯄꯇꯥ ꯑꯅꯤꯁꯨꯕꯥ ꯑꯥꯔꯒꯨꯃꯦꯟꯇ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ꯫
/* ulꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯅꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯔꯣꯏ */ @ꯁ꯭ꯀꯣꯞ (ꯅꯥꯚ)ꯗꯒꯤ (ꯎꯜ) { a { ꯐꯣꯟꯇ-ꯁꯥꯏꯖ: ꯱꯴px; } }
ꯃꯁꯤꯒꯤ ꯊꯧꯑꯣꯡ ꯑꯁꯤꯕꯨ ꯗꯣꯅꯠ ꯁ꯭ꯀꯣꯄꯤꯡ ꯍꯥꯌꯅꯥ ꯀꯧꯏ, ꯑꯃꯁꯨꯡ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯑꯦꯞꯔꯣꯆ ꯀꯌꯥ ꯂꯩ, ꯃꯈꯣꯌꯁꯤꯡ ꯑꯗꯨꯗꯤ DOM ꯁ꯭ꯠꯔꯀꯆꯔꯒꯥ ꯌꯥꯝꯅꯥ ꯀꯟꯅꯥ ꯀꯞꯂ ꯇꯧꯕꯥ ꯃꯥꯟꯅꯕꯥ, ꯌꯥꯝꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯥ, :ꯅꯣꯠ ꯄ꯭ꯁꯨꯗꯣ-ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ, ꯅꯠꯠꯔꯒꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯁꯤꯡ ꯍꯦꯟꯗꯜ ꯇꯧꯅꯕꯥ
/*
ꯂꯣꯏꯁꯤꯅꯕꯥ ꯉꯝꯕꯥ꯫ ꯇꯦꯂꯋꯤꯟꯗꯒꯨꯝꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ-ꯐꯔꯁ꯭ꯠ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯅꯥ ꯄ꯭ꯔꯣꯇꯣꯇꯥꯏꯄꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯄꯤꯀꯄꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯐꯖꯅꯥ ꯊꯕꯛ ꯇꯧꯏ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯗꯤꯕꯦꯂꯄꯔ ꯃꯔꯤꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯌꯥꯑꯣꯕꯥ ꯑꯆꯧꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯃꯈꯣꯌꯒꯤ ꯀꯥꯟꯅꯕꯥ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ ꯍꯟꯊꯔꯀꯏ꯫ ꯍꯧꯈꯤꯕꯥ ꯆꯍꯤ ꯈꯔꯁꯤꯗꯥ ꯐ꯭ꯔꯟꯇ-ꯑꯦꯟꯗ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇ ꯑꯁꯤ ꯍꯦꯟꯅꯥ ꯀꯝꯄꯤꯇꯤꯇꯤꯕ ꯑꯣꯏꯔꯛꯂꯤ, ꯑꯃꯁꯨꯡ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. @scope ꯔꯨꯜ ꯑꯁꯤ ꯂꯥꯌꯦꯡꯕꯥ ꯉꯃꯗꯕꯥ ꯑꯣꯏꯔꯕꯁꯨ, ꯃꯁꯤꯅꯥ ꯀꯝꯞꯂꯦꯛꯁ ꯇꯨꯂꯤꯡꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯍꯟꯊꯍꯅꯕꯥ ꯉꯃꯒꯅꯤ꯫ ꯁ꯭ꯠꯔꯦꯇꯦꯖꯤꯛ ꯀ꯭ꯂꯥꯁ ꯅꯦꯃꯤꯡꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ, @scopeꯅꯥ ꯃꯦꯟꯇꯦꯅꯦꯕꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯃꯈꯥ ꯇꯥꯅꯥ ꯄꯥꯕꯥ꯫
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.@ꯁ꯭ꯀꯣꯞ (ꯑꯦꯝ.ꯗꯤ.ꯑꯦꯟ.) “ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. @ꯁ꯭ꯀꯣꯞ”, ꯖꯨꯌꯥꯟ ꯗꯤꯌꯒꯣ ꯔꯣꯗ꯭ꯔꯤꯒꯦꯖ (ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.-ꯇ꯭ꯔꯤꯀꯁ) ꯐꯥꯏꯔꯐꯛꯁ ꯱꯴꯶ ꯔꯤꯂꯤꯖ ꯇꯧꯕꯒꯤ ꯅꯣꯇꯁꯤꯡ (ꯐꯥꯏꯔꯐꯛꯁ) ꯕ꯭ꯔꯥꯎꯖꯔ ꯁꯄꯣꯔꯠ (CanIUse) ꯃꯤꯌꯥꯝꯅꯥ ꯄꯥꯝꯅꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡ (ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯔꯥꯖ꯭ꯌ ꯲꯰꯲꯴) “ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯂꯩꯕꯥ “ꯁꯤ”: ꯀꯦꯁꯀꯦꯗ”, ꯊꯣꯃꯥꯁ ꯌꯤꯞ (ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.-ꯇ꯭ꯔꯤꯛꯁ) ꯕꯤ.ꯏ.ꯑꯦꯝ.ꯒꯤ ꯏꯅꯠꯔꯣꯗ꯭ꯌꯨꯁꯟ (ꯕꯤ.ꯏ.ꯑꯦꯝ. ꯐꯪꯕꯤꯌꯨ)