3 ms·
My understanding of CSS Module are that they work within a given front end solution but if you embed a "widget" into another website (as the OP is doing) that t
by aswerty 2y ago
My understanding of CSS Module are that they work within a given front end solution but if you embed a "widget" into another website (as the OP is doing) that they provide no benefit. Happy to be corrected though.
- SebastianKra 2y agoIn the end, their class names are compiled to random ids. So you can reference all your css from the <head> with basically zero chance of collisions. A Shadow DOM could ensure isolation between the two teams, but CSS namespacing is also a concern within a team, so CSS modules will just kill two birds with one stone here.
- aswerty 2y agoThanks for the follow up. So they handle the upstream collisions nicely (i.e. the embedded content not affecting the parent site). But the other side of it is the downstream (i.e. the parent site doing `div { color: black }` which propogates to the embedded content) and it won't handle that nicely. You can do something like cleanslate does (https://github.com/premasagar/cleanslate https://github.com/premasagar/cleanslate) to aggressively unset so the parent sites CSS gets "disarmed". But it is not the smoothest and things like REM unit values still propagate to the embedded content.
- SebastianKra 2y agoYeah you're right about that. I consider global styling of tags such a bad practice that I would suggest removing all of that immediately. I had to deal with this in a project using https://materializecss.com https://materializecss.com, and it was such an uphill battle to override these styles. Because apparently nobody considered that an application might have more than one kind of table https://materializecss.com/table.html https://materializecss.com/table.html.