Modern CSS Patterns

CSS Nesting

Native CSS nesting, no preprocessor required:

.card {
    padding: 1rem;
    background: white;

    & .title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    &:hover {
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
    }