Useful snippets

scroll behavior in different css-positions

Discovery:

Set position: fixed|avsolute on parent element, and you can choose between instant and smooth scroll-behaviors (scroll-behavior: initial|smooth)

But with position: sticky|relative|static you can't choose. You're stuck with smooth scrolling

Generate CSS module classnames in Vite

import { defineConfig } from "vite";
import * as path from "path";
import { fileURLToPath } from "url";

// https://vitejs.dev/config/
export default defineConfig({
css: {
modules: {
generateScopedName: (name, filename) => {
const f = filename.split("?")[0].split(".")[0];
const file = path.basename(f);
return </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>file<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">;
}
}
},
});

CSS position floatish relative

https://css-tricks.com/almanac/properties/p/position/#absolute

To make the child element positioned absolutely from its parent element we need to set this on the parent element itself:

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.parent {
position: relative;
}

Now properties such as left, right, bottom and top will refer to the parent element, so that if we make the child element transparent we can see it sitting right at the bottom of the parent: