Frontend साक्षात्कार: CSS @functions डिज़ाइन टोकन्स का पुन: उपयोग कैसे करते हैं?

1. प्रॉम्प्ट और दायरा

एक डिज़ाइन सिस्टम में स्पेसिंग टोकन्स हैं, और कंपोनेंट्स डेंसिटी और कंटेनर की चौड़ाई से padding की गणना करते हैं। टीम प्लेन CSS, थीम ओवरराइड और पुराने ब्राउज़र व्यवहार को बनाए रखते हुए बार-बार आने वाले calc() एक्सप्रेशन्स को कम करना चाहती है। CSS @function के साथ समाधान डिज़ाइन करें और एक सुरक्षित फ़ॉलबैक समझाएं।

2. साक्षात्कारकर्ता क्या परीक्षण कर रहा है

यह समझना कि @function एक CSS कस्टम फ़ंक्शन को परिभाषित करता है जिसका नाम -- से शुरू होने वाला dashed-ident होता है।
पैरामीटर, डिफॉल्ट्स, वैकल्पिक प्रकार और result घोषित करना, साथ ही यह जानना कि बॉडी JavaScript की तरह पहले डिक्लेरेशन पर रिटर्न नहीं करती है।
कस्टम फ़ंक्शंस, कस्टम प्रॉपर्टीज़, Sass बिल्ड-टाइम फ़ंक्शंस और रनटाइम कैस्केडिंग के बीच अंतर करना।
फीचर डिटेक्शन, थीम इनहेरिटेंस, साइकिल्स, कम्पैटिबिलिटी और एक्सेसिबल प्रोग्रेसिव एन्हांसमेंट को संभालना।

3. पहले स्पष्ट करने योग्य प्रश्न

किन लक्षित ब्राउज़रों में CSS Functions की कमी है, और क्या पॉलीफ़िल की अनुमति है?
क्या टोकन निश्चित लंबाई (fixed lengths), प्रतिशत, या ऐसे मान हैं जिनमें calc() और कंटेनर इकाइयाँ शामिल हो सकती हैं?
क्या अमान्य तर्कों (invalid arguments) को डिफॉल्ट्स का उपयोग करना चाहिए, डिक्लेरेशन को अमान्य करना चाहिए, या कंपोनेंट फ़ॉलबैक का उपयोग करना चाहिए?
क्या थीम्स टोकन्स को :root, कंपोनेंट स्कोप, या Shadow DOM बाउंड्री पर परिभाषित करती हैं?

4. तीस-सेकंड का उत्तर

मैं एन्हांस्ड डिक्लेरेशन से पहले एक काम करने वाली स्टैटिक padding रखूँगा, फिर @supports के अंदर इसे ओवरराइड करूँगा। फ़ंक्शन टाइप्ड और डिफॉल्टेड पैरामीटर्स का उपयोग करता है और result के माध्यम से एक लंबाई लौटाता है। कस्टम प्रॉपर्टीज़ थीम इनपुट्स प्रदान करती हैं; फ़ंक्शन गणना करता है। असमर्थित ब्राउज़र अज्ञात फ़ंक्शन को अनदेखा करते हैं और पहले वाले फ़ॉलबैक को बनाए रखते हैं।

5. चरण-दर-चरण गहन विश्लेषण

चरण 1: पैरामीटर्स और परिणाम को परिभाषित करें

css

@function --space(--step <integer>: 2, --base <length>: 4px) {
  result: calc(var(--base) * var(--step));
}

पैरामीटर्स लोकल कस्टम प्रॉपर्टीज़ हैं और CSS प्रकार तथा डिफॉल्ट घोषित कर सकते हैं। result अंतिम मान प्रदान करता है; यह कोई शुरुआती JavaScript return नहीं है, इसलिए फ़ंक्शन CSS डिक्लेरेशन प्रोसेसिंग नियमों का पालन करता है।

चरण 2: फ़ंक्शन को टोकन्स से कनेक्ट करें

css

:root {
  --space-base: 4px;
}

.card {
  padding: 16px;
  padding: --space(3, var(--space-base));
}

पहला डिक्लेरेशन पुराने ब्राउज़रों के लिए फ़ॉलबैक है; दूसरा तब लागू होता है जब कस्टम फ़ंक्शन पार्स होता है। टोकन्स अभी भी कस्टम प्रॉपर्टीज़ के माध्यम से कैस्केड होते हैं, इसलिए कोई थीम या कंपोनेंट स्कोप --space-base को ओवरराइड कर सकता है।

चरण 3: प्रकार और अमान्य मानों को संभालना

प्रकार प्रतिबंध (Type constraints) उन मानों को अस्वीकार करते हैं जो व्याकरण से मेल नहीं खाते हैं। डिफॉल्ट्स छोड़े गए तर्कों को कवर करते हैं, मनमाने स्ट्रिंग्स को नहीं जिन्हें लंबाई बनना चाहिए। नेगेटिव मानों, गलत इकाइयों और अनुपलब्ध टोकन्स का परीक्षण करें, और CSS फ़ंक्शन तर्कों में कभी भी उपयोगकर्ता-नियंत्रित स्ट्रिंग्स को कॉन्केटनेटरूप से न जोड़ें।

चरण 4: स्कोप और डिपेंडेंसीज़ को समझें

