Skip to content
loading...

re: You Don't Need CSS-in-JS: Why I Use Stylesheets VIEW POST

TOP OF THREAD FULL DISCUSSION
re: i guess I'll turn it back, how would you do it otherwise? if you're using a JS solution, you would need know that the page changed size in order to...
 

First of all, great article. I think many people overlook the power in regular CSS, and a lot of it has to do with a lack of understanding about the cascade and the flexibility in CSS selectors, custom properties, and functions like calc() or a preprocessor step to make conventions like BEM easier.

To answer your question though, many CSS-in-JS libraries transpile to CSS, including support for @media queries.

As an example, here are some media query mixins I've used recently, written in JS for use with the styled-components library:

/**
 * Media Query Utilities
 */
export const media = {
  mobile: (first, ...args) => css`
    @media (max-width: ${breakpoints.mobile}) {
      ${css(first, ...args)}
    }
  `,
  desktop: (first, ...args) => css`
    @media (min-width: ${breakpoints.desktop}) {
      ${css(first, ...args)}
    }
  `,
  /**
   * Return a style that only applies when the property matches the media query:
   *
   * `'mobile'` => apply style to mobile
   *
   * `'desktop'` => apply style to desktop
   *
   * `true` => apply the style for all sizes
   *
   * `false` => don't apply the style
   */
  switch: (switchProp?: BreakpointSwitchProp) => (first, ...args) => {
    if (switchProp === 'mobile') {
      return media.mobile(first, ...args)
    } else if (switchProp === 'desktop') {
      return media.desktop(first, ...args)
    } else if (switchProp === true) {
      return css(first, ...args)
    } else {
      return ''
    }
  },
  noMotion: (first, ...args) => css`
    @media (prefers-reduced-motion: reduce) {
      ${css(first, ...args)}
    }
  `
}

thanks! interesting - so is it compiled for the lifetime of the app? one particular piece I wasn't clear on is page to page loading, particularly if the app would still use JS to compile and fetch those new styles

It depends on your setup, typically with webpack loaders or something similar. There is quite a bit of infrastructure involved. It's been a while since I delved into this stuff but I think it can be either compiled into CSS files that are then available to import with normal <link> tags, or injected into style tags in the document. I think the second option is used to load the new page styles when routing in single-page apps. I know I've hit some bugs in single-page apps with loading order effecting the resulting styles, which can be a pain.

I'm sure someone else knows more about this than me and might be able to chime in though!

yeah - makes sense. good to know though, appreciate the info

code of conduct - report abuse