At the very least support of nesting is a huge convenience, but in practice I've also found that it saves me from all sorts mistakes, whether it's because I'm being stupid, or refactoring things.
That said, overusing nested selectors can be a problem too. I generally try to limit myself to two levels of nesting (component -> element), and then a third for pseudo-classes (:hover, :selected, etc.) and pseudo-elements (:before, etc.).
I just feel that nesting (which Sass encourages) leads to complexity and fragility.
Assuming you're using a component framework like React, Vue, or Angular (and not a shadow dom based system like Polymer), how do you isolate your component CSS?
When I make a component 'MyComponent', I give it the className 'MyComponent'. Then I can create a SCSS file and scope its entire contents:
.MyComponent {
// all the css specific to MyComponent
}
In Vue and Angular component styles are automatically encapsulated at the component level by scoping (I think) so nesting isn't really necessary to target specific components. Angular also recently deprecated a method of breaking out of component styling and soon it will be completely removed from the framework.
Although I'm a critic I'm not totally against nesting, I just feel that SASS encourages it, so without discipline things can get very complex and fragile. One level of nesting is OK with me though I suppose...
In what way(s) is SASS different than anything else in this regard?
These solutions all seem quite a lot more complicated than nested scopes! And at least for styled components (angular, I presume) and styled-jsx (react), they're framework-specific. Why are these solutions better?
In some cases I can preclude the necessity of having to declare class names.
section {
h1 {},
p {},
img {},In other cases I have an index with easy-to-find classes.
.hero {
.gradient {},
.description {},
.signup {},EDIT: I meant to reply to a different comment but oh well.
Is there another kind of CSS?
Terminology is important but I see it's not important among some people and other hobbyists online.
There is a meme within the community about 'vanilla JavaScript' called VanillaJS:
https://stackoverflow.com/questions/20435653/what-is-vanilla...
The overwhelming majority of front-end projects and developers that I encounter use some kind of library, framework, or compilation/build tool. It's common enough to basically be the default.
If you use 'plain' or 'vanilla' javascript (or CSS), you're doing something less common, at the very least around these parts, and so qualifying this makes sense. The mere fact that many people clearly seem to feel a need to point this out makes it so. Why would they otherwise?
Judging by your comment history, the vast majority of your contributions here boil down to some kind of dig at how 'people these days' are 'doing it wrong', and how obviously you are superior to that and how you don't see the need for any of this new-fangled stuff. I'm honestly curious whether that's just role-playing, or if that kind of superiority about being older and wiser is somehow important to you.
I'd very much prefer it if you shared the wisdom you've accrued in a more constructive way, because as far as I can tell you're not actually wrong about a lot of this stuff.
Older and wiser curmudgeons have played a valuable role in my development, but your approach strikes me as self-serving and somewhat poisonous to the/any community. But of course you're free to do as you please.
https://stackoverflow.com/a/40115909/135845
Unfortunately, I see that "The Ubuntu Web Team" decided to shit the bed and steal the name for the CSS framework they created. So fsck me I guess.
I found scoped css like component or BEM just make sense, which only encourage you nest one level in block namespace.
You’re manually creating nesting hierarchies and naming them (something a computer should be doing).
And yes, the moment you move something, everything breaks. Because instead of moving/renaming just the parent selector you have to move/rename all the related child selectors.
And BEM is a workaround of names pace, not nesting. Nesting is not what CSS lack of. Instead what CSS really lack for is basic abstraction like function (same as function component in react to HTML). Given CSS is basically similar to key value pair (data), a first class function model would solve most of the problems - reusing, encapsulation, abstraction etc.
https://stackoverflow.com/questions/13829959/nested-selector...
It's about Less but the same rule applies to CSS and Sass.