2024-02-11

CSS तर्कसंगत है

CSS की “अतार्किक” होने की प्रतिष्ठा को चुनौती दी जाती है, क्योंकि कई लोग तर्क देते हैं कि यह सुसंगत लेकिन अक्सर अस्पष्ट नियमों का पालन करती है, खासकर layout concepts जैसे width बनाम height, document flow, और percentage-based sizing के आसपास। कई टिप्पणियाँ सुझाव देती हैं कि असली समस्या खराब tooling, ऐतिहासिक बोझ, और application UI की बजाय documents पर आधारित मानसिक मॉडल हैं, जो specificity, cascade, और नए selectors जैसी चीज़ों को सहज-ज्ञान के विरुद्ध बनाते हैं। Tailwind, component-scoped styling, और CSS variables जैसे विकल्प और पूरक इन्हीं जटिलताओं से निपटने के प्रयास के रूप में देखे जाते हैं, न कि इस बात के प्रमाण के रूप में कि CSS के भीतर तर्क नहीं है।

“तर्कसंगत” का क्या अर्थ है, इस पर बहस

कई लोगों का तर्क है कि लेख के अर्थ में “तर्कसंगत” (“इसके नियम सुसंगत हैं”) कहना तुच्छ है: कोई भी कंप्यूटर भाषा इस कसौटी पर खरी उतरती है।
आलोचकों का कहना है कि असली मुद्दा मानव-उपयोगिता है: CSS सुसंगत हो सकती है, फिर भी भ्रमित करने वाली, अटपटी, या “खराब” हो सकती है।
कुछ लोग “तर्कसंगत” और “सहज” में अंतर करते हैं: CSS नियम-आधारित हो सकती है, लेकिन अक्सर डेवलपर्स के मानसिक मॉडलों से टकराती है।
कुछ लोग CSS सीखने की तुलना किसी विदेशी भाषा या vim सीखने से करते हैं: एक बार आप मॉडल को भीतर से समझ लेते हैं, तो वह तर्कसंगत लगने लगता है, लेकिन पहले नहीं।

चौड़ाई, ऊँचाई, और प्रतिशत का व्यवहार

कई टिप्पणियाँ लेख की “चौड़ाई ऊपर देखती है, ऊँचाई नीचे देखती है” वाली व्याख्या को भ्रामक या बिल्कुल गलत बताती हैं।
स्पष्टीकरण: प्रतिशत width और height दोनों ही containing block के सापेक्ष परिभाषित होते हैं; भ्रम defaults से पैदा होता है:
- ब्लॉक एलिमेंट्स का default width: 100% होता है, लेकिन height: auto (सामग्री-आधारित) होता है।
- इससे उन containers के भीतर percentage heights का उपयोग करते समय circular dependencies बनती हैं, जिनकी heights उनकी सामग्री पर निर्भर करती हैं।
उपयोगकर्ता html, body { height: 100%; } जैसे patterns साझा करते हैं ताकि height: 100% अपेक्षा के अनुसार व्यवहार करे।
कुछ लोग percentage padding/margin जैसी विचित्रताओं की ओर इशारा करते हैं, जो हमेशा width पर आधारित होती हैं, और padding-top का आश्चर्यजनक व्यवहार भी।

जटिलता, अस्पष्टता, और tooling

कई लोगों का तर्क है कि CSS स्वयं बहुत जटिल नहीं है, लेकिन इसका व्यवहार अस्पष्ट है: devtools यह नहीं बताते कि कोई नियम “काम क्यों नहीं किया।”
सुझाए गए सुधार: layout के माध्यम से debugger-जैसी stepping, specificity का visualization, और cyclic percentage dependencies के लिए warnings।

दस्तावेज़ बनाम application

एक आवर्ती विषय: CSS को flowing text documents के लिए बनाया गया था, लेकिन इसका भारी उपयोग app-जैसे UIs में होता है।
कुछ लोग कहते हैं कि आधुनिक features (flexbox, grid, nesting, container queries) अब app layouts को काफी हद तक संभव बनाते हैं, हालांकि कुछ मामलों में अब भी झंझट रहते हैं (जैसे centered overflow, split views)।
अन्य लोग deep nesting और जटिल flex/grid setups की बजाय constraint-based layouts की इच्छा जताते हैं।

Styling strategies, Tailwind, और specificity

Tailwind पर राय बँटी हुई है: कुछ लोग इसे component-based apps के लिए एक व्यावहारिक fit मानते हैं; अन्य इसे एक “toy” और customization के लिए user-hostile मानते हैं।
Specificity rules और !important को व्यापक रूप से non-intuitive व्यवहार और hacks के स्रोत के रूप में उद्धृत किया जाता है (जैसे selectors को मात देने के लिए classes को दोहराना)।
कुछ लोग अपनी styles में “तर्क” की भावना वापस लाने के लिए CSS variables और calc() पर निर्भर करते हैं।

संबंधित विषय