मेरी सबसे बेवकूफ सीएसएस गलतियाँ

हम सभी अपने कोड में गलतियाँ करते हैं। हो जाता है! मुझे पता है कि अगर मेरे पास उन "दिनों के बाद से आखिरी गलती" के संकेत मेरे डेस्क पर लटके हुए थे, तो एक बड़ा ओल 'हंस अंडा हर समय मेरे ऊपर मँडरा रहा होगा। जरूरी नहीं कि इसमें बड़ी गलतियां हों। मेरे अनाड़ी स्वयं ने npm मॉड्यूल निर्देशिकाओं को पूरा करने के लिए टाइपो से लेकर रेपो में छोटी-छोटी त्रुटियां की हैं।

ओहोउओप्स।

यह उन चीजों में से एक है जो मुझे वास्तव में सीएसएस के बारे में पसंद है: यह बिल्ली के रूप में क्षमा कर रहा है। यदि यह एक टाइपो को नहीं समझता है, तो यह एक मैच की तलाश में कैस्केड को देखता रहता है। उस सामान में से कोई भी नहीं जहां एक जगह से बाहर के पात्र साइट को तोड़ते हैं और कोई कैदी नहीं लेते हैं। लेकिन यह तब भी शर्मनाक है जब CSS की गलतियाँ सामने आती हैं!

इस तरह मैं खुद को जितना मैं स्वीकार करना चाहता हूं उससे अधिक बार रास्ता बना रहा हूं:

.element {
  display: flexbox; /* 🤦‍♂️ */
}

या जब मैं a के बिना एक ग्रेडिएंट सेट करने का प्रयास करता हूं background संपत्ति:

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

मुझे नफरत है कितना करीब X और C एक कीबोर्ड पर हैं क्योंकि मैं यह नहीं गिन सकता कि मैं कितनी बार किसी चीज़ और गलती से धधक रहा हूँ px एसटी pc इकाइयों.

.element {
  font-size: 16pc; /* I meant pixels! */
}

एक और सीएसएस गलती जो मैं हर बार पकड़ता हूं वह है जिसे मैं जानता हूं कि कई अन्य लोग करते हैं क्योंकि मैं इसे अक्सर ब्लॉग पोस्ट में कोड स्निपेट के साथ खोजता हूं:

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

क्या आप कभी इस्तेमाल करना भूल गए हैं var() एक सीएसएस चर के आसपास? मुझे यकीन है।

.element {
  color: --primary-color;
}

CSS वेरिएबल्स की बात करें तो, उनका नामकरण करना कठिन है (बाकी सब की तरह) और मैं अक्सर एक चर के कुछ गलत संस्करण का उपयोग करता हूं जिसका मैंने नाम दिया है!

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

हां, मैंने वास्तव में केवल फैंसी उद्धरणों को काम करने के तरीके में लाने से पहले सीएसएस के एक स्निपेट की प्रतिलिपि बनाई है:

.element::before {
  content: “”; /* Should be "" */
}

और, हाँ, मैंने यह पता लगाने में बहुत लंबा समय बिताया है कि वे उद्धरण अपराधी थे।

उस आखिरी को देखकर मुझे याद आता है कि मैं कभी-कभी सेट करना भूल जाता हूं content संपत्ति जब मैं साथ काम कर रहा हूँ ::before or ::after. जो मुझे याद दिलाता है कि मैं एक तत्व को कैसे सेट करना भूल गया position इसे ऑफसेट करने या इसे बदलने की कोशिश करने से पहले z-index. गंभीरता से, ये बातें होती हैं!

गलतियों के बारे में बात करना मुश्किल है

क्या आपने कभी कुछ अद्भुत तरकीबों को साझा करते हुए कुछ ब्लॉग पोस्ट को पढ़ना समाप्त कर दिया है और किसी प्रकार का इम्पोस्टर सिंड्रोम महसूस किया है? मुझे लगता है कि यह काफी हद तक है क्योंकि ब्लॉग पोस्ट अक्सर वास्तविक काम - और असफलताओं - को अद्भुत चाल में ले जाते हैं। एक ऐसे व्यक्ति के रूप में जो जीवनयापन के लिए इस तरह की पोस्ट पढ़ता है, मैं आपको बता सकता हूं कि बहुत से, यदि विशाल बहुमत नहीं, तो संपादन के कई दौर से गुजरते हैं, जहां संभावित शर्मनाक गलतियों को दूर किया जाता है और उन्हें सुलझाया जाता है।

यहां तक ​​​​कि उन हास्यास्पद भयानक लेखों को भी उन सभी को प्राप्त करने से पहले विफल होना पड़ता है ऊऊओस और आह्ह्ह्ह्ह्ह्ह्ह्ह्ह्ह्ह्ह्ह्ह.

किसी भी ऐप, वेबसाइट, डेमो, या जो कुछ भी आपके सामने आता है, उसके बारे में भी यही सच है। संभावना है कि उनमें से कोई भी पहली बार सही निकला, कुछ भी नहीं के बगल में है।

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

और यह सब केवल उसी का निर्माण कर रहा है जो मैं वास्तव में पूछना चाहता हूँ…

आपकी सबसे विनम्र सीएसएस गलतियाँ क्या हैं?

चलो, हम सब जानते हैं कि आपने कुछ बनाया है! आइए हम उनसे सीखें!