How can you tell if your CSS code smells? What are the signs that the code is sub-optimal, or that the developer hasn't done a good job? What do you look for in the code to determine how good or bad it is?
- Styles that undo styles
- Magic Numbers -
header.menu { margin: 12px 37px 9px 6px; }
- Complex Selectors -
header.top-header .nav-bar nav.menu ul.main-nav > li a.link-item { font-weight: bold; }
- Increasing Specificity Needlessly -
body.cms-home-page .footer-block .footer-title { font-size:35px; }
- "!important" - !important should only ever be used proactively, not reactively. -
.footer-block .footer-title { font-size:33px !important; }