Modern CSS Techniques Every Frontend Developer Should Master

/*Basic grid setup*/
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    min-height: 100vh;
}

/*Named grid areas for semantic layouts*/
.layout {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header header"
"sidebar main aside"
        "footer footer footer";
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/* Responsive without media queries using auto-fit */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/*Implicit grid for dynamic content*/
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    gap: 16px;
}

/*Spanning multiple tracks*/
.featured-item {
    grid-column: span 2;
    grid-row: span 2;
}

/* Define variables at root for global access */
:root {
    /*Colors*/
    --color-primary: #3b82f6;
    --color-primary-dark: #1d4ed8;
    --color-secondary: #8b5cf6;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-background: #ffffff;

    /*Spacing scale*/
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /*Typography*/
    --font-sans: system-ui, -apple-system, sans-serif;
    --font-mono: 'Fira Code', monospace;

    /*Transitions*/
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
}

/*Dark mode theming*/
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #f3f4f6;
        --color-text-muted: #9ca3af;
        --color-background: #111827;
    }
}

/* Component-level variables with fallbacks */
.button {
    --button-padding: var(--space-sm) var(--space-md);
    --button-color: var(--color-primary);

    padding: var(--button-padding);
    background: var(--button-color);
    transition: background var(--transition-fast);
}

.button:hover {
    --button-color: var(--color-primary-dark);
}

/*Dynamic calculations*/
.responsive-text {
    --min-size: 1rem;
    --max-size: 2rem;
    --fluid-size: calc(var(--min-size) + 2vw);

    font-size: clamp(var(--min-size), var(--fluid-size), var(--max-size));
}

/*:is() - reduces specificity and repetition */
:is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
    line-height: 1.2;
}

/* Equivalent to writing 6 separate rules */
:is(.card,.modal,.sidebar):is(h2, h3) {
    margin-bottom: var(--space-sm);
}

/*:where() - zero specificity, great for defaults */
:where(.prose) p {
    margin-bottom: 1em;
    /* Easy to override without specificity battles */
}

/*:has() - parent selector (finally!) */
.card:has(img) {
    padding: 0;
}

.form-group:has(input:invalid) {
    --input-border: red;
}

/*Style based on child state*/
.nav-item:has(>.dropdown:hover) {
    background: var(--color-surface);
}

/*:not() enhancements */
.list-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

/* Complex:not() with selector list */
button:not(:disabled,.loading) {
    cursor: pointer;
}

/*Define a containment context*/
.card-container {
    container-type: inline-size;
    container-name: card;
}

/*Query the container*/
@container card (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
    }

    .card-image {
        width: 40%;
    }
}

@container card (min-width: 700px) {
    .card {
        padding: var(--space-xl);
    }

    .card-title {
        font-size: 1.5rem;
    }
}

/*Container query units*/
.card-text {
    font-size: max(1rem, 3cqi); /* 3% of container inline size */
}

/*Keyframe animation*/
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: slide-up 0.5s ease-out forwards;
}

/*Staggered animations*/
.list-item {
    animation: slide-up 0.4s ease-out backwards;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 100ms; }
.list-item:nth-child(3) { animation-delay: 200ms; }

/*CSS-only custom property animations*/
@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.animated-gradient {
    background: linear-gradient(var(--gradient-angle), #f00, #00f);
    animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
    to { --gradient-angle: 360deg; }
}

/* View Transitions API (where supported) */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: fade-out 0.25s ease-out;
}

::view-transition-new(root) {
    animation: fade-in 0.25s ease-in;
}

/*Scroll progress indicator*/
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color-primary);
    transform-origin: left;
    animation: grow-progress linear;
    animation-timeline: scroll();
}

@keyframes grow-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/*Element enters viewport*/
.reveal-on-scroll {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Physical properties (problematic for RTL) */
.old-way {
    margin-left: 20px;
    padding-right: 10px;
    border-left: 2px solid;
    text-align: left;
}

/* Logical properties (RTL-friendly) */
.new-way {
    margin-inline-start: 20px;
    padding-inline-end: 10px;
    border-inline-start: 2px solid;
    text-align: start;
}

/* Block (vertical) vs Inline (horizontal) */
.spacing {
    margin-block: 1rem; /*top and bottom*/
    margin-inline: 2rem; /* left and right (or right and left in RTL) */
    padding-block-start: 1rem; /*top*/
    padding-inline-end: 2rem; /* right (or left in RTL) */
}

/*Logical sizing*/
.container {
    inline-size: 100%; /*width*/
    block-size: auto; /*height*/
    max-inline-size: 1200px;
}