regulated css vs @layer and @scope
Hey, what's a major difference between using regulated css and @layer/@scope? With @layer, if you generally make sure values don't clash and add exceptions for cases where they might then @layer seems like extra work to me? The same with @scope, rather than saying "make all text from a to b orange", then you could wrap the contents of a to b in a utility class called "text-orange" or something, at least that's what i've commonly seen used. All in all they both seem like more work? I'd appreciate some opinions, thanks in advance.
11 Replies
Regulated CSS involves structured approaches like class-based styling, utility classes, and methodologies such as BEM. It offers explicit control and reusability but can be verbose and prone to global conflicts.
@layer helps manage CSS by controlling the order of style application and isolating layers, which aids in handling specificity and conflicts in larger projects. However, it introduces a learning curve and can feel redundant if not used correctly.
@scope limits styles to specific parts of the DOM, enhancing encapsulation and reducing global conflicts. It provides better control in component-based systems but may result in verbose HTML and requires learning new syntax.
Comparison and Use Cases:
. Regulated CSS is ideal for smaller projects or well-defined components.
. @layer is useful for large projects or when managing third-party CSS.
. @scope is great for component-based designs to avoid style leakage.
In summary, while @layer and @scope might add complexity initially, they offer significant benefits for managing large, complex CSS codebases, making them more maintainable and scalable compared to traditional regulated CSS.
thank you for the explanation. I feel that you can structure your css in a way to where conflict is very rare, i use cube css most of the time as i find it most optimal and i've never run into a conflict issue that requires @scope to fix it due to the layout being made in a way that prevents conflicts, or anything complex for that matter. As for @layer, i can see how it's useful for third party css, but as for component-based designs, i've never run into a layout like that, it's always the base component and then any exceptions are styled with a data-attribute or class, they both seem like something that would rarely be used to me if not for third party css? It seems more like a preference to me at the moment?
Is there an example anyone could provide where that method is favored over regulated css please?
I can understand how using data attributes or classes for exceptions works well for your component-based designs.
Regarding @layer, its primary advantage lies in its ability to manage specificity and prevent conflicts, especially in large projects or when integrating third-party CSS. While you might not find @scope and @layer necessary in your current workflow, they can be valuable tools in different contexts, particularly in larger, more complex projects.
Ultimately, as you mentioned, it often comes down to personal preference and the specific needs of a project. It's always good to have these tools available for when the situation demands more robust CSS management.
this should be in #discussions not in #front-end
alright got it, thank you. i appreciate it.
oh? i've always asked things like this in this channel and never been told that? i'll do that next time then
(I'm not a mod but I think this is perfectly fine to be in #front-end)
if it was maybe a mod would have said that already
They’re not always available to look at every post
there's arguments both way, but please keep things civil.
in general, questions that involve actual code to look at go in #front-end, and more open topics of "what are the benefits of X and Y" go in #discussions even if that's for a frontend topic, but it's not a super hard line either way
see its #discussions jochem just said that
I’m aware. There isn’t a super hard line though as said. I’ll do that next time. As I previously said, I was just following what I always do.
If you're so invested in this being in discussions, why did you answer in here?
Regardless, it doesn't matter that much. Like I said, probably discussions, but there's an argument for this to be here as well