← All CSS Chapters
LoOPCode Home
14. CSS Best Practices
Clean, scalable, maintainable CSS habits.
Is chapter me cover hoga:
Naming
DRY
Mobile first
Avoid !important
1. Pro habits
• Meaningful class names (
.card-title
not
.c1
)
• Mobile-first media queries
• Variables for colors/spacing
•
!important
almost avoid
• Short files / sections organize karo
• Accessibility: contrast + focus states
<!DOCTYPE html> <html> <head> <style> :root { --primary: #0d9488; --text: #1e293b; } body { font-family: system-ui, sans-serif; color: var(--text); padding: 24px; } .btn-primary { background: var(--primary); color: #fff; border: none; padding: 10px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; } .btn-primary:focus-visible { outline: 3px solid #99f6e4; outline-offset: 2px; } </style> </head> <body> <button class="btn-primary">Accessible button</button> <p style="margin-top:16px">Clean naming + focus = pro CSS.</p> </body> </html>
▶ Run Code
☐
Mark complete
← Pseudo
Mini Project →