CSS-in-JS is a pattern where CSS styles are written inside JavaScript files and applied to elements programmatically at runtime, rather than being written in separate stylesheet files. Instead of a static .css file, the styles are generated by JavaScript and injected into the page as the component renders.
It's common in modern JavaScript frameworks like React and Vue, and in tools like styled-components, Emotion, or Tailwind's JIT mode. One consequence is that the class names applied to elements are often randomly generated and change with each build, making them unpredictable and impossible to reference with stable CSS selectors.
For site owners using platforms built on these technologies (some Shopify themes, Webflow, Framer, custom-built sites), this matters when something looks wrong and you're trying to figure out why. The CSS rules controlling the element may not appear in any inspectable stylesheet. Loupely Lens flags CSS-in-JS patterns when it detects them, routes to developer handoff, and explains that the fix lives in the component code rather than in any CSS override you can apply externally.