OnlineCBT
Choose a clear direction for progressive overrides
Mobile-first CSS defines a useful narrow-layout baseline and adds enhancements with min-width queries. Desktop-first starts with a wide layout and applies changes using max-width queries. Both can work; consistency and content testing matter more than the label.
Mobile-first example
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 42rem) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}The simplest layout is the default. Wider conditions add columns. Write later enhancements so their relationship is obvious and avoid overlapping rules that repeatedly undo each other.
Equivalent desktop-first idea
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 64rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 42rem) { .cards { grid-template-columns: 1fr; } }These examples illustrate opposite cascade directions, not pixel-identical breakpoint semantics. Test boundary conditions and choose one maintainable approach for the component.
Do not confuse CSS strategy with payload
Writing mobile-first rules does not automatically stop large images, scripts or fonts from downloading. Responsive images, asset loading and performance measurements are separate tasks. Likewise, hiding a desktop widget with CSS may leave its network requests and accessibility behavior unchanged.
Plan the content priority
Keep the primary task available on every size. A mobile layout should not hide essential exam instructions just to reduce height. Navigation may change shape, but its links and keyboard behavior still need to work.
Practice
- Build the same three-to-one-column transition using each strategy.
- Compare which version needs fewer overrides for your component.
- Test with long titles and larger font settings.
- Inspect network requests to separate responsive styling from actual download savings.
