Just Modern CSS

Copy, paste, learn.

CSS Nesting

CSS Nesting allows you to write more readable and maintainable styles by nesting selectors within a parent element. This reduces redundancy and keeps related styles grouped together.


/* Without CSS Nesting */
.card {
    border: 1px solid #ccc;
    padding: 1rem;
    margin: 1rem;
}
.card .title {
    font-size: 1.5rem;
    color: #333;
}
.card .content {
    font-size: 1rem;
    color: #666;
}

            
/* With CSS Nesting */
.card {
    border: 1px solid #ccc;
    padding: 1rem;
    margin: 1rem;

    .title {
        font-size: 1.5rem;
        color: #333;
    }

    .content {
        font-size: 1rem;
        color: #666;
    }
}

Stacked Gradients

Multiple gradient effects layered on top of each other using the background-image property. Creates complex color transitions and depth effects.


/* Single gradient */
.box { background-image: linear-gradient(45deg, red, blue); }

/* Stacked gradients */
.box {
    background-image:
        linear-gradient(120deg, rgba(255,0,0,0.3), transparent),
        radial-gradient(circle at center, #00f 0%, #000 100%);
}

Clip Path

Defines a visible region of an element using basic shapes or SVG paths. Everything outside the path becomes transparent.


/* Before: Regular rectangle */
.box { width: 200px; height: 200px; background: #f00; }

/* After: Triangle shape */
.box {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Blend Modes

Controls how element colors mix with their background. Common modes: multiply, screen, overlay. Uses mix-blend-mode or background-blend-mode properties.


/* Before: Simple overlapping */
.parent { background: yellow; } .child { background: blue; }

/* After: Color blending */
.child {
    mix-blend-mode: multiply;
}

Multiple Backgrounds

Layers multiple background images on an element, separated by commas. First listed image appears on top.


/* Single background */
.hero { background: url(texture.jpg); }

/* Layered backgrounds */
.hero {
    background:
        url(overlay.png),
        url(pattern.svg),
        linear-gradient(to right, #ff0, #f00);
}

min() & max() & minmax()

CSS functions for responsive sizing. min() uses smaller value, max() uses larger value. minmax() defines size range for grid tracks.


/* Fluid typography */
h1 { font-size: max(2rem, min(5vw, 3rem)); }

/* Grid layout */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Container Queries

Styles elements based on parent container's size rather than viewport. Enables truly component-responsive design.


/* Define container */
.card-parent { container-type: inline-size; }

/* Container-based styling */
@container (min-width: 400px) {
    .card {
        flex-direction: row;
    }
}

CSS Reduced Motion Best Practices

Respects user's motion preferences through media queries. Essential for accessibility and preventing motion sickness.


/* Before: Always animate */
.spinner { animation: spin 2s infinite; }

/* After: Conditional animation */
@media (prefers-reduced-motion: no-preference) {
    .spinner {
        animation: spin 2s infinite;
    }
}

CSS Accessibility Best Practices

Relative units (rem, ch) maintain accessibility better than absolute units (px). 1rem = root font-size, 1ch = width of "0" character.


/* Before: Fixed sizing */
p { font-size: 16px; width: 500px; }

/* After: Accessible sizing */
p {
    font-size: 1rem; /* Scales with user's settings */
    width: 60ch; /* Optimal reading line length */
}

Things I want to get better at

CSS

Javascript

HTML

Other

Just Modern CSS