Native CSS Nesting Guide

Native CSS nesting is now supported across modern browsers, allowing developers to write more maintainable and organized stylesheets without preprocessors. Let's explore how to use this powerful feature effectively.

Understanding CSS Nesting

Native CSS nesting allows you to write nested selectors directly in your CSS, similar to Sass or Less, but without requiring a preprocessor.

Basic Nesting Syntax

Start with simple selector nesting:

.card {
    padding: 1rem;
    border-radius: 8px;
    background: #fff;

    & .header {
        font-size: 1.25rem;
        margin-bottom: 1rem;

        & .title {
            color: #1a1a1a;
            font-weight: 600;
        }
    }

    & .content {
        line-height: 1.5;
        color: #4a4a4a;
    }
}

Advanced Nesting Patterns

Pseudo-Classes and Elements

Nest pseudo-selectors efficiently:

.button {
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: white;
    border-radius: 4px;
    transition: all 0.2s;

    &:hover {
        background: #2563eb;
        transform: translateY(-1px);
    }

    &:active {
        transform: translateY(1px);
    }

    &::before {
        content: "";
        display: inline-block;
        margin-right: 0.5rem;
    }
}

Media Queries

Implement responsive designs:

.container {
    width: 100%;
    padding: 1rem;

    @media (min-width: 640px) {
        & {
            max-width: 640px;
            margin: 0 auto;
        }

        & .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
    }

    @media (min-width: 1024px) {
        & {
            max-width: 1024px;
        }

        & .grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

Component-Based Patterns

Modular Components

Create self-contained component styles:

.widget {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;

    & .widget-header {
        padding: 1rem;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;

        & h2 {
            margin: 0;
            font-size: 1.25rem;
            color: #111827;
        }

        & .widget-controls {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.5rem;

            & button {
                padding: 0.25rem 0.5rem;
                border-radius: 4px;
                background: #fff;
                border: 1px solid #d1d5db;

                &:hover {
                    background: #f3f4f6;
                }
            }
        }
    }

    & .widget-content {
        padding: 1rem;

        & p {
            margin: 0 0 1rem;
            line-height: 1.6;
        }
    }
}

State Management

Handle component states:

.form-field {
    margin-bottom: 1rem;

    & label {
        display: block;
        margin-bottom: 0.5rem;
        color: #374151;
    }

    & input {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #d1d5db;
        border-radius: 4px;

        &:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        }

        &:disabled {
            background: #f3f4f6;
            cursor: not-allowed;
        }
    }

    &[data-invalid="true"] {
        & label {
            color: #dc2626;
        }

        & input {
            border-color: #dc2626;

            &:focus {
                box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
            }
        }

        & .error-message {
            color: #dc2626;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
    }
}

Layout Patterns

Flexible Grid Systems

Create responsive grid layouts:

.grid-system {
    display: grid;
    gap: 1rem;

    @media (min-width: 640px) {
        & {
            grid-template-columns: repeat(2, 1fr);
        }

        & .wide {
            grid-column: span 2;
        }
    }

    @media (min-width: 1024px) {
        & {
            grid-template-columns: repeat(4, 1fr);
        }

        & .wide {
            grid-column: span 2;
        }

        & .extra-wide {
            grid-column: span 4;
        }
    }

    & .grid-item {
        background: #fff;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

        &:hover {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
    }
}

Navigation Components

Build responsive navigation:

.nav {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    & .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        @media (max-width: 768px) {
            & {
                flex-direction: column;
                align-items: stretch;
            }
        }
    }

    & .nav-brand {
        font-size: 1.5rem;
        font-weight: bold;
        color: #111827;

        &:hover {
            color: #3b82f6;
        }
    }

    & .nav-links {
        display: flex;
        gap: 1rem;

        @media (max-width: 768px) {
            & {
                flex-direction: column;
                margin-top: 1rem;
            }
        }

        & a {
            color: #4b5563;
            text-decoration: none;
            padding: 0.5rem;
            border-radius: 4px;

            &:hover {
                background: #f3f4f6;
                color: #111827;
            }

            &.active {
                background: #3b82f6;
                color: white;

                &:hover {
                    background: #2563eb;
                }
            }
        }
    }
}

Best Practices

Maintainable Structure

Organize nested styles effectively:

.component {
    /* Component base styles */

    /* Child elements */
    & .header { }
    & .content { }
    & .footer { }

    /* States */
    &:hover { }
    &:focus { }
    &:active { }

    /* Variations */
    &.primary { }
    &.secondary { }

    /* Media queries */
    @media (min-width: 768px) { }
    @media (min-width: 1024px) { }

    /* Nested components */
    & .sub-component { }
}

Performance Considerations

Optimize nested selectors:

/* Good - Limited nesting depth */
.card {
    & .header { }
    & .content { }
}

/* Avoid - Excessive nesting */
.card {
    & .header {
        & .title {
            & .text {
                & span { }
            }
        }
    }
}

Browser Support and Fallbacks

Implement progressive enhancement:

@supports (selector(&)) {
    .component {
        /* Nested styles */
        & .child { }
    }
}

@supports not (selector(&)) {
    .component .child { }
}

Conclusion

Native CSS nesting brings powerful organization capabilities:

• Improved code organization
• Better maintainability
• Reduced repetition
• Cleaner stylesheets

Key takeaways:

• Use nesting judiciously
• Keep nesting depth reasonable
• Follow consistent patterns
• Consider performance
• Implement fallbacks when needed

By mastering CSS nesting, you can write more maintainable and organized stylesheets without relying on preprocessors.