ਬੁਨਿਆਦੀ CSS ਦੇ ਸਿਧਾਂਤਾਂ ਨੂੰ ਸਿੱਖਣ ਵੇਲੇ, ਕਿਸੇ ਨੂੰ ਸਾਂਭ-ਸੰਭਾਲ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਮਾਡਿਊਲਰ, ਮੁੜ ਵਰਤੋਂ ਯੋਗ, ਅਤੇ ਵਰਣਨਯੋਗ ਸ਼ੈਲੀਆਂ ਲਿਖਣਾ ਸਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। ਪਰ ਜਦੋਂ ਡਿਵੈਲਪਰ ਅਸਲ-ਸੰਸਾਰ ਦੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਇਹ ਅਕਸਰ ਅਣਇੱਛਤ ਖੇਤਰਾਂ ਵਿੱਚ ਲੀਕ ਹੋਣ ਵਾਲੀਆਂ ਸ਼ੈਲੀਆਂ ਤੋਂ ਬਿਨਾਂ UI ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਜੋੜਨਾ ਅਸੰਭਵ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ। ਇਹ ਮੁੱਦਾ ਅਕਸਰ ਇੱਕ ਸਵੈ-ਪੂਰਤੀ ਲੂਪ ਵਿੱਚ ਬਰਫ਼ਬਾਰੀ ਕਰਦਾ ਹੈ; ਸਟਾਈਲ ਜੋ ਸਿਧਾਂਤਕ ਤੌਰ 'ਤੇ ਇੱਕ ਤੱਤ ਜਾਂ ਕਲਾਸ ਤੱਕ ਦਾਇਰੇ ਵਿੱਚ ਹਨ, ਉੱਥੇ ਦਿਖਾਈ ਦੇਣ ਲੱਗਦੀਆਂ ਹਨ ਜਿੱਥੇ ਉਹ ਸਬੰਧਤ ਨਹੀਂ ਹਨ। ਇਹ ਡਿਵੈਲਪਰ ਨੂੰ ਲੀਕ ਕੀਤੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਹੋਰ ਵੀ ਖਾਸ ਚੋਣਕਾਰ ਬਣਾਉਣ ਲਈ ਮਜ਼ਬੂਰ ਕਰਦਾ ਹੈ, ਜੋ ਫਿਰ ਅਚਾਨਕ ਗਲੋਬਲ ਸਟਾਈਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਦਿੰਦੇ ਹਨ, ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਹੀ। ਸਖ਼ਤ ਕਲਾਸ ਨਾਮ ਸੰਮੇਲਨ, ਜਿਵੇਂ ਕਿ BEM, ਇਸ ਮੁੱਦੇ ਦਾ ਇੱਕ ਸਿਧਾਂਤਕ ਹੱਲ ਹੈ। BEM (ਬਲਾਕ, ਐਲੀਮੈਂਟ, ਮੋਡੀਫਾਇਰ) ਵਿਧੀ CSS ਫਾਈਲਾਂ ਦੇ ਅੰਦਰ ਮੁੜ ਵਰਤੋਂਯੋਗਤਾ ਅਤੇ ਬਣਤਰ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ CSS ਕਲਾਸਾਂ ਨੂੰ ਨਾਮ ਦੇਣ ਦਾ ਇੱਕ ਯੋਜਨਾਬੱਧ ਤਰੀਕਾ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਨਾਮਕਰਨ ਸੰਮੇਲਨ ਤੱਤਾਂ ਅਤੇ ਉਹਨਾਂ ਦੀ ਸਥਿਤੀ ਦਾ ਵਰਣਨ ਕਰਨ ਲਈ ਡੋਮੇਨ ਭਾਸ਼ਾ ਦਾ ਲਾਭ ਲੈ ਕੇ ਬੋਧਾਤਮਕ ਲੋਡ ਨੂੰ ਘਟਾ ਸਕਦੇ ਹਨ, ਅਤੇ ਜੇਕਰ ਸਹੀ ਢੰਗ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਵੱਡੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਸਟਾਈਲ ਬਣਾਈ ਰੱਖਣਾ ਆਸਾਨ ਹੋ ਸਕਦਾ ਹੈ। ਅਸਲ ਸੰਸਾਰ ਵਿੱਚ, ਹਾਲਾਂਕਿ, ਇਹ ਹਮੇਸ਼ਾ ਇਸ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰਦਾ. ਤਰਜੀਹਾਂ ਬਦਲ ਸਕਦੀਆਂ ਹਨ, ਅਤੇ ਤਬਦੀਲੀ ਨਾਲ, ਲਾਗੂ ਕਰਨਾ ਅਸੰਗਤ ਹੋ ਜਾਂਦਾ ਹੈ। HTML ਢਾਂਚੇ ਵਿੱਚ ਛੋਟੀਆਂ ਤਬਦੀਲੀਆਂ ਲਈ ਬਹੁਤ ਸਾਰੇ CSS ਕਲਾਸ ਨਾਮ ਸੰਸ਼ੋਧਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। ਬਹੁਤ ਜ਼ਿਆਦਾ ਇੰਟਰਐਕਟਿਵ ਫਰੰਟ-ਐਂਡ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੇ ਨਾਲ, ਬੀਈਐਮ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹੋਏ ਕਲਾਸ ਦੇ ਨਾਮ ਲੰਬੇ ਅਤੇ ਬੇਲੋੜੇ ਹੋ ਸਕਦੇ ਹਨ (ਉਦਾਹਰਨ ਲਈ, ਐਪ-ਯੂਜ਼ਰ-ਓਵਰਵਿਊ__ਸਟੇਟਸ--ਪ੍ਰਮਾਣਿਤ ਕਰਨਾ), ਅਤੇ ਨਾਮਕਰਨ ਨਿਯਮਾਂ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਾਲਣਾ ਨਾ ਕਰਨਾ ਸਿਸਟਮ ਦੀ ਬਣਤਰ ਨੂੰ ਤੋੜਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਇਸਦੇ ਲਾਭਾਂ ਨੂੰ ਨਕਾਰਿਆ ਜਾਂਦਾ ਹੈ। ਇਹਨਾਂ ਚੁਣੌਤੀਆਂ ਦੇ ਮੱਦੇਨਜ਼ਰ, ਇਹ ਕੋਈ ਹੈਰਾਨੀ ਦੀ ਗੱਲ ਨਹੀਂ ਹੈ ਕਿ ਡਿਵੈਲਪਰ ਫਰੇਮਵਰਕ ਵੱਲ ਮੁੜ ਗਏ ਹਨ, ਟੇਲਵਿੰਡ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ CSS ਫਰੇਮਵਰਕ ਹੈ। ਸਟਾਈਲ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਅਜਿੱਤ ਵਿਸ਼ੇਸ਼ਤਾ ਯੁੱਧ ਦੀ ਤਰ੍ਹਾਂ ਲੜਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਦੀ ਬਜਾਏ, CSS ਕੈਸਕੇਡ ਨੂੰ ਛੱਡਣਾ ਅਤੇ ਉਹਨਾਂ ਸਾਧਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਆਸਾਨ ਹੈ ਜੋ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਲੱਗ-ਥਲੱਗ ਹੋਣ ਦੀ ਗਾਰੰਟੀ ਦਿੰਦੇ ਹਨ। ਡਿਵੈਲਪਰ ਉਪਯੋਗਤਾਵਾਂ 'ਤੇ ਵਧੇਰੇ ਝੁਕਦੇ ਹਨ ਅਸੀਂ ਕਿਵੇਂ ਜਾਣਦੇ ਹਾਂ ਕਿ ਕੁਝ ਡਿਵੈਲਪਰ ਕੈਸਕੇਡਡ ਸਟਾਈਲ ਤੋਂ ਬਚਣ ਦੇ ਚਾਹਵਾਨ ਹਨ? ਇਹ "ਆਧੁਨਿਕ" ਫਰੰਟ-ਐਂਡ ਟੂਲਿੰਗ ਦਾ ਉਭਾਰ ਹੈ - ਜਿਵੇਂ ਕਿ CSS-in-JS ਫਰੇਮਵਰਕ - ਖਾਸ ਤੌਰ 'ਤੇ ਉਸ ਉਦੇਸ਼ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ। ਅਲੱਗ-ਥਲੱਗ ਸਟਾਈਲ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨਾ ਜੋ ਖਾਸ ਹਿੱਸਿਆਂ ਲਈ ਕੱਸ ਕੇ ਘੇਰੇ ਹੋਏ ਹਨ, ਤਾਜ਼ੀ ਹਵਾ ਦੇ ਸਾਹ ਵਾਂਗ ਜਾਪਦਾ ਹੈ। ਇਹ ਚੀਜ਼ਾਂ ਨੂੰ ਨਾਮ ਦੇਣ ਦੀ ਜ਼ਰੂਰਤ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ - ਅਜੇ ਵੀ ਸਭ ਤੋਂ ਵੱਧ ਘਿਣਾਉਣੇ ਅਤੇ ਸਮਾਂ ਬਰਬਾਦ ਕਰਨ ਵਾਲੇ ਫਰੰਟ-ਐਂਡ ਕਾਰਜਾਂ ਵਿੱਚੋਂ ਇੱਕ - ਅਤੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ CSS ਵਿਰਾਸਤ ਦੇ ਲਾਭਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਝੇ ਜਾਂ ਲਾਭ ਉਠਾਏ ਬਿਨਾਂ ਲਾਭਕਾਰੀ ਬਣਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਪਰ CSS ਕੈਸਕੇਡ ਨੂੰ ਖੋਦਣ ਨਾਲ ਆਪਣੀਆਂ ਸਮੱਸਿਆਵਾਂ ਆਉਂਦੀਆਂ ਹਨ. ਉਦਾਹਰਨ ਲਈ, JavaScript ਵਿੱਚ ਕੰਪੋਜ਼ ਕਰਨ ਵਾਲੀਆਂ ਸ਼ੈਲੀਆਂ ਲਈ ਭਾਰੀ ਬਿਲਡ ਕੌਂਫਿਗਰੇਸ਼ਨਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਅਤੇ ਅਕਸਰ ਸ਼ੈਲੀਆਂ ਨੂੰ ਕੰਪੋਨੈਂਟ ਮਾਰਕਅੱਪ ਜਾਂ HTML ਨਾਲ ਅਜੀਬ ਢੰਗ ਨਾਲ ਮਿਲਾਉਂਦੀਆਂ ਹਨ। ਨਾਮਕਰਨ ਪ੍ਰੰਪਰਾਵਾਂ ਨੂੰ ਧਿਆਨ ਨਾਲ ਵਿਚਾਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਆਪਣੇ ਲਈ ਚੋਣਕਾਰਾਂ ਅਤੇ ਪਛਾਣਕਰਤਾਵਾਂ (ਜਿਵੇਂ ਕਿ, .jsx-3130221066) ਨੂੰ ਸਵੈਚਲਿਤ ਕਰਨ ਲਈ ਬਿਲਡ ਟੂਲਸ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਾਂ, ਜਿਸ ਲਈ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਆਪਣੇ ਆਪ ਵਿੱਚ ਇੱਕ ਹੋਰ ਸੂਡੋ-ਭਾਸ਼ਾ ਨੂੰ ਜਾਰੀ ਰੱਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। (ਜਿਵੇਂ ਕਿ ਇਹ ਸਮਝਣ ਦਾ ਬੋਧਿਕ ਬੋਝ ਕਿ ਤੁਹਾਡੇ ਸਾਰੇ ਭਾਗਾਂ ਦੇ ਪ੍ਰਭਾਵ ਕੀ ਕਰਦੇ ਹਨ ਪਹਿਲਾਂ ਹੀ ਕਾਫ਼ੀ ਨਹੀਂ ਸਨ!) ਟੂਲਿੰਗ ਲਈ ਕਲਾਸਾਂ ਦੇ ਨਾਮਕਰਨ ਦੇ ਕੰਮ ਨੂੰ ਹੋਰ ਸੰਖੇਪ ਕਰਨ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਬੁਨਿਆਦੀ ਡੀਬਗਿੰਗ ਅਕਸਰ ਵਿਕਾਸ ਲਈ ਕੰਪਾਇਲ ਕੀਤੇ ਵਿਸ਼ੇਸ਼ ਐਪਲੀਕੇਸ਼ਨ ਸੰਸਕਰਣਾਂ ਤੱਕ ਸੀਮਤ ਹੁੰਦੀ ਹੈ, ਨਾ ਕਿ ਲਾਈਵ ਡੀਬੱਗਿੰਗ ਨੂੰ ਸਮਰਥਨ ਦੇਣ ਵਾਲੀਆਂ ਮੂਲ ਬ੍ਰਾਊਜ਼ਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਜਿਵੇਂ ਕਿ ਡਿਵੈਲਪਰ ਟੂਲਸ। ਇਹ ਲਗਭਗ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਕਿ ਸਾਨੂੰ ਉਹਨਾਂ ਟੂਲਾਂ ਨੂੰ ਡੀਬੱਗ ਕਰਨ ਲਈ ਟੂਲ ਵਿਕਸਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਜੋ ਅਸੀਂ ਵੈੱਬ ਪਹਿਲਾਂ ਹੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ - ਸਭ ਕੁਝ ਮਿਆਰੀ CSS ਲਿਖਣ ਦੇ "ਦਰਦ" ਤੋਂ ਦੂਰ ਭੱਜਣ ਲਈ ਵਰਤ ਰਹੇ ਹਾਂ। ਖੁਸ਼ਕਿਸਮਤੀ ਨਾਲ, ਆਧੁਨਿਕ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾ ਸਿਰਫ਼ ਮਿਆਰੀ CSS ਨੂੰ ਵਧੇਰੇ ਲਚਕਦਾਰ ਬਣਾਉਂਦੀਆਂ ਹਨ ਬਲਕਿ ਸਾਡੇ ਵਰਗੇ ਵਿਕਾਸਕਾਰਾਂ ਨੂੰ ਕੈਸਕੇਡ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਅਤੇ ਇਸਨੂੰ ਸਾਡੇ ਲਈ ਕੰਮ ਕਰਨ ਲਈ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸ਼ਕਤੀ ਦਿੰਦੀਆਂ ਹਨ। CSS ਕੈਸਕੇਡ ਲੇਅਰਸ ਇੱਕ ਵਧੀਆ ਉਦਾਹਰਨ ਹੈ, ਪਰ ਇੱਕ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜੋ ਧਿਆਨ ਦੀ ਹੈਰਾਨੀਜਨਕ ਘਾਟ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ - ਹਾਲਾਂਕਿ ਇਹ ਹੁਣ ਬਦਲ ਰਿਹਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਹਾਲ ਹੀ ਵਿੱਚ ਬੇਸਲਾਈਨ ਅਨੁਕੂਲ ਬਣ ਗਿਆ ਹੈ. CSS @ਸਕੋਪ ਐਟ-ਰੂਲ ਮੈਂ CSS @scope at-rule ਨੂੰ ਸਾਡੇ ਦੁਆਰਾ ਕਵਰ ਕੀਤੀ ਗਈ ਸ਼ੈਲੀ-ਲੀਕ-ਪ੍ਰੇਰਿਤ ਚਿੰਤਾ ਦਾ ਇੱਕ ਸੰਭਾਵੀ ਇਲਾਜ ਮੰਨਦਾ ਹਾਂ, ਜੋ ਸਾਨੂੰ ਐਬਸਟਰੈਕਸ਼ਨਾਂ ਅਤੇ ਵਾਧੂ ਬਿਲਡ ਟੂਲਿੰਗ ਲਈ ਮੂਲ ਵੈੱਬ ਲਾਭਾਂ ਨਾਲ ਸਮਝੌਤਾ ਕਰਨ ਲਈ ਮਜਬੂਰ ਨਹੀਂ ਕਰਦਾ ਹੈ। “@ਸਕੋਪ CSS ਐਟ-ਰੂਲ ਤੁਹਾਨੂੰ ਖਾਸ DOM ਸਬ-ਟ੍ਰੀਜ਼ ਵਿੱਚ ਐਲੀਮੈਂਟਸ ਦੀ ਚੋਣ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ, ਬਹੁਤ ਜ਼ਿਆਦਾ ਖਾਸ ਚੋਣਕਾਰਾਂ ਨੂੰ ਲਿਖੇ ਬਿਨਾਂ, ਜਿਨ੍ਹਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ ਔਖਾ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਡੇ ਚੋਣਕਾਰਾਂ ਨੂੰ DOM ਢਾਂਚੇ ਨਾਲ ਬਹੁਤ ਮਜ਼ਬੂਤੀ ਨਾਲ ਜੋੜੇ ਬਿਨਾਂ, ਤੱਤ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ।”— MDN
ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿੱਚ, ਅਸੀਂ ਵਿਰਾਸਤ, ਕੈਸਕੇਡਿੰਗ, ਜਾਂ ਇੱਥੋਂ ਤੱਕ ਕਿ ਸਰੋਕਾਰਾਂ ਦੇ ਮੂਲ ਵਿਛੋੜੇ ਦੀ ਕੁਰਬਾਨੀ ਦਿੱਤੇ ਬਿਨਾਂ ਖਾਸ ਸਥਿਤੀਆਂ ਵਿੱਚ ਅਲੱਗ-ਥਲੱਗ ਸ਼ੈਲੀਆਂ ਨਾਲ ਕੰਮ ਕਰ ਸਕਦੇ ਹਾਂ।ਜੋ ਕਿ ਫਰੰਟ-ਐਂਡ ਵਿਕਾਸ ਦਾ ਲੰਬੇ ਸਮੇਂ ਤੋਂ ਚੱਲ ਰਿਹਾ ਮਾਰਗਦਰਸ਼ਕ ਸਿਧਾਂਤ ਰਿਹਾ ਹੈ। ਨਾਲ ਹੀ, ਇਸ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਬ੍ਰਾਊਜ਼ਰ ਕਵਰੇਜ ਹੈ। ਅਸਲ ਵਿੱਚ, ਫਾਇਰਫਾਕਸ 146 ਨੇ ਦਸੰਬਰ ਵਿੱਚ @ਸਕੋਪ ਲਈ ਸਮਰਥਨ ਜੋੜਿਆ, ਇਸ ਨੂੰ ਪਹਿਲੀ ਵਾਰ ਬੇਸਲਾਈਨ ਅਨੁਕੂਲ ਬਣਾਇਆ। @ਸਕੋਪ ਨਿਯਮ ਬਨਾਮ BEM ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਬਟਨ ਦੇ ਵਿਚਕਾਰ ਇੱਥੇ ਇੱਕ ਸਧਾਰਨ ਤੁਲਨਾ ਹੈ:
@ਸਕੋਪ ਨਿਯਮ ਘੱਟ ਜਟਿਲਤਾ ਦੇ ਨਾਲ ਸ਼ੁੱਧਤਾ ਲਈ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਡਿਵੈਲਪਰ ਨੂੰ ਹੁਣ ਕਲਾਸ ਦੇ ਨਾਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸੀਮਾਵਾਂ ਬਣਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ, ਜੋ ਬਦਲੇ ਵਿੱਚ, ਉਹਨਾਂ ਨੂੰ ਮੂਲ HTML ਤੱਤਾਂ ਦੇ ਅਧਾਰ ਤੇ ਚੋਣਕਾਰ ਲਿਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ CSS ਕਲਾਸ ਨਾਮ ਪੈਟਰਨਾਂ ਦੀ ਲੋੜ ਨੂੰ ਖਤਮ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਕਲਾਸ ਨਾਮ ਪ੍ਰਬੰਧਨ ਦੀ ਲੋੜ ਨੂੰ ਸਿਰਫ਼ ਦੂਰ ਕਰਕੇ, @scope ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ CSS ਨਾਲ ਜੁੜੇ ਡਰ ਨੂੰ ਦੂਰ ਕਰ ਸਕਦਾ ਹੈ। ਮੁੱਢਲੀ ਵਰਤੋਂ ਸ਼ੁਰੂ ਕਰਨ ਲਈ, @ਸਕੋਪ ਨਿਯਮ ਨੂੰ ਆਪਣੇ CSS ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਇੱਕ ਰੂਟ ਚੋਣਕਾਰ ਪਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ੈਲੀਆਂ ਦਾ ਸਕੋਪ ਕੀਤਾ ਜਾਵੇਗਾ: @ਸਕੋਪ (<ਸਿਲੈਕਟਰ>) { /* ਸ਼ੈਲੀਆਂ ਦਾ ਘੇਰਾ <ਚੋਣਕਾਰ> */ }
ਇਸ ਲਈ, ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਅਸੀਂ ਇੱਕ
@ਸਕੋਪ (ਨੈਵੀ) { ਇੱਕ { /* ਨੈਵੀ ਸਕੋਪ ਦੇ ਅੰਦਰ ਲਿੰਕ ਸਟਾਈਲ */ }
a:ਐਕਟਿਵ { /* ਐਕਟਿਵ ਲਿੰਕ ਸਟਾਈਲ */ }
a:active::before { /* ਵਾਧੂ ਸਟਾਈਲਿੰਗ ਲਈ ਸੂਡੋ-ਐਲੀਮੈਂਟ ਨਾਲ ਐਕਟਿਵ ਲਿੰਕ */ }
@media (ਅਧਿਕਤਮ-ਚੌੜਾਈ: 768px) { ਇੱਕ { /* ਜਵਾਬਦੇਹ ਸਮਾਯੋਜਨ */ } } }
ਇਹ, ਆਪਣੇ ਆਪ 'ਤੇ, ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ੇਸ਼ਤਾ ਨਹੀਂ ਹੈ. ਹਾਲਾਂਕਿ, ਸਕੋਪ ਦੇ ਸ਼ੁਰੂਆਤੀ ਅਤੇ ਅੰਤ ਬਿੰਦੂਆਂ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋਏ, ਇੱਕ ਨਿਚਲੀ ਸੀਮਾ ਬਣਾਉਣ ਲਈ ਸਕੋਪ ਵਿੱਚ ਇੱਕ ਦੂਜੀ ਦਲੀਲ ਸ਼ਾਮਲ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।
/* ul ਦੇ ਅੰਦਰ ਕੋਈ ਵੀ ਤੱਤ ਸਟਾਈਲ ਲਾਗੂ ਨਹੀਂ ਕਰੇਗਾ */ @scope (nav) ਤੋਂ (ul) { ਇੱਕ { ਫੌਂਟ-ਸਾਈਜ਼: 14px; } }
ਇਸ ਅਭਿਆਸ ਨੂੰ ਡੋਨਟ ਸਕੋਪਿੰਗ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇੱਥੇ ਬਹੁਤ ਸਾਰੇ ਤਰੀਕੇ ਹਨ ਜਿਨ੍ਹਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ, ਜਿਸ ਵਿੱਚ DOM ਢਾਂਚੇ ਦੇ ਨਾਲ ਮਿਲਦੇ-ਜੁਲਦੇ, ਉੱਚ-ਵਿਸ਼ੇਸ਼ ਚੋਣਕਾਰਾਂ ਦੀ ਇੱਕ ਲੜੀ ਸ਼ਾਮਲ ਹੈ, a :not pseudo-selector, ਜਾਂ ਵੱਖਰੇ CSS ਨੂੰ ਹੈਂਡਲ ਕਰਨ ਲਈ
/*
ਸਿੱਟਾ ਉਪਯੋਗਤਾ-ਪਹਿਲੇ CSS ਫਰੇਮਵਰਕ, ਜਿਵੇਂ ਕਿ ਟੇਲਵਿੰਡ, ਪ੍ਰੋਟੋਟਾਈਪਿੰਗ ਅਤੇ ਛੋਟੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹਨ। ਉਹਨਾਂ ਦੇ ਲਾਭ ਤੇਜ਼ੀ ਨਾਲ ਘੱਟ ਜਾਂਦੇ ਹਨ, ਹਾਲਾਂਕਿ, ਜਦੋਂ ਦੋ ਤੋਂ ਵੱਧ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਵਾਲੇ ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਪਿਛਲੇ ਕੁਝ ਸਾਲਾਂ ਵਿੱਚ ਫਰੰਟ-ਐਂਡ ਵਿਕਾਸ ਵੱਧ ਤੋਂ ਵੱਧ ਗੁੰਝਲਦਾਰ ਹੋ ਗਿਆ ਹੈ, ਅਤੇ CSS ਕੋਈ ਅਪਵਾਦ ਨਹੀਂ ਹੈ. ਹਾਲਾਂਕਿ @ਸਕੋਪ ਨਿਯਮ ਇੱਕ ਇਲਾਜ ਨਹੀਂ ਹੈ, ਇਹ ਗੁੰਝਲਦਾਰ ਟੂਲਿੰਗ ਦੀ ਜ਼ਰੂਰਤ ਨੂੰ ਘਟਾ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਰਣਨੀਤਕ ਕਲਾਸ ਨਾਮਕਰਨ ਦੀ ਥਾਂ 'ਤੇ ਜਾਂ ਇਸ ਦੇ ਨਾਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ @scope ਇਸ ਨੂੰ ਸੰਭਾਲਣ ਯੋਗ CSS ਲਿਖਣਾ ਆਸਾਨ ਅਤੇ ਵਧੇਰੇ ਮਜ਼ੇਦਾਰ ਬਣਾ ਸਕਦਾ ਹੈ। ਹੋਰ ਪੜ੍ਹਨਾ
CSS @scope (MDN) “CSS @scope”, ਜੁਆਨ ਡਿਏਗੋ ਰੋਡਰਿਗਜ਼ (CSS-ਟ੍ਰਿਕਸ) ਫਾਇਰਫਾਕਸ 146 ਰੀਲੀਜ਼ ਨੋਟਸ (ਫਾਇਰਫਾਕਸ) ਬ੍ਰਾਊਜ਼ਰ ਸਪੋਰਟ (CanIUse) ਪ੍ਰਸਿੱਧ CSS ਫਰੇਮਵਰਕ (CSS 2024 ਦੀ ਸਥਿਤੀ) CSS ਵਿੱਚ "C": ਕੈਸਕੇਡ", ਥਾਮਸ ਯਿੱਪ (CSS-ਟ੍ਰਿਕਸ) BEM ਜਾਣ-ਪਛਾਣ (BEM ਪ੍ਰਾਪਤ ਕਰੋ)
