✅ Practice + Quiz · Lesson 39
Best Practices
Best Practices
Organize Your Stylesheet
/* 1. Variables and reset at the top */
:root { --primary: #2563eb; }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 2. Base/element styles */
body { font-family: 'Inter', sans-serif; line-height: 1.6; }
/* 3. Layout (header, nav, main, footer) */
/* 4. Components (buttons, cards, forms) */
/* 5. Utilities and media queries at the end */A well-organized stylesheet follows a logical top-to-bottom order, and it makes everything easier to maintain. A good structure: design variables and your reset first, then base element styles (body, headings, links), then layout sections, then reusable components, and finally utilities and media queries. Use comment banners (from the comments chapter) to label each section. As files grow, this organization is what separates a stylesheet you can navigate from one you dread opening. Consistency here pays off enormously over time.
Prefer Classes Over IDs for Styling
/* Avoid styling with IDs (too specific, not reusable): */
#submit-button { background: blue; } /* ✗ */
/* Prefer classes (reusable, sensible specificity): */
.btn-primary { background: blue; } /* ✓ can reuse on many buttons */For styling, use classes rather than IDs — this is a widely-followed best practice. From the specificity chapter, you know IDs are very high specificity, which makes them hard to override later (leading to !important battles). Classes have gentler, more manageable specificity and, crucially, are REUSABLE — one
.btn-primary class styles every primary button, while an id can only apply to one element. Reserve IDs for JavaScript hooks and page anchors (their original purposes), and do your styling with classes. This keeps your CSS flexible and conflict-free.Naming Conventions — clear, consistent names
/* Vague names (hard to understand later): */
.box1 { } .red { } .thing { } /* ✗ */
/* Descriptive names (self-documenting): */
.card { } .btn-primary { } .nav-link { } /* ✓ */
/* A popular system - BEM (Block Element Modifier): */
.card { } /* block */
.card__title { } /* element inside the block */
.card--featured { } /* modifier/variation */Name classes by what they ARE or DO, not by how they look.
.red is a bad name — if you later make it green, the name lies. .btn-danger describes purpose and survives design changes. Good names are descriptive and consistent. Many teams use BEM (Block__Element--Modifier), a naming system that makes structure obvious: .card (the block), .card__title (an element within it), .card--featured (a variation). You don't have to use BEM, but adopting SOME consistent convention makes your CSS far easier to read and maintain, especially as projects grow.Keep It DRY — Don't Repeat Yourself
/* Repetitive (WET - "write everything twice"): */
.btn-save { padding: 10px 20px; border-radius: 6px; color: white; }
.btn-cancel { padding: 10px 20px; border-radius: 6px; color: white; }
/* DRY - share common styles, vary only what differs: */
.btn { padding: 10px 20px; border-radius: 6px; color: white; }
.btn-save { background: green; }
.btn-cancel { background: gray; }DRY means "Don't Repeat Yourself" — factor out repeated styles into shared rules. Instead of copying the same padding, radius, and colour into every button variant, put the common properties in a base
.btn class and let each variant add only its differences. Combined with CSS variables (for repeated values like colours and spacing), this dramatically reduces repetition. Less duplication means fewer places to update when something changes, and fewer chances for inconsistency. DRY is a core principle of all good code, and CSS is no exception.Common Mistakes to Avoid
- Forgetting the box-sizing reset: always start with
* { box-sizing: border-box; }to avoid sizing headaches. - Forgetting the viewport meta tag: without it, none of your responsive CSS works on mobile.
- Overusing !important: fix specificity instead; !important is a last resort.
- Fixed heights on flexible content: prefer min-height to avoid overflow.
- Not testing on mobile: most traffic is mobile — always check small screens.
- Inline styles everywhere: keep styles in your stylesheet, not scattered in HTML, for maintainability.
- Removing focus outlines: never remove
:focusstyles without a visible replacement (accessibility).
Most of these tie back to lessons throughout this course. If you internalize just three habits — the box-sizing reset, the viewport tag, and styling with classes not !important — you'll avoid the majority of frustrations beginners hit. Good CSS isn't about knowing every property; it's about a handful of solid habits applied consistently.
Exam Corner
Q: Should you style with IDs or classes, and why? Classes — they're reusable and have manageable specificity; IDs are too specific.
Q: What's wrong with a class named .red? It describes appearance, not purpose — if the colour changes, the name lies. Name by role instead.
Q: What does DRY mean? Don't Repeat Yourself — factor shared styles into common rules instead of duplicating.
Q: What is BEM? A naming convention: Block, Block__Element, Block--Modifier.
Q: Two resets/tags every project should start with?
Q: What's wrong with a class named .red? It describes appearance, not purpose — if the colour changes, the name lies. Name by role instead.
Q: What does DRY mean? Don't Repeat Yourself — factor shared styles into common rules instead of duplicating.
Q: What is BEM? A naming convention: Block, Block__Element, Block--Modifier.
Q: Two resets/tags every project should start with?
* { box-sizing: border-box; } and the viewport meta tag.
Stylesheet व्यवस्थित करें
/* 1. Variables aur reset upar */
:root { --primary: #2563eb; }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 2. Base/element styles */
body { font-family: 'Inter', sans-serif; line-height: 1.6; }
/* 3. Layout (header, nav, main, footer) */
/* 4. Components (buttons, cards, forms) */
/* 5. Utilities aur media queries ant me */अच्छी तरह व्यवस्थित stylesheet एक logical top-to-bottom order follow करती है, और यह सब कुछ maintain करना आसान बनाती है. अच्छा structure: design variables और आपका reset पहले, फिर base element styles (body, headings, links), फिर layout sections, फिर reusable components, और आखिर में utilities तथा media queries. हर section label करने को comment banners (comments chapter से) use कीजिए. जैसे files बढ़ती हैं, यह organization ही उस stylesheet को अलग करता है जिसमें आप navigate कर सकें उससे जिसे खोलने से डरें. यहां consistency समय के साथ बहुत फायदा देती है.
Styling के लिए IDs पर Classes पसंद करें
/* IDs se styling se bacho (bahut specific, reusable nahi): */
#submit-button { background: blue; } /* ✗ */
/* Classes pasand karo (reusable, samajhdar specificity): */
.btn-primary { background: blue; } /* ✓ kai buttons par reuse */Styling के लिए IDs के बजाय classes use कीजिए — यह व्यापक रूप से follow की जाने वाली best practice है. Specificity chapter से, आप जानते हैं IDs बहुत high specificity हैं, जो उन्हें बाद में override करना मुश्किल बनाता है (!important battles की ओर ले जाते). Classes की कोमल, ज़्यादा manageable specificity है और, अहम बात, REUSABLE हैं — एक
.btn-primary class हर primary button style करती है, जबकि id सिर्फ एक element पर लग सकता है. IDs को JavaScript hooks और page anchors के लिए रखिए (उनके मूल मकसद), और styling classes से कीजिए. यह आपकी CSS को flexible और conflict-free रखता है.Naming Conventions — साफ, consistent नाम
/* Vague naam (baad me samajhna mushkil): */
.box1 { } .red { } .thing { } /* ✗ */
/* Descriptive naam (khud-documenting): */
.card { } .btn-primary { } .nav-link { } /* ✓ */
/* Popular system - BEM (Block Element Modifier): */
.card { } /* block */
.card__title { } /* block ke andar element */
.card--featured { } /* modifier/variation */Classes को नाम दीजिए वे KYA हैं या KYA करती हैं से, कैसी दिखती हैं से नहीं.
.red बुरा नाम है — अगर बाद में इसे green करें, नाम झूठ बोलता है. .btn-danger मकसद describe करता है और design बदलाव झेलता है. अच्छे नाम descriptive और consistent होते हैं. कई teams BEM (Block__Element--Modifier) use करती हैं, एक naming system जो structure स्पष्ट करता है: .card (block), .card__title (उसके अंदर element), .card--featured (variation). आपको BEM use करना ज़रूरी नहीं, पर KOI consistent convention अपनाना आपकी CSS को पढ़ने और maintain करने में कहीं आसान बनाता है, खासकर जैसे projects बढ़ते हैं.DRY रखें — Don't Repeat Yourself
/* Repetitive (WET - "write everything twice"): */
.btn-save { padding: 10px 20px; border-radius: 6px; color: white; }
.btn-cancel { padding: 10px 20px; border-radius: 6px; color: white; }
/* DRY - common styles share, sirf jo alag ho vahi vary: */
.btn { padding: 10px 20px; border-radius: 6px; color: white; }
.btn-save { background: green; }
.btn-cancel { background: gray; }DRY मतलब "Don't Repeat Yourself" — दोहराई styles को shared rules में निकालिए. हर button variant में वही padding, radius, और colour copy करने के बजाय, common properties एक base
.btn class में रखिए और हर variant को सिर्फ अपने अंतर जोड़ने दीजिए. CSS variables के साथ मिलकर (colours और spacing जैसी दोहराई values के लिए), यह नाटकीय रूप से दोहराव घटाता है. कम duplication मतलब कुछ बदलने पर update करने को कम जगहें, और inconsistency के कम मौके. DRY हर अच्छे code का core सिद्धांत है, और CSS अपवाद नहीं.टालने योग्य आम गलतियां
- box-sizing reset भूलना: sizing सिरदर्द टालने को हमेशा
* { box-sizing: border-box; }से शुरू कीजिए. - viewport meta tag भूलना: इसके बिना आपकी कोई responsive CSS mobile पर काम नहीं करती.
- !important का ज़्यादा इस्तेमाल: बजाय specificity fix कीजिए; !important आखिरी उपाय है.
- Flexible content पर fixed heights: overflow टालने को min-height पसंद कीजिए.
- Mobile पर test न करना: ज़्यादातर traffic mobile है — हमेशा छोटी screens check कीजिए.
- हर जगह inline styles: maintainability के लिए styles अपनी stylesheet में रखिए, HTML में बिखरे नहीं.
- Focus outlines हटाना: कभी
:focusstyles बिना दिखने वाले replacement के मत हटाइए (accessibility).
इनमें से ज़्यादातर पूरे course के lessons से जुड़ती हैं. अगर आप सिर्फ तीन आदतें आत्मसात करें — box-sizing reset, viewport tag, और !important नहीं बल्कि classes से styling — तो आप beginners को लगने वाली ज़्यादातर परेशानियां टाल देंगे. अच्छी CSS हर property जानने के बारे में नहीं; यह मुट्ठीभर ठोस आदतों को लगातार लगाने के बारे में है.
Exam Corner
Q: IDs या classes से style करें, और क्यों? Classes — reusable हैं और manageable specificity; IDs बहुत specific हैं.
Q: .red नाम वाली class में क्या गलत है? यह दिखावट describe करती है, मकसद नहीं — colour बदले तो नाम झूठ बोलता है. बजाय role से नाम दीजिए.
Q: DRY का क्या मतलब? Don't Repeat Yourself — दोहराने के बजाय shared styles को common rules में निकालना.
Q: BEM क्या है? Naming convention: Block, Block__Element, Block--Modifier.
Q: हर project किन दो resets/tags से शुरू होने चाहिए?
Q: .red नाम वाली class में क्या गलत है? यह दिखावट describe करती है, मकसद नहीं — colour बदले तो नाम झूठ बोलता है. बजाय role से नाम दीजिए.
Q: DRY का क्या मतलब? Don't Repeat Yourself — दोहराने के बजाय shared styles को common rules में निकालना.
Q: BEM क्या है? Naming convention: Block, Block__Element, Block--Modifier.
Q: हर project किन दो resets/tags से शुरू होने चाहिए?
* { box-sizing: border-box; } और viewport meta tag.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.