Hacker News new | past | comments | ask | show | jobs | submit login
Ask HN: Methods for Namespacing in CSS?
7 points by PaulHoule 4 months ago | hide | past | favorite | 13 comments
Here's a problem I've struggled with for years that just came back.

I exported a few hundred notes from Evernote, these have about 300k of CSS and SVG. I am displaying these through a web application that can compose HTML documents at the DOM level, so I can just insert some elements into the <head> and <body>. I am inserting a toolbar into the page that also pops up modal dialogs to let the user annotate text. Right now I am keeping the native CSS but I know there's some risk of namespace collisions between my CSS and their CSS particularly because I am using Bootstrap which uses bog common words for names.

I am facing something similar to work where we have a React application that sometimes gets loaded on our partners web pages so we always have some concern we might break each others CSS.

The pages from Evernote have no JS so I'd imagine in principle I could rewrite names in the style sheet and HTML. My UI is mostly HTMX but the back end has to know what things are called on the front end and there are small amounts of Javascript.

I think of Ted Nelson's ideas of "transclusion" and how it's a bit difficult to cut and paste a piece of one HTML page into another HTML page because of these namespace issues.

What solutions are out there for this sort of problem?




With React, you're looking for css modules. They are widely adopted, can be incrementally migrated to, require no change in how you write your CSS and are probably already supported by your bundler (vite, webpack, create-react-app). https://github.com/css-modules/css-modules

Also, it may be worth looking into why you're writing so much CSS in the first place. I found that 80% of my CSS addressed layout concerns (display: flex; direction: 'column'; margin: var(--space-2);), so using specialised components allowed me to write less coupled components in fewer lines of code. You can either write them yourself, or check out something like https://www.radix-ui.com/themes/docs/overview/layout.


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.


In 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.


Thanks 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) 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.


Yeah 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, 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.


Have bumped into this myself recently and we ended up prefixing all CSS classes and ids with a value (i.e. "xyz_"). We leverage Tailwind and our build tooling for this. This has proven somewhat successful but often need to review every site our widget is placed on for edge cases. But at this point we are close to abandoning this approach.

We plan to re-assess using iframes. Which we originally steered clear from due to their rather "dated" feel as a technology.


why not use web components?


I like the template and slots mechanisms described here:

https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

and I see some CSS pseudo-classes but I don't see anything I can use to suppress the host site's CSS acting on my UI elements -- am I missing something?


Be default css rules cannot affect the internals of web components. They can only read variables.


if you use the shadow dom, your component won't inherit css rules from the parent site.


I second this suggestion. Web components and the shadow DOM provide a fully isolated "namespace" where you can keep CSS from leaking out into other components. You can still include shared CSS in those files so you get the best of both worlds.


... I just found I can do that with HTMX

https://htmx.org/examples/web-components/

thanks!


shadow dom




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: