ਪਹੁੰਚ

ਬੂਟਸਟਰੈਪ ਨੂੰ ਬਣਾਉਣ ਅਤੇ ਸਾਂਭਣ ਲਈ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਮਾਰਗਦਰਸ਼ਕ ਸਿਧਾਂਤਾਂ, ਰਣਨੀਤੀਆਂ ਅਤੇ ਤਕਨੀਕਾਂ ਬਾਰੇ ਜਾਣੋ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਆਪਣੇ ਆਪ ਨੂੰ ਹੋਰ ਆਸਾਨੀ ਨਾਲ ਅਨੁਕੂਲਿਤ ਅਤੇ ਵਿਸਤਾਰ ਕਰ ਸਕੋ।

ਜਦੋਂ ਕਿ ਸ਼ੁਰੂਆਤੀ ਪੰਨੇ ਪ੍ਰੋਜੈਕਟ ਦਾ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਟੂਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਅਤੇ ਇਹ ਕੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ, ਇਹ ਦਸਤਾਵੇਜ਼ ਇਸ ਗੱਲ 'ਤੇ ਕੇਂਦ੍ਰਤ ਕਰਦਾ ਹੈ ਕਿ ਅਸੀਂ ਉਹ ਚੀਜ਼ਾਂ ਕਿਉਂ ਕਰਦੇ ਹਾਂ ਜੋ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਰਦੇ ਹਾਂ। ਇਹ ਵੈੱਬ 'ਤੇ ਬਣਾਉਣ ਦੇ ਸਾਡੇ ਫ਼ਲਸਫ਼ੇ ਦੀ ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਦੂਸਰੇ ਸਾਡੇ ਤੋਂ ਸਿੱਖ ਸਕਣ, ਸਾਡੇ ਨਾਲ ਯੋਗਦਾਨ ਪਾ ਸਕਣ, ਅਤੇ ਸੁਧਾਰ ਕਰਨ ਵਿੱਚ ਸਾਡੀ ਮਦਦ ਕਰ ਸਕਣ।

ਕੋਈ ਅਜਿਹੀ ਚੀਜ਼ ਦੇਖੋ ਜੋ ਸਹੀ ਨਹੀਂ ਲੱਗਦੀ, ਜਾਂ ਸ਼ਾਇਦ ਬਿਹਤਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ? ਇੱਕ ਮੁੱਦਾ ਖੋਲ੍ਹੋ — ਅਸੀਂ ਤੁਹਾਡੇ ਨਾਲ ਇਸ 'ਤੇ ਚਰਚਾ ਕਰਨਾ ਪਸੰਦ ਕਰਾਂਗੇ।

ਸੰਖੇਪ

ਅਸੀਂ ਇਹਨਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਵਿੱਚ ਹੋਰ ਡੁਬਕੀ ਲਗਾਵਾਂਗੇ, ਪਰ ਉੱਚ ਪੱਧਰ 'ਤੇ, ਇੱਥੇ ਉਹ ਹੈ ਜੋ ਸਾਡੀ ਪਹੁੰਚ ਦੀ ਅਗਵਾਈ ਕਰਦਾ ਹੈ।

• ਭਾਗ ਜਵਾਬਦੇਹ ਅਤੇ ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ
• ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਬੇਸ ਕਲਾਸ ਨਾਲ ਬਣਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਰਾਹੀਂ ਵਧਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ
• ਕੰਪੋਨੈਂਟ ਰਾਜਾਂ ਨੂੰ ਇੱਕ ਆਮ z-ਇੰਡੈਕਸ ਸਕੇਲ ਦੀ ਪਾਲਣਾ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ
• ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, JavaScript ਉੱਤੇ ਇੱਕ HTML ਅਤੇ CSS ਲਾਗੂਕਰਨ ਨੂੰ ਤਰਜੀਹ ਦਿਓ
• ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਕਸਟਮ ਸਟਾਈਲ ਉੱਤੇ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ
• ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਸਖ਼ਤ HTML ਲੋੜਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਤੋਂ ਬਚੋ (ਬੱਚਿਆਂ ਦੇ ਚੋਣਕਾਰ)

