Many CSS codebases contain outdated practices. This might include one-off !important declarations that could now be managed with cascade layers, or a dated Checkbox Hack that :has() has since resolved. Older sites might also be full of vendor-prefixed properties from years past. These elements can be considered “demons” in the codebase.
Stu Robson’s ReliCSS tool can identify outdated CSS in a codebase that now have modern solutions.
Each identified relic is assigned a level of severity:
- High Severity: True “fossils” such as hacks for unsupported browsers (like IE6/7) or “dangerous” techniques. These are high-risk, obsolete, and should be primary targets for removal.
- Medium Severity: The middle ground, including hacks for older unsupported browsers (IE8-10). These work but are fragile. They are hacks to review for continued relevance to actual users.
- Low Severity: Modern artifacts, typically vendor prefixes (-webkit-, -moz-). These are generally safe but are better handled by automated tools like Autoprefixer. They present an opportunity to improve the build process.
Consider a site that has not received an overhaul in some time.
Such a site might contain elements that are no longer ideal.
An archaeological dig on a large, established site, perhaps one that has not been updated in several years, might reveal interesting findings.
🫣
Often, findings are largely vendor prefixing, which could be a result of an older Autoprefixer configuration.
