Responsive Design Is Changing Again: AI-Generated CSS vs CSS Architecture
Padmanabhan S
Responsive design is shifting from viewport-driven (media queries) to intrinsic / behavior-driven (the layout adapts to its content and container). AI tools accelerate CSS output but default to the older patterns. This doc covers what changed, the correct modern patterns, and where AI-generated CSS goes wrong. 1. The old model Layouts switched at fixed breakpoints: .card { width : 400px ; } @media ( max-width : 768px ) { .card { width : 100% ; } } Problems at scale: duplicated media queries inco