𝗧𝗮𝗶𝗹𝘄𝗮𝗶𝗻𝗱 𝗖𝗦𝗦𝟰: 𝗪𝗵𝘆 𝗨𝘁𝗶𝗹𝗶𝘁𝘆 𝗦𝘁𝘆𝗹𝗲𝘀 𝗦𝗰𝗮𝗹𝗲 𝗕𝗲𝘁𝘁𝗲𝗿
ઘણા ડેવલપર્સને HTML માં યુટિલિટી ક્લાસ જોવાનું ગમતું નથી. તે અસ્તવ્યસ્ત લાગે છે. તે જૂની ઇનલાઇન સ્ટાઇલ્સ જેવું લાગે છે જેને ટાળવાનું તમે શીખ્યા હશો. તમને કદાચ લાગશે કે આપણે પાછા જઈ રહ્યા છીએ.
પરંતુ પરંપરાગત CSS એક અલગ સમસ્યા ઊભી કરે છે.
5,000 લાઇન્સ ધરાવતી સ્ટાઇલશીટની કલ્પના કરો. ડેવલપર A એ બે વર્ષ પહેલાં એક ક્લાસ લખ્યો હતો. ડેવલપર B નાની અમથી વસ્તુ બદલવા માંગે છે. ડેવલપર B મૂળ ક્લાસને સ્પર્શતા ડરે છે. તેઓ જાણતા નથી કે તેનાથી કોઈ છુપાયેલું પેજ અસર થશે કે નહીં. તેથી, તેઓ તેના બદલે એક નવો ક્લાસ બનાવે છે.
આનાથી બે મુખ્ય સમસ્યાઓ થાય છે:
- દર વખતે જ્યારે તમે નવું ફીચર ઉમેરો છો ત્યારે તમારો CSS બંડલ વધતો જાય છે.
- તમે
.card-body-flex-innerજેવી વસ્તુઓના નામ આપવા પાછળ કલાકો વિતાવો છો.
Tailwind CSS આ અભિગમને બદલે છે. તે bg-mint-500 અથવા p-4 જેવા યુટિલિટી ક્લાસનો ઉપયોગ કરે છે. આ પદ્ધતિ બે મુખ્ય ફાયદા આપે છે:
નાની બંડલ સાઈઝ (Smaller Bundle Sizes) તમે તમારા સમગ્ર એપમાં સમાન ક્લાસનો ફરીથી ઉપયોગ કરો છો. તમારી પ્રોજેક્ટ સાથે તમારી CSS ફાઇલ રેખીય રીતે (linearly) વધતી નથી. તમારી પાસે દસ પેજ હોય કે દસ હજાર, તમારો CSS નાનો જ રહે છે.
વધુ સુરક્ષિત રિફેક્ટરિંગ (Safer Refactoring) કોઈપણ એલિમેન્ટ માટેની તમામ સ્ટાઇલ્સ તે કમ્પોનન્ટની અંદર જ હોય છે. જો તમે કમ્પોનન્ટ ડિલીટ કરો છો, તો તેની સ્ટાઇલ્સ પણ તેની સાથે જ જતી રહે છે. તમે ભૂલથી બીજા કોઈ પેજ પર સાઇડબાર બગાડી શકશો નહીં.
તમે વાંચનક્ષમતા (readability) વિશે પૂછી શકો છો.
આધુનિક વેબ ડેવલપમેન્ટમાં, તમે React અથવા Vue જેવા કમ્પોનન્ટ્સનો ઉપયોગ કરો છો. તમે આખો દિવસ અસ્તવ્યસ્ત HTML જોતા નથી. તમે કમ્પોનન્ટને એકવાર સ્ટાઇલ કરો છો. પછી, તમે તમારા મુખ્ય લેઆઉટમાં <Card /> જેવા સ્વચ્છ ટેગનો ઉપયોગ કરો છો.
અસ્તવ્યસ્ત વિગતો કમ્પોનન્ટ ફાઇલની અંદર જ રહે છે. તમારું મુખ્ય આર્કિટેક્ચર સ્વચ્છ અને અનુમાનિત (predictable) રહે છે.
અમે વધુ સારા મેન્ટેનન્સ માટે સુંદર માર્કઅપનો ત્યાગ કર્યો છે. એક સ્થિર પ્રોડક્શન સિસ્ટમ સુનિશ્ચિત કરવા માટે અમે ડેવલપમેન્ટ દરમિયાન અસ્તવ્યસ્ત કોડ સ્વીકારીએ છીએ.
તમે તમારા CSS ને કેવી રીતે મેનેજ કરો છો? શું તમને યુટિલિટી ક્લાસ ગમે છે?