CSS Best Practices
Key practices: (1) Consistent naming convention (BEM ya similar), (2) CSS ko logically organize karo (base styles, components, utilities alag files/sections mein), (3) Magic numbers avoid karo (variables use karo), (4) !important avoid karo, (5) Mobile-first responsive approach, (6) box-sizing: border-box globally set karo.
Performance considerations: unnecessary selectors avoid karo, CSS ko minify karo production ke liye, unused CSS remove karo (tools jaise PurgeCSS), critical CSS ko inline karo above-the-fold content ke liye.
/* Global reset/defaults — file ke bilkul shuru mein: */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--primary: #3498db;
--spacing-sm: 8px;
--spacing-md: 16px;
}
/* Component styles, BEM naming: */
.card { }
.card__title { }
.card__title--large { }
/* Utility classes, reusable: */
.text-center { text-align: center; }
.mt-2 { margin-top: var(--spacing-sm); }- Consistent naming (BEM) + logical organization
- CSS variables se magic numbers avoid karo
- box-sizing: border-box globally, mobile-first responsive
Bahut specific selectors (jaise #main .content div.wrapper p.text) future modifications ko mushkil banate hain — koi bhi override karne ke liye equally ya zyada specific selector chahiye hota hai. Flat, class-based selectors zyada maintainable hain.
/* Avoid — bahut specific, override karna mushkil: */
#main .content div.wrapper p.highlighted-text {
color: red;
}
/* Better — flat, single class: */
.highlighted-text {
color: red;
}Stylelint jaisa tool CSS mein common mistakes/inconsistencies automatically catch karta hai (jaise duplicate properties, invalid values, inconsistent formatting) — code reviews mein manual catch karne se zyada reliable, team projects mein standard practice.
/* .stylelintrc.json (simplified example): */
{
"extends": "stylelint-config-standard",
"rules": {
"color-hex-length": "short",
"indentation": 2
}
}