फ़ंक्शन पैरामीटर्स बॉडी के अंदर लोकल कस्टम प्रॉपर्टीज़ के रूप में व्यवहार करते हैं, जबकि कॉल साइट अभी भी कैस्केड, इनहेरिटेंस और लेयर ऑर्डर का पालन करती है। फ़ंक्शन द्वारा उपयोग किया जाने वाला टोकन फ़ंक्शन के परिणाम पर वापस निर्भर नहीं होना चाहिए; एक चक्र (cycle) कंप्यूटेड डिक्लेरेशन को अमान्य कर देता है।

चरण 5: फीचर डिटेक्शन और प्रोग्रेसिव एन्हांसमेंट

css

.card {
  padding: 16px;
}

@supports (padding: --space(3, 4px)) {
  .card {
    padding: --space(3, var(--space-base, 4px));
  }
}

@supports पार्सिंग क्षमता का परीक्षण करता है, हर व्यावसायिक शाखा का नहीं। एक स्थिर फ़ॉलबैक रखें, कंप्यूटेड लेआउट का निरीक्षण करें, और सुनिश्चित करें कि असमर्थित ब्राउज़र अभी भी पढ़ने योग्य टेक्स्ट, फ़ोकस संकेतक और टच-टारगेट आकार को सुरक्षित रखते हैं।

6. मॉडल उच्च-गुणवत्ता उत्तर

मैं एक स्टैटिक padding प्रदान करूँगा, फिर @supports के अंदर @function के साथ एन्हांस्ड मान की गणना करूँगा। कस्टम प्रॉपर्टीज़ थीम मानों को ले जाती हैं; टाइप्ड पैरामीटर्स और result गणना करते हैं। मैं छूटे हुए तर्कों, गलत इकाइयों, नेगेटिव मानों और साइकिल्स का परीक्षण करूँगा। चूंकि समर्थन अभी भी भिन्न होता है, इसलिए फ़ॉलबैक को स्वतंत्र रूप से खड़ा होना चाहिए, और ब्राउज़र जांचों को कंप्यूटेड शैलियों और एक्सेसिबल आयामों को सत्यापित करना चाहिए।

7. सामान्य गलतियाँ

CSS @function को Sass बिल्ड-टाइम फ़ंक्शन के रूप में मानना → प्रोडक्शन ब्राउज़र इसे अनदेखा करते हैं → एक रनटाइम फ़ॉलबैक रखें और फीचर-डिटेक्ट करें।
एक <length> पैरामीटर में यूनिटलेस संख्या पास करना → डिक्लेरेशन अमान्य हो जाता है → प्रकार और डिफॉल्ट्स को स्पष्ट रूप से निर्दिष्ट करें।
यह मान लेना कि फ़ंक्शन एक कस्टम प्रॉपर्टी को म्यूटेट करता है → थीम ओवरराइड विफल हो जाते हैं → टोकन इनपुट्स को result आउटपुट से अलग करें।
बिना बेस डिक्लेरेशन के केवल @supports लिखना → असमर्थित ब्राउज़र स्पेसिंग खो देते हैं → पहले फ़ॉलबैक लिखें।
फ़ंक्शंस को एक-दूसरे को संदर्भित करना → चक्रीय निर्भरताएँ (cyclic dependencies) मानों को अमान्य कर देती हैं → टोकन निर्भरताओं को एकतरफ़ा रखें।

8. फॉलो-अप प्रश्न

फॉलो-अप 1: यह कस्टम प्रॉपर्टी से कैसे भिन्न है?

एक कस्टम प्रॉपर्टी एक कैस्केडिंग मान संग्रहीत करती है; एक कस्टम फ़ंक्शन पैरामीटर्स स्वीकार करता है और एक परिणाम की गणना करता है। फ़ंक्शन इनहेरिटेड टोकन इनपुट्स को पढ़ते हुए गणना लॉजिक का पुन: उपयोग कर सकता है।

फॉलो-अप 2: यह Sass फ़ंक्शन से कैसे भिन्न है?

एक Sass फ़ंक्शन बिल्ड टाइम पर CSS उत्सर्जित करता है और रनटाइम थीम्स या कंटेनर स्थिति का निरीक्षण नहीं कर सकता है। एक CSS कस्टम फ़ंक्शन ब्राउज़र कैस्केडिंग और गणना के दौरान चलता है, इसलिए यह डायनामिक है लेकिन इसके लिए कम्पैटिबिलिटी हैंडलिंग की आवश्यकता होती है।

फॉलो-अप 3: आप समर्थन का पता कैसे लगाते हैं?

पूर्ववर्ती फ़ॉलबैक को बनाए रखते हुए पार्सिंग का पता लगाने के लिए @supports (padding: --space(1, 4px)) का उपयोग करें। परीक्षणों को वास्तविक ब्राउज़र में कंप्यूटेड मान का भी निरीक्षण करना चाहिए।

फॉलो-अप 4: आप चक्रों (cycles) से कैसे बचते हैं?

बेस टोकन्स को रॉ मानों पर निर्भर रखें, फ़ंक्शंस को टोकन्स पढ़ने दें और व्युत्पन्न (derived) मान उत्सर्जित करने दें, और टोकन्स को उन प्रॉपर्टीज़ को संदर्भित करने से रोकें जिनमें फ़ंक्शन परिणाम शामिल है। DevTools में अमान्य कंप्यूटेड मानों की जाँच करें।