troch

Choosing a CSS in JS library

Check comments below, this is only my opinion and a choice specific to my use case

We've architected a SPA to be universal-ready. It grew a lot, when we introduced code splitting we realised converting to CSS in JS was unavoidable in order to have pre-rendering and not load all our CSS up front. We've procrastinated on looking at CSS in JS properly, prioritasing immediate business needs, but kept an eye on industry evolutions.

Our CSS solution for components was a CSS companion file per component, imported with style / postCSS loader (with webpack) but no CSS modules: we were missing a tighter coupling between component rendering and styles. We were at the bottom of the CSS and componentization ladder, the following links have influenced us in choosing the right solution for us:

• Christopher Chedeaux, 2015, "CSS in JS" https://speakerdeck.com/vjeux/react-css-in-js
• Mark Dagleish, 2015, "The case for CSS modules" https://www.youtube.com/watch?v=zR1lOuyQEt8

excalq

// 2024 Update, use URLSearchParams [https://caniuse.com/urlsearchparams]
export function createQueryString2(name: string, value: string, searchParams: any) {
  const params = new URLSearchParams(searchParams);
  params.set(name, value.toLowerCase());

  return params.toString();
}

// ---- Original 2012 version, when browsers really sucked ----
// Explicitly save/update a url parameter using HTML5's replaceState().