सुनो! यह मेरे पिछले लेख के बाद से कुछ समय हो गया है, और मैं आप सभी के साथ जुड़ने से चूक गया हूं। मैं आपके वेब देव यात्रा के लिए कुछ उपयोगी सुझाव साझा करने और साझा करने के लिए उत्साहित हूं!

] मुझे आशा है कि आप इन अंतर्दृष्टि को सहायक पाएंगे! चल दर ?

1। अत्यधिक विशिष्ट चयनकर्ता

] चयनकर्ताओं को सरल और पुन: प्रयोज्य रखें। टालना:

#हेडर .nav .link.active: होवर { रंग: लाल; }

बेहतर:

#header .nav .link.active:hover {
    color: red;
}

। नव-लिंक: होवर { रंग: लाल; }

केवल विशिष्टता का उपयोग करें जहां अनावश्यक जटिलता से बचने के लिए आवश्यक हो।

.nav-link:hover {
    color: red;
}

२। ओवरलोडिंग वैश्विक चयनकर्ता

सार्वभौमिक या अत्यधिक व्यापक चयनकर्ताओं का उपयोग करना अनजाने में आपकी साइट के बड़े हिस्से को प्रभावित कर सकता है। टालना:

* {{ मार्जिन: 0; गद्दी: 0; }

बेहतर:

* {
    margin: 0;
    padding: 0;
}

अप्रत्याशित दुष्प्रभावों को रोकने के लिए वैश्विक चयनकर्ताओं के उपयोग को कम करें।

html, body {
    margin: 0;
    padding: 0;
}

हार्डकोडिंग अपडेट को मुश्किल बनाता है। हर जगह यादृच्छिक मानों का उपयोग करने के बजाय, स्थिरता के लिए चर का उपयोग करें।

टालना:

। प्राथमिक-btn { रंग: #3498db; मार्जिन: 20px; }

बेहतर:

.primary-btn {
    color: #3498db;
    margin: 20px;
}

४। असंगत इकाइयाँ

:root {
    --primary-color: #3498db;
    --default-margin: 20px;
}
.primary-btn {
    color: var(--primary-color);
    margin: var(--default-margin);
}

टालना:

फ़ॉन्ट-आकार: 16px; मार्जिन: 1REM; चौड़ाई: 50%;

बेहतर:

फ़ॉन्ट-आकार: 1REM; मार्जिन: 1REM; चौड़ाई: 50%;

]

.nav-link:hover {
    color: red;
}

५। ब्राउज़र संगतता भूल

ब्राउज़र समर्थन पर विचार किए बिना नए CSS सुविधाओं का उपयोग करना कुछ उपयोगकर्ताओं के लिए डिज़ाइन तोड़ सकता है।

font-size: 1rem;  
margin: 1rem;  
width: 50%;

div { पहलू-अनुपात: 16/9; }

बेहतर:

@समर्थन करता है (पहलू-अनुपात: 1) { div { पहलू-अनुपात: 16/9; } }

निष्कर्ष

div {
    aspect-ratio: 16 / 9;
}

को अधिक पठनीय

और
बनाए रखने योग्य

बनाता है। 

#header .nav .link.active:hover {
    color: red;
}

मुझे आशा है कि आपको यह पोस्ट मददगार लगा! अगले लेख में मिलते हैं!