Namespacing modules

Right now the only way to namespace a module is by nesting in a BEM format which gets messy real quick. I propose that a @namespace syntax be introduced. With this we could have:

// _mod-module.scss
@namespace 'mod-module';
.foo{}
.bar{}

that interprets as this in CSS:

/* app.css */
.mod-module__foo{}
.mod-module__bar{}

Another option would be to leave the name spacing to when the module is being imported. This way we can specify modules we want to be namespaced from the manifest/index Sass file

// _mod-module.scss
.foo{}
.bar{}

@import 'mod-module', 'modModule';

this way the @namespace syntax is not required so it produces:

/* app.css */
.modModule__foo{}
.modModule__bar{}

taking the name of the namespace as second argument to @import

[josephrexme]

I agree but there’s a solution to everything. Using ack, this would find every selectors you need for the nested syntax:

ack --scss -l -Q .mod-module | ack -x '&__foo'

and for the new proposed syntax which is:

@module '.mod-module';

.foo{}
.bar{}

this should do the search:

ack --scss -l -Q .mod-module | ack -x 'foo'

As you’ve said it should be coupled with the module system but we have that better in Sass right now and not CSS. Hopefully we get houdini soon and all these can just be added extensions for CSS but Sass is the biggest hope for such a feature now. I hope this can be looked into more closely and reconsidered

[ArmorDarks]

To be honest, when working with BEM, I do not recommend any form of concatenation, even &__foo {}, since it makes search-n-finding of such selectors much harder, especially in large projects. So, whole idea with namespacing as part of Sass feature sounds very vague for me.

At least for now I don’t see how Sass could handle this well, It should be part of CSS and closely coupled with imports (module system), then we won’t have obscurity and A LOT of potential edge cases introduced by Sass-only directive.