ਜਵਾਬਦੇਹ

ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਜਵਾਬਦੇਹ ਸ਼ੈਲੀਆਂ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਉਣ ਲਈ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਪਹੁੰਚ ਜਿਸ ਨੂੰ ਅਕਸਰ ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਕਿਹਾ ਜਾਂਦਾ ਹੈ । ਅਸੀਂ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਇਸ ਸ਼ਬਦ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਅਤੇ ਵੱਡੇ ਪੱਧਰ 'ਤੇ ਇਸ ਨਾਲ ਸਹਿਮਤ ਹੁੰਦੇ ਹਾਂ, ਪਰ ਕਈ ਵਾਰ ਇਹ ਬਹੁਤ ਵਿਆਪਕ ਹੋ ਸਕਦਾ ਹੈ। ਹਾਲਾਂਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਹਰੇਕ ਭਾਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਵਾਬਦੇਹ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਇਹ ਜਵਾਬਦੇਹ ਪਹੁੰਚ ਤੁਹਾਨੂੰ ਸਟਾਈਲ ਜੋੜਨ ਲਈ ਧੱਕ ਕੇ CSS ਓਵਰਰਾਈਡਾਂ ਨੂੰ ਘਟਾਉਣ ਬਾਰੇ ਹੈ ਕਿਉਂਕਿ ਵਿਊਪੋਰਟ ਵੱਡਾ ਹੁੰਦਾ ਜਾਂਦਾ ਹੈ।

ਪੂਰੇ ਬੂਟਸਟਰੈਪ ਵਿੱਚ, ਤੁਸੀਂ ਇਸਨੂੰ ਸਾਡੇ ਮੀਡੀਆ ਸਵਾਲਾਂ ਵਿੱਚ ਸਭ ਤੋਂ ਸਪਸ਼ਟ ਰੂਪ ਵਿੱਚ ਦੇਖੋਗੇ। ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਅਸੀਂ ਉਹਨਾਂ min-widthਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜੋ ਇੱਕ ਖਾਸ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਲਾਗੂ ਹੋਣੀਆਂ ਸ਼ੁਰੂ ਹੋ ਜਾਂਦੀਆਂ ਹਨ ਅਤੇ ਉੱਚੇ ਬ੍ਰੇਕਪੁਆਇੰਟ ਤੱਕ ਪਹੁੰਚਦੀਆਂ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਤੋਂ ਅਨੰਤ .d-noneਤੱਕ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। min-width: 0ਦੂਜੇ ਪਾਸੇ, ਇੱਕ .d-md-noneਮੱਧਮ ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਉੱਪਰ ਤੋਂ ਲਾਗੂ ਹੁੰਦਾ ਹੈ।

ਕਦੇ-ਕਦਾਈਂ ਅਸੀਂ ਉਦੋਂ ਵਰਤਾਂਗੇ max-widthਜਦੋਂ ਕਿਸੇ ਹਿੱਸੇ ਦੀ ਅੰਦਰੂਨੀ ਗੁੰਝਲਤਾ ਨੂੰ ਇਸਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਕਦੇ-ਕਦਾਈਂ, ਇਹ ਓਵਰਰਾਈਡ ਸਾਡੇ ਭਾਗਾਂ ਤੋਂ ਮੁੱਖ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਮੁੜ ਲਿਖਣ ਨਾਲੋਂ ਲਾਗੂ ਕਰਨ ਅਤੇ ਸਮਰਥਨ ਕਰਨ ਲਈ ਕਾਰਜਸ਼ੀਲ ਅਤੇ ਮਾਨਸਿਕ ਤੌਰ 'ਤੇ ਸਪੱਸ਼ਟ ਹੁੰਦੇ ਹਨ। ਅਸੀਂ ਇਸ ਪਹੁੰਚ ਨੂੰ ਸੀਮਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਪਰ ਸਮੇਂ-ਸਮੇਂ 'ਤੇ ਇਸਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ।

ਕਲਾਸਾਂ

ਸਾਡੇ ਰੀਬੂਟ ਤੋਂ ਇਲਾਵਾ, ਇੱਕ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਸਧਾਰਣਕਰਨ ਸਟਾਈਲਸ਼ੀਟ, ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਸ਼ੈਲੀਆਂ ਦਾ ਉਦੇਸ਼ ਕਲਾਸਾਂ ਨੂੰ ਚੋਣਕਾਰ ਵਜੋਂ ਵਰਤਣਾ ਹੈ। input[type="text"]ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਕਿਸਮ ਦੇ ਚੋਣਕਾਰਾਂ (ਉਦਾਹਰਨ ਲਈ, ) ਅਤੇ ਬਾਹਰੀ ਮੂਲ ਕਲਾਸਾਂ (ਉਦਾਹਰਨ ਲਈ, ) ਤੋਂ ਸਟੀਅਰਿੰਗ ਸਾਫ਼ ਕਰਨਾ .parent .childਜੋ ਸਟਾਈਲ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਬਹੁਤ ਖਾਸ ਬਣਾਉਂਦੇ ਹਨ।

ਇਸ ਤਰ੍ਹਾਂ, ਕੰਪੋਨੈਂਟਸ ਇੱਕ ਬੇਸ ਕਲਾਸ ਦੇ ਨਾਲ ਬਣਾਏ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ ਜਿਸ ਵਿੱਚ ਆਮ, ਓਵਰਰਾਈਡ ਨਾ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਜਾਇਦਾਦ-ਮੁੱਲ ਦੇ ਜੋੜੇ ਹੋਣ। ਉਦਾਹਰਨ ਲਈ, .btnਅਤੇ .btn-primary. ਅਸੀਂ .btnਸਾਰੀਆਂ ਆਮ ਸ਼ੈਲੀਆਂ ਜਿਵੇਂ ਕਿ display, padding, ਅਤੇ ਲਈ ਵਰਤਦੇ ਹਾਂ border-width। ਫਿਰ ਅਸੀਂ ਮੋਡੀਫਾਇਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜਿਵੇਂ .btn-primaryਕਿ ਰੰਗ, ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ, ਬਾਰਡਰ-ਰੰਗ, ਆਦਿ ਸ਼ਾਮਲ ਕਰਨਾ।

ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਸਿਰਫ਼ ਉਦੋਂ ਕੀਤੀ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ ਜਦੋਂ ਕਈ ਗੁਣਾਂ ਜਾਂ ਮੁੱਲਾਂ ਨੂੰ ਕਈ ਰੂਪਾਂ ਵਿੱਚ ਬਦਲਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮੋਡੀਫਾਇਰ ਹਮੇਸ਼ਾ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੁੰਦੇ, ਇਸ ਲਈ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਕੋਡ ਦੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਬਣਾਉਂਦੇ ਸਮੇਂ ਬੇਲੋੜੇ ਓਵਰਰਾਈਡਾਂ ਨੂੰ ਰੋਕ ਰਹੇ ਹੋ। ਸੋਧਕਾਂ ਦੀਆਂ ਚੰਗੀਆਂ ਉਦਾਹਰਣਾਂ ਸਾਡੀਆਂ ਥੀਮ ਕਲਰ ਕਲਾਸਾਂ ਅਤੇ ਆਕਾਰ ਦੇ ਰੂਪ ਹਨ।

z-ਇੰਡੈਕਸ ਸਕੇਲ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਦੋ z-indexਸਕੇਲ ਹੁੰਦੇ ਹਨ — ਇੱਕ ਕੰਪੋਨੈਂਟ ਅਤੇ ਓਵਰਲੇ ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰ ਤੱਤ।

ਕੰਪੋਨੈਂਟ ਤੱਤ

• ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕੁਝ ਭਾਗਾਂ ਨੂੰ borderਸੰਪੱਤੀ ਨੂੰ ਸੋਧੇ ਬਿਨਾਂ ਡਬਲ ਬਾਰਡਰ ਨੂੰ ਰੋਕਣ ਲਈ ਓਵਰਲੈਪਿੰਗ ਤੱਤਾਂ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਬਟਨ ਸਮੂਹ, ਇਨਪੁਟ ਸਮੂਹ, ਅਤੇ ਪੰਨਾਬੰਦੀ।
• ਇਹ ਹਿੱਸੇ ਦੁਆਰਾ ਦੇ ਇੱਕ ਮਿਆਰੀ z-indexਸਕੇਲ ਨੂੰ ਸਾਂਝਾ ਕਰਦੇ ਹਨ ।03
• 0ਡਿਫਾਲਟ ਹੈ (ਸ਼ੁਰੂਆਤੀ), 1is :hover, 2is :active/ .active, ਅਤੇ 3is :focus.
• ਇਹ ਪਹੁੰਚ ਸਭ ਤੋਂ ਵੱਧ ਉਪਭੋਗਤਾ ਤਰਜੀਹ ਦੀਆਂ ਸਾਡੀਆਂ ਉਮੀਦਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ। ਜੇਕਰ ਕੋਈ ਤੱਤ ਕੇਂਦਰਿਤ ਹੈ, ਤਾਂ ਇਹ ਦੇਖਣ ਵਿੱਚ ਹੈ ਅਤੇ ਉਪਭੋਗਤਾ ਦੇ ਧਿਆਨ ਵਿੱਚ ਹੈ। ਕਿਰਿਆਸ਼ੀਲ ਤੱਤ ਦੂਜੇ ਨੰਬਰ 'ਤੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ। ਹੋਵਰ ਤੀਜੇ ਨੰਬਰ 'ਤੇ ਹੈ ਕਿਉਂਕਿ ਇਹ ਉਪਭੋਗਤਾ ਦੇ ਇਰਾਦੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਪਰ ਲਗਭਗ ਕੁਝ ਵੀ ਹੋਵਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਓਵਰਲੇ ਕੰਪੋਨੈਂਟ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਈ ਭਾਗ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜੋ ਕਿਸੇ ਕਿਸਮ ਦੇ ਓਵਰਲੇਅ ਵਜੋਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਇਸ ਵਿੱਚ, ਸਭ ਤੋਂ ਉੱਚੇ z-index, ਡ੍ਰੌਪਡਾਊਨ, ਸਥਿਰ ਅਤੇ ਸਟਿੱਕੀ ਨੇਵਬਾਰ, ਮਾਡਲ, ਟੂਲਟਿਪਸ ਅਤੇ ਪੌਪਓਵਰ ਸ਼ਾਮਲ ਹਨ। ਇਹਨਾਂ ਹਿੱਸਿਆਂ ਦਾ ਆਪਣਾ z-indexਪੈਮਾਨਾ ਹੈ ਜੋ ਕਿ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ 1000। ਇਹ ਸ਼ੁਰੂਆਤੀ ਨੰਬਰ ਆਪਹੁਦਰੇ ਢੰਗ ਨਾਲ ਚੁਣਿਆ ਗਿਆ ਸੀ ਅਤੇ ਸਾਡੀ ਸ਼ੈਲੀਆਂ ਅਤੇ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਕਸਟਮ ਸਟਾਈਲਾਂ ਵਿਚਕਾਰ ਇੱਕ ਛੋਟੇ ਬਫਰ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ।

ਹਰੇਕ ਓਵਰਲੇ ਕੰਪੋਨੈਂਟ ਆਪਣੇ z-indexਮੁੱਲ ਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਥੋੜ੍ਹਾ ਵਧਾਉਂਦਾ ਹੈ ਕਿ ਆਮ UI ਸਿਧਾਂਤ ਉਪਭੋਗਤਾ ਫੋਕਸ ਜਾਂ ਹੋਵਰ ਕੀਤੇ ਤੱਤਾਂ ਨੂੰ ਹਰ ਸਮੇਂ ਦ੍ਰਿਸ਼ ਵਿੱਚ ਰਹਿਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਮਾਡਲ ਡੌਕੂਮੈਂਟ ਬਲੌਕ ਕਰਨਾ ਹੈ (ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਮਾਡਲ ਦੀ ਕਾਰਵਾਈ ਲਈ ਕੋਈ ਹੋਰ ਕਾਰਵਾਈ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹੋ), ਇਸਲਈ ਅਸੀਂ ਇਸਨੂੰ ਸਾਡੇ ਨਵਬਾਰਾਂ ਦੇ ਉੱਪਰ ਰੱਖਦੇ ਹਾਂ।

z-indexਸਾਡੇ ਲੇਆਉਟ ਪੰਨੇ ਵਿੱਚ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ।

ਜੇਐਸ ਉੱਤੇ HTML ਅਤੇ CSS

Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.

This principle is our first-class JavaScript API using data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.

Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.

The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.

Utilities

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

ਹਾਲਾਂਕਿ ਹਮੇਸ਼ਾ ਸੰਭਵ ਨਹੀਂ ਹੁੰਦਾ ਹੈ, ਅਸੀਂ ਕੰਪੋਨੈਂਟਸ ਲਈ ਸਾਡੀਆਂ HTML ਲੋੜਾਂ ਵਿੱਚ ਬਹੁਤ ਜ਼ਿਆਦਾ ਹਠ ਤੋਂ ਬਚਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ। ਇਸ ਤਰ੍ਹਾਂ, ਅਸੀਂ ਆਪਣੇ CSS ਚੋਣਕਾਰਾਂ ਵਿੱਚ ਸਿੰਗਲ ਕਲਾਸਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦੇ ਹਾਂ ਅਤੇ ਤੁਰੰਤ ਬੱਚਿਆਂ ਦੇ ਚੋਣਕਾਰਾਂ ( >) ਤੋਂ ਬਚਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ। ਇਹ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਲਾਗੂ ਕਰਨ ਵਿੱਚ ਵਧੇਰੇ ਲਚਕਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਅਤੇ ਸਾਡੇ CSS ਨੂੰ ਸਰਲ ਅਤੇ ਘੱਟ ਖਾਸ ਰੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।