Hacker News Reader

Comment by murkt | Hacker News Reader

HTMX, Unpoly and Twinspark are great, can't say anything about Raku.

I also really liked an idea about class-less CSS frameworks, as I was frustrated with all the `<table class="table">` and so on. Then I've tried it for one project where I had to integrate Leaflet map on a page. And it's just not possible to do with class-less CSS frameworks.

Since then I write `<table class="table">` and have zero problems with that.

View on HN

How is it not possible? Can you not just use classes for the map tags and keep everything else the same? Or is the problem that the map styles are affected by the classless CSS?

Yes, map styles are affected by the classless CSS.

But can’t you just do

  #map{
    foo: initial
  }
  #map *{
    foo: initial
  }

For the styles that are a problem? That’s maybe 10 properties you need to remove?

I guess you're right and "impossible" was too strong of a statement. I just didn't feel like debugging those CSS things, especially when adding any new Leaflet plugins, or any other things. So I just switched to a style that I knew will work robustly.

I find "removing" or resetting styles kind of hacky.

Another solution might be packing the map in a shadow element so that it doesn't get affected by the page CSS.

Another thing that one could try:

Use a CSS preprocessor to add a

  :not(.nostyle)

To all rules, and then add the nostyle class to all elements you want to exclude. The problem would be that you have to add the class to every single element (and all children) to exclude them, and there seems to be no good way of having

  selector:not(.class and all children of .class)

The Shadow DOM method is really interesting though, I’ve never used it anywhere but it looks like it’s perfect for this application.

Reply on news.ycombinator.com