𝗧𝗮𝗶𝗹𝘄𝗮𝗶𝗻𝗱 𝗖𝗦𝗦𝟰: 𝗨𝘁𝗶𝗹𝗶𝘁𝘆 𝗦𝘁𝘆𝗹𝗲𝘀 ఎందుకు మెరుగ్గా స్కేల్ అవుతాయి
చాలా మంది డెవలపర్లు HTMLలో యుటిలిటీ క్లాస్లను చూడటాన్ని ఇష్టపడరు. అది అస్తవ్యస్తంగా కనిపిస్తుంది. మీరు నివారించాలని నేర్చుకున్న పాత ఇన్లైన్ స్టైల్స్ లాగా అనిపిస్తుంది. మనం వెనక్కి వెళ్తున్నామని మీరు అనుకోవచ్చు.
కానీ సాంప్రదాయ CSS వేరే సమస్యను సృష్టిస్తుంది.
5,000 లైన్ల ఉన్న ఒక స్టైల్షీట్ను ఊహించుకోండి. డెవలపర్ A రెండు సంవత్సరాల క్రితం ఒక క్లాస్ను రాశారు. డెవలపర్ B ఒక చిన్న మార్పు చేయాలనుకుంటున్నారు. డెవలపర్ B అసలు క్లాస్ను తాకడానికి భయపడుతున్నారు. అది ఏదైనా దాగి ఉన్న పేజీని ప్రభావితం చేస్తుందో లేదో వారికి తెలియదు. అందుకే, వారు దానికి బదులుగా కొత్త క్లాస్ను సృష్టిస్తారు.
ఇది రెండు ప్రధాన సమస్యలకు దారితీస్తుంది:
- మీరు ప్రతిసారి ఒక ఫీచర్ను జోడించినప్పుడల్లా మీ CSS బండిల్ పెరుగుతుంది.
- .card-body-flex-inner వంటి పేర్లను పెట్టడానికే మీరు గంటల సమయం వెచ్చిస్తారు.
Tailwind CSS ఈ విధానాన్ని మారుస్తుంది. ఇది bg-mint-500 లేదా p-4 వంటి యుటిలిటీ క్లాస్లను ఉపయోగిస్తుంది. ఈ పద్ధతి రెండు ప్రధాన ప్రయోజనాలను అందిస్తుంది:
చిన్న బండిల్ సైజులు (Smaller Bundle Sizes) మీరు మీ మొత్తం యాప్లో ఒకే క్లాస్లను మళ్లీ మళ్లీ ఉపయోగిస్తారు. మీ ప్రాజెక్ట్తో పాటు మీ CSS ఫైల్ కూడా నిరంతరం పెరగదు. మీకు పది పేజీలు ఉన్నా లేదా పది వేల పేజీలు ఉన్నా, మీ CSS చిన్నదిగానే ఉంటుంది.
సురక్షితమైన రీఫ్యాక్టరింగ్ (Safer Refactoring) ఒక ఎలిమెంట్ యొక్క అన్ని స్టైల్స్ ఆ కాంపోనెంట్ లోపలే ఉంటాయి. మీరు ఆ కాంపోనెంట్ను డిలీట్ చేస్తే, ఆ స్టైల్స్ కూడా దానితో పాటే పోతాయి. పొరపాటున వేరే పేజీలోని సైడ్బార్ను మీరు పాడుచేయరు.
మీరు రీడబిలిటీ (readability) గురించి అడగవచ్చు.
ఆధునిక వెబ్ డెవలప్మెంట్లో, మీరు React లేదా Vue వంటి కాంపోనెంట్లను ఉపయోగిస్తారు. మీరు రోజంతా అస్తవ్యస్తమైన HTMLని చూడరు. మీరు కాంపోనెంట్కు ఒకసారి స్టైల్ ఇస్తారు. ఆ తర్వాత, మీ మెయిన్ లేఅవుట్లో
అస్తవ్యస్తమైన వివరాలన్నీ కాంపోనెంట్ ఫైల్ లోపలే ఉంటాయి. మీ ప్రధాన ఆర్కిటెక్చర్ క్లీన్గా మరియు ఊహించదగినదిగా (predictable) ఉంటుంది.
మెరుగైన మెయింటెనెన్స్ కోసం మేము అందమైన మార్కప్ను వదులుకున్నాము. స్థిరమైన ప్రొడక్షన్ సిస్టమ్ను నిర్ధారించడానికి డెవలప్మెంట్ సమయంలో మేము అస్తవ్యస్తమైన కోడ్ను అంగీకరిస్తాము.
మీరు మీ CSSని ఎలా మేనేజ్ చేస్తారు? మీకు యుటిలిటీ క్లాస్లు ఇష్టమా?