CSS has evolved dramatically. Here are modern techniques that can simplify your code and improve performance.
Style based on container size, not viewport:
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 150px 1fr;
}
}
Create complex layouts easily:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
/* Spanning items */
.featured {
grid-column: span 2;
grid-row: span 2;
}
Dynamic, themeable designs:
:root {
--primary: #007bff;
--spacing: 1rem;
--radius: 8px;
}
.dark-theme {
--primary: #4a90e2;
--bg: #1a1a1a;
--text: #ffffff;
}
.button {
background: var(--primary);
padding: var(--spacing);
border-radius: var(--radius);
}
Support all writing modes:
/* Old way */
.card {
margin-left: 20px;
padding-right: 10px;
}
/* Modern way */
.card {
margin-inline-start: 20px;
padding-inline-end: 10px;
}
Maintain proportions without JavaScript:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
}
.square {
aspect-ratio: 1;
}
Responsive text without media queries:
.title {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: clamp(1.2, 1.5vw, 1.5);
}
.container {
width: clamp(320px, 90%, 1200px);
margin: 0 auto;
}
Parent selector we've always wanted:
/* Style form if it has an invalid input */
form:has(input:invalid) {
border: 2px solid red;
}
/* Style nav if dropdown is open */
nav:has(.dropdown.open) {
background: rgba(0, 0, 0, 0.9);
}
Smooth scrolling experiences:
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
}
.slide {
scroll-snap-align: center;
flex: 0 0 100%;
}
Write cleaner, more maintainable styles:
.card {
background: white;
padding: 1rem;
& .title {
font-size: 1.5rem;
&:hover {
color: var(--primary);
}
}
& + & {
margin-top: 1rem;
}
}
Modern CSS is incredibly powerful. These techniques can replace many JavaScript solutions, improve performance, and make your code more maintainable. Start incorporating them into your projects today!