css-modules VS caniuse

One aspect of CSS modules that I truly appreciate is its ability to compress class names into very short hashes. This feature allows me to keep my CSS selectors as long and descriptive as needed, while still compressing them into concise three or four character hashes. It aligns with my rule for CSS: selectors should be written for human readability, but compressed for machine efficiency.

Use methodologies such as BEM, and technologies including CSS modules, CSS-in-JS, and Shadow DOM to isolate the styles of each micro-application and prevent conflicts, thus ensuring reliable encapsulation and modularity.

For many years, Culture Amp took the second option, and distributed shared components without compiled CSS. This meant that every app that consumed shared components needed to include the necessary CSS build tooling – at that time CSS Modules and node-sass – with a compatible version and configuration. This was relatively easy to set up, but over time proved difficult to maintain. When node-sass was deprecated in favour of (the much faster but slightly incompatible) Dart Sass, this demanded a difficult lock-step migration across all those codebases, which we have yet to achieve. And as new applications have switched to Tailwind for their own styles, they've had to continue to maintain those old build tools in parallel for the shared components' styles.

So CSS modules are a form of 3rd-party CSS-in-JS, where what you import are the class names, which are then usually obfuscated etc at compile time, and all the actual style declarations are (usually) compiled into a single css file or tag as part of the bundling process. You can read the og docs on'em here, and you've probably seen'em used in React like:

import styles from "./styles.css";

function Example(){
    return (
        

            Hello
        
    );
}

They predate the ability to import non-js files in vanilla by a good while, and rely on the compile process to translate your .css files into .js files that can be imported using whichever loader you use in your bundler.

Import assertions are a vanilla way to import non-js files by telling the browser how to import them; assert { type: "css" } says to treat the file as CSS and create a CSSStyleSheet, assert { type: "json" } says to treat the file as JSON and create a JSON object - and hopefully assert { type: "html" } will hopefully arrive soon and create a #document-fragment or something similar.

Hope that clears it up!

Extensions of CSS: for example, Sass, Less, Tailwind, CSS Modules, to make stuff look a certain way on your own.

The components are styled with CSS modules. When building the library, these styles will get transformed to normal CSS style sheets. This means that the consuming application will not even be required to support CSS modules. (In the future I want to extend this tutorial to use vanilla-extract instead.)

NextJS comes with built-in support for CSS Modules which allows you to scope your styles locally in individual components without worrying about name collisions or messing up other parts of the codebase.

CSS modules are not to be confused with mixins, as they serve the opposite purpose. While mixins are components or functions to be reused globally, modules are style sheets with a local scope used in a similar way as styled components in React.

CSS Modules CSS Modules is a pre-processing step: by default, styles are scoped locally to the current component, and the transpiler ensures no conflicts.

You forgot to mention (Web)Workers. This is explicit creation, management, and communication with additional threads within JavaScript. What's more, they've been around in JavaScript longer than the V8 engine has even existed!

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

https://caniuse.com/?search=webworkers

Do you happen to know where can I check out the cutoff version for each browser? https://caniuse.com/?search=wasm doesn't have it (or other things like WasmGC for that matter)

(https://caniuse.com/) A handy tool for checking the browser compatibility of HTML, CSS, and JavaScript features. Can I Use provides up-to-date support tables for various web technologies across different browsers.

Caniuse

Can I Use (https://caniuse.com/)

> Is it though?

In my experience it's the buggiest browser out of the big three, and is often missing basic features like e.g.:

https://caniuse.com/?search=opus

Supported in Firefox for *12 years* now, in Chrome for 10, still no support in Safari.

They only "support" Opus audio in their special snowflake '.caf' container, which is super buggy and the last time I checked no open source program could even generate Opus '.caf' files that could be played by Safari on all Apple platforms. I ended up writing a custom converter which takes a standard '.opus' file and remuxes it on-the-fly (I only store '.opus' files on my server) into Safari-compatible '.caf' files, taking special care to massage it so that it avoids all of their demuxer/decoder bugs. You shouldn't have to do this to have cross-browser high quality audio!

Well I'll be! In my mind I had this clear picture of Firefox implementing it.

It correct, it was only Chrome: https://caniuse.com/?search=html%20import

https://caniuse.com/?search=web%20bluetooth

which might be great because you have the choice...

and you can use open source chromium or brave (like the jvm to run cross platform java) to run web apps seemlessly that need web bluetooth or such but use safari or firefox for personal use if you find them more secure

I mean using chromium engine as the running environment where chromium only ever runs special trusted web domains and never goes to other "malicious" web domains that may fuck up iOS as Apple claims would be still a secure choice

like you will not download spyware from Apple Store because you are an adult not because Apple can protect you there