𝗧𝗮𝗶𝗹𝘄𝗮𝗶𝗻𝗱 𝗖𝗦𝗦𝟰: ਯੂਟੀਲਿਟੀ ਸਟਾਈਲਜ਼ (Utility Styles) ਬਿਹਤਰ ਤਰੀਕੇ ਨਾਲ ਕਿਉਂ ਸਕੇਲ (Scale) ਹੁੰਦੇ ਹਨ
ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰ HTML ਵਿੱਚ ਯੂਟੀਲਿਟੀ ਕਲਾਸਾਂ ਦੇਖਣਾ ਪਸੰਦ ਨਹੀਂ ਕਰਦੇ। ਇਹ ਬਹੁਤ ਖਿਲਾਰਾ ਪਾਇਆ ਹੋਇਆ ਲੱਗਦਾ ਹੈ। ਇਹ ਉਹਨਾਂ ਪੁਰਾਣੇ ਇਨਲਾਈਨ ਸਟਾਈਲ (inline styles) ਵਾਂਗ ਲੱਗਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਤੋਂ ਬਚਣਾ ਤੁਸੀਂ ਸਿੱਖਿਆ ਸੀ। ਤੁਹਾਨੂੰ ਲੱਗ ਸਕਦਾ ਹੈ ਕਿ ਅਸੀਂ ਪਿੱਛੇ ਵੱਲ ਜਾ ਰਹੇ ਹਾਂ।
ਪਰ ਰਵਾਇਤੀ CSS ਇੱਕ ਵੱਖਰੀ ਸਮੱਸਿਆ ਪੈਦਾ ਕਰਦੀ ਹੈ।
ਇੱਕ 5,000 ਲਾਈਨਾਂ ਵਾਲੀ ਸਟਾਈਲਸ਼ੀਟ ਦੀ ਕਲਪਨਾ ਕਰੋ। ਡਿਵੈਲਪਰ A ਨੇ ਦੋ ਸਾਲ ਪਹਿਲਾਂ ਇੱਕ ਕਲਾਸ ਲਿਖੀ ਸੀ। ਡਿਵੈਲਪਰ B ਇੱਕ ਛੋਟੀ ਜਿਹੀ ਚੀਜ਼ ਬਦਲਣਾ ਚਾਹੁੰਦਾ ਹੈ। ਡਿਵੈਲਪਰ B ਅਸਲ ਕਲਾਸ ਨੂੰ ਛੇੜਨ ਤੋਂ ਡਰਦਾ ਹੈ। ਉਹਨਾਂ ਨੂੰ ਨਹੀਂ ਪਤਾ ਕਿ ਇਸ ਨਾਲ ਕਿਸੇ ਲੁਕਵੇਂ ਪੇਜ 'ਤੇ ਅਸਰ ਪਵੇਗਾ ਜਾਂ ਨਹੀਂ। ਇਸ ਲਈ, ਉਹ ਇਸ ਦੀ ਬਜਾਏ ਇੱਕ ਨਵੀਂ ਕਲਾਸ ਬਣਾ ਲੈਂਦੇ ਹਨ।
ਇਸ ਨਾਲ ਦੋ ਮੁੱਖ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਹੁੰਦੀਆਂ ਹਨ:
- ਹਰ ਵਾਰ ਨਵਾਂ ਫੀਚਰ ਜੋੜਨ 'ਤੇ ਤੁਹਾਡਾ CSS ਬੰਡਲ (bundle) ਵੱਡਾ ਹੁੰਦਾ ਜਾਂਦਾ ਹੈ।
- ਤੁਸੀਂ
.card-body-flex-innerਵਰਗੀਆਂ ਚੀਜ਼ਾਂ ਦੇ ਨਾਮ ਰੱਖਣ ਵਿੱਚ ਘੰਟੇ ਬਰਬਾਦ ਕਰਦੇ ਹੋ।
Tailwind CSS ਇਸ ਪਹੁੰਚ ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਇਹ bg-mint-500 ਜਾਂ p-4 ਵਰਗੀਆਂ ਯੂਟੀਲਿਟੀ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ ਤਰੀਕਾ ਦੋ ਮੁੱਖ ਫਾਇਦੇ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:
ਛੋਟੇ ਬੰਡਲ ਸਾਈਜ਼ (Smaller Bundle Sizes) ਤੁਸੀਂ ਆਪਣੇ ਪੂਰੇ ਐਪ ਵਿੱਚ ਇੱਕੋ ਜਿਹੀਆਂ ਕਲਾਸਾਂ ਦੀ ਮੁੜ ਵਰਤੋਂ ਕਰਦੇ ਹੋ। ਤੁਹਾਡੀ CSS ਫਾਈਲ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਨਾਲ ਲਗਾਤਾਰ ਵੱਡੀ ਨਹੀਂ ਹੁੰਦੀ। ਭਾਵੇਂ ਤੁਹਾਡੇ ਕੋਲ ਦਸ ਪੇਜ ਹੋਣ ਜਾਂ ਦਸ ਹਜ਼ਾਰ, ਤੁਹਾਡੀ CSS ਛੋਟੀ ਰਹਿੰਦੀ ਹੈ।
ਸੁਰੱਖਿਅਤ ਰੀਫੈਕਟਰੀੰਗ (Safer Refactoring) ਇੱਕ ਐਲੀਮੈਂਟ ਲਈ ਸਾਰੇ ਸਟਾਈਲ ਉਸੇ ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰ ਹੁੰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਕੰਪੋਨੈਂਟ ਨੂੰ ਡਿਲੀਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਸਟਾਈਲ ਵੀ ਉਸਦੇ ਨਾਲ ਚਲੇ ਜਾਂਦੇ ਹਨ। ਤੁਸੀਂ ਗਲਤੀ ਨਾਲ ਕਿਸੇ ਦੂਜੇ ਪੇਜ 'ਤੇ ਸਾਈਡਬਾਰ (sidebar) ਨੂੰ ਖਰਾਬ ਨਹੀਂ ਕਰੋਗੇ।
ਤੁਸੀਂ ਪੜ੍ਹਨਯੋਗਤਾ (readability) ਬਾਰੇ ਪੁੱਛ ਸਕਦੇ ਹੋ।
ਆਧੁਨਿਕ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ, ਤੁਸੀਂ React ਜਾਂ Vue ਵਰਗੇ ਕੰਪੋਨੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ। ਤੁਸੀਂ ਸਾਰਾ ਦਿਨ ਖਿਲਾਰੇ ਵਾਲੇ HTML ਨੂੰ ਨਹੀਂ ਦੇਖਦੇ। ਤੁਸੀਂ ਕੰਪੋਨੈਂਟ ਨੂੰ ਇੱਕ ਵਾਰ ਸਟਾਈਲ ਕਰਦੇ ਹੋ। ਫਿਰ, ਤੁਸੀਂ ਆਪਣੇ ਮੁੱਖ ਲੇਆਉਟ ਵਿੱਚ <Card /> ਵਰਗੇ ਸਾਫ਼ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ।
ਖਿਲਾਰੇ ਵਾਲੇ ਵੇਰਵੇ ਕੰਪੋਨੈਂਟ ਫਾਈਲ ਦੇ ਅੰਦਰ ਹੀ ਰਹਿੰਦੇ ਹਨ। ਤੁਹਾਡਾ ਮੁੱਖ ਆਰਕੀਟੈਕਚਰ ਸਾਫ਼ ਅਤੇ ਅਨੁਮਾਨਯੋਗ ਰਹਿੰਦਾ ਹੈ।
ਅਸੀਂ ਬਿਹਤਰ ਰੱਖ-ਰਖਾਅ (maintenance) ਲਈ ਸੁੰਦਰ ਮਾਰਕਅੱਪ (markup) ਦਾ ਤਿਆਗ ਕੀਤਾ ਹੈ। ਅਸੀਂ ਇੱਕ ਸਥਿਰ ਪ੍ਰੋਡਕਸ਼ਨ ਸਿਸਟਮ (production system) ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਡਿਵੈਲਪਮੈਂਟ ਦੌਰਾਨ ਖਿਲਾਰੇ ਵਾਲੇ ਕੋਡ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੇ ਹਾਂ।
ਤੁਸੀਂ ਆਪਣਾ CSS ਕਿਵੇਂ ਮੈਨੇਜ ਕਰਦੇ ਹੋ? ਕੀ ਤੁਹਾਨੂੰ ਯੂਟੀਲਿਟੀ ਕਲਾਸਾਂ ਪਸੰਦ ਹਨ?