67 replies

CSS Nesting vs Scoping

🗣️discussion

front-end

I've been watching some videos on CSS scoping (aka @scope) today and now I'm all turned upside down and inside out lol. It looks similar to nesting. I think they are different things though right? How are they different? When would you use one versus the other?

Like if I had a card class and I wanted to make the paragraphs red, I could do:

(Nesting)

.card {
    p {
        color: red;
    }
}

.card {
    p {
        color: red;
    }
}

Or I could do:

(Scoping)

@scope (.card) {
    p {
        color: red;
    }
}

@scope (.card) {
    p {
        color: red;
    }
}

Right??? Am I missing something? I wonder if this would be a good video idea for Kevin?

Thanks!

KP-C

Kevin Powell - Community•2mo ago•

67 replies

Loving Sarah

CSS Nesting vs Scoping

🗣️discussion

front-end

.card {
    p {
        color: red;
    }
}

.card {
    p {
        color: red;
    }
}

Or I could do:

(Scoping)

@scope (.card) {
    p {
        color: red;
    }
}

@scope (.card) {
    p {
        color: red;
    }
}

Right??? Am I missing something? I wonder if this would be a good video idea for Kevin?

Thanks!

CSS Nesting vs Scoping

Similar Threads

CSS Nesting vs Scoping

Similar Threads

Similar Threads

Similar Threads