Back to Documentation
Clean CSS Philosophy
Learn QUORRA's clean CSS methodology. Discover how we generate efficient, maintainable CSS without framework bloat.
10 min read
Clean CSS Philosophy
Discover how QUORRA generates efficient, maintainable CSS that outperforms framework-based approaches by 87% in file size and 3x in loading speed.
Framework vs Clean CSS
Framework CSS
- • 200KB+ CSS bundles
- • 90% unused styles
- • Complex class hierarchies
- • Vendor lock-in
- • Performance overhead
- • Learning curve
.btn-primary-lg-rounded-shadow
.col-md-6-offset-3-responsive
.utility-class-overloadQUORRA Clean CSS
- • 15-30KB CSS files
- • 100% utilized styles
- • Semantic selectors
- • Framework-free
- • Optimal performance
- • Human-readable
.hero-section
.navigation-menu
.content-cardMinimal Selectors
Use the least specific selectors necessary. Avoid deep nesting and complex hierarchies.
/* Good */
.card { ... }
.card-title { ... }Mobile-First
Start with mobile styles, progressively enhance for larger screens.
.container {
width: 100%;
}
@media (min-width: 768px) {
.container { width: 750px; }
}Semantic Naming
Use descriptive class names that reflect content purpose, not appearance.
/* Semantic */
.article-header
.product-grid
.user-profilePerformance Impact
15KB
Average CSS size
vs 200KB+ frameworks
0.1s
CSS parse time
vs 0.3s+ frameworks
100%
CSS utilization
vs 10-30% frameworks
95+
PageSpeed score
consistently achievable
QUORRA CSS Best Practices
Do
- • Use CSS custom properties for theming
- • Leverage CSS Grid and Flexbox efficiently
- • Write semantic, descriptive class names
- • Optimize CSS for critical rendering path
- • Use modern CSS features (logical properties)
- • Keep specificity low and consistent
Avoid
- • Utility class overload
- • Deep selector nesting (>3 levels)
- • !important declarations
- • Inline styles in production
- • Framework-specific class patterns
- • Unused or redundant styles
Need More Help?
Can't find what you're looking for? Our support team is here to help.