Architecture comparisons
3 old vs modern architecture CSS techniques, side by side.
Browser compatibility:
Organizing CSS with cascade layers
Widely available Old way
/* Base styles */body { margin: 0; font-family: sans-serif;}/* Components - start simple */.card { padding: 1rem; background: white; border: 1px solid #ccc;}.card h2 { margin-top: 0; color: #333;}.card.highlight { background: yellow;}.card.highlight h2 { color: red;}/* Utilities - need more specificity or !important to override components */.mt-4 { margin-top: 1rem !important;}.mt-2 { margin-top: 0.5rem !important;}/* If utilities still don't win, add more specificity */.sidebar .card .mt-4 { margin-top: 0.5rem !important;}/* specificity wars: stacking selectors, fighting !important */ Modern
@layer reset, base, components, utilities;@layer reset { * { margin: 0; padding: 0; }}@layer base { body { font-family: sans-serif; }}@layer components { .card { padding: 1rem; background: white; border: 1px solid #ccc; } .card h2 { margin-top: 0; color: #333; } .card.highlight { background: yellow; } .card.highlight h2 { color: red; }}@layer utilities { .mt-4 { margin-top: 1rem; } .mt-2 { margin-top: 0.5rem; }}/* layers handle priority, no !important needed */CSS isolation: Prevent z-index Overflow
Widely available Old way
/* Without isolation, z-index escapes the container */.card-container { position: relative; z-index: 1; /* Still doesn't fully contain child z-index values */}.card { z-index: 100; /* Can still overlap fixed/floating elements outside */}/* Or: restructure HTML to move overlapping content *//* Or: manage z-index globally across entire page (brittle, scales poorly) */ Modern
.card-container { isolation: isolate;}.card { z-index: 100;}/* z-index contained within .card-container */CSS forced-colors media query for Windows High Contrast
Widely available Old way
/* no forced-colors handling: in High Contrast mode the background is stripped and the transparent border becomes invisible. The button disappears. */.btn { background: var(--accent); color: white; border: 1px solid transparent;} Modern
.btn { background: var(--accent); color: white; border: 1px solid transparent;}@media (forced-colors: active) { .btn { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; forced-color-adjust: none; }}/* High Contrast users see a real button instead of a coloured rectangle */