I found an interesting article on CSS scope this morning and it sparked a train of thought. Here is said article.

I have a hard time being comfortable with preset styling. I want to hold onto customization abilities as much as possible.

Jump to scope

Tailwind

Tailwind, for example, is a predefined library of styling choices you call right in your code. That's pretty cool, however I have a few things to say about this. Putting your styling inline with the rest of your code makes it look messy and less clear. I feel it adds chaos.

It's already a challenge to hold your spot among many lines of code. If you want to change things you must:

• search through your code
• find that exact place it is happening
• make your change

Eww. XD

Not to mention, what if I don't like the vibe of lime 300, and I want lime 350? Well, unless you want to go in and modify your tailwind.config.js file, that's not going to happen. But then I ask what is the point? Now your html is convoluted and you have a separate styling file anyways. I'm not here to fuss about tailwind. It's an elegant framework but not everyone's cup of tea. Perhaps It will be my preference 5 years from now. Who knows.

Bootstrap

Bootstrap is interesting, you can just import regular bootstrap and then link your custom css file just after the bootstrap link to override specified styles. Remember your custom css link must come after the bootstrap link or it will not work as you want it to.

This makes total sense, you have bootstrap to give you some styling, and you can easily tweak it to fit your need by overriding. I can work with this. This feels simpler and more like the traditional css approach I have become accustom to. Yay! Now I can incorporate only the finest shades of lime. XD

Playing with scope in CSS

Now, to get back to the initial spark here: @scope. Sometimes when writing css things get a bit insane, as you have probably found. Sometimes when nesting elements, the styles do not apply as anticipated. Use @scope to have the elements hold onto their styling, regardless of selector/class declaration order in your stylesheet!

I've created a container with multiple nested divs. The two most outlying divs contain a sequence of similarly nested divs with class names in different places. This visual is helpful for understanding the function of @scope.

No scope, just regular CSS:

HTML file:

But where did all my fun styling go?


I could use a bunch of id's, or change the order or things in my style sheet. But, if I know what i'm trying to do I can leave things as they are I can use @scope to lock in those styles! And, if I want these styles to behave the same later elsewhere, @scope sounds like a great choice.

Using @scope

So then, after implementing @scope we have:

This is much more interesting!


Here is what the new CSS file looks like:

Fancy.

Flex is for layout, I've used it here in a weird way to layout a face with scope:





It's easy to think about how this might help you organize a website's styling in a way that is easy and makes sense. The big square is the container, and the little squares can be thought of as parts of the grid. We access each smaller square individually by assigning it the scoped class. I could easily make a new face with different colors by adding a new scope:

You can have multiple scopes! Sweet.