CSS in JS

Published See discussion on Twitter

I have been pretty vocal about writing css within javascript in the past. I used to be completely against the pattern. I believed in the power of css on its own and all the benefits of being able to use things like pseudo selectors and attribute selectors as well. So up until about a month ago I was strictly on the side of keeping css outside of the javascript files. Now I can't get enough of it.

It started with experimenting with Styled Components, which I thought was a pretty cool idea. One of the limitations of styled components is that every dom node starts to become a styled component. You begin to have several styled <div>'s just to handle layout for different components. In small websites/apps this can be an alright trade off but in larger applications this gets really hairy really fast.

Then about two weeks ago I decided to start messing around with Next JS. With Next comes styled-jsx which is a really cool way to handle styling components. You simply throw a style tag within the component and add your css within a template literal.

From here on out you can write your regular old css, include pseudo selectors and other cool things.

However one of the benefits of writing css within a template literal is the ability to inject things from within your javascript. I started with just storing my variables in separate modules like below:

1export default {
2  a: '#F3CC31',
3  b: '#4CD385',
4  c: '#EA6658',
5  d: '#A971C0',
6  e: '#51A7E0',
7  white: '#FEFEFE',
8  black: '#0f0f0f',
9  gray: '#ecf0f1',
10  softWhite: '#F1F4F5',
11};
1export default {
2  a: '#F3CC31',
3  b: '#4CD385',
4  c: '#EA6658',
5  d: '#A971C0',
6  e: '#51A7E0',
7  white: '#FEFEFE',
8  black: '#0f0f0f',
9  gray: '#ecf0f1',
10  softWhite: '#F1F4F5',
11};

I used these like this:

1<style>
2  {`
3  :root {
4
5    --a: ${colors.a};
6    --a-muted-one: ${color.convert(`color(${colors.a} lightness(+ 5%))`)};
7    --a-muted-two: ${color.convert(`color(${colors.a} lightness(+ 20%))`)};
8    --b: ${colors.b};
9    --b-muted-one: ${color.convert(`color(${colors.b} lightness(+ 5%))`)};
10    --b-muted-two: ${color.convert(`color(${colors.b} lightness(+ 20%))`)};
11    --c: ${colors.c};
12    --c-muted-one: ${color.convert(`color(${colors.c} lightness(+ 5%))`)};
13    --c-muted-two: ${color.convert(`color(${colors.c} lightness(+ 20%))`)};
14    --d: ${colors.d};
15    --d-muted-one: ${color.convert(`color(${colors.d} lightness(+ 5%))`)};
16    --d-muted-two: ${color.convert(`color(${colors.d} lightness(+ 20%))`)};
17    --e: ${colors.e};
18    --e-muted-one: ${color.convert(`color(${colors.e} lightness(+ 5%))`)};
19    --e-muted-two: ${color.convert(`color(${colors.e} lightness(+ 20%))`)};
20  }
21`}
22</style>;
1<style>
2  {`
3  :root {
4
5    --a: ${colors.a};
6    --a-muted-one: ${color.convert(`color(${colors.a} lightness(+ 5%))`)};
7    --a-muted-two: ${color.convert(`color(${colors.a} lightness(+ 20%))`)};
8    --b: ${colors.b};
9    --b-muted-one: ${color.convert(`color(${colors.b} lightness(+ 5%))`)};
10    --b-muted-two: ${color.convert(`color(${colors.b} lightness(+ 20%))`)};
11    --c: ${colors.c};
12    --c-muted-one: ${color.convert(`color(${colors.c} lightness(+ 5%))`)};
13    --c-muted-two: ${color.convert(`color(${colors.c} lightness(+ 20%))`)};
14    --d: ${colors.d};
15    --d-muted-one: ${color.convert(`color(${colors.d} lightness(+ 5%))`)};
16    --d-muted-two: ${color.convert(`color(${colors.d} lightness(+ 20%))`)};
17    --e: ${colors.e};
18    --e-muted-one: ${color.convert(`color(${colors.e} lightness(+ 5%))`)};
19    --e-muted-two: ${color.convert(`color(${colors.e} lightness(+ 20%))`)};
20  }
21`}
22</style>;

I started to realize that you can do a lot more with template literals and css. If you are used to sass or less or similar setups than you probably use a few mixins or extends. Turns out mixins are just plain old javascript functions:

1export const tablet = cssString => (
2  `@media screen and (min-width: 25rem) { ${cssString} }`
3);
4export const desktop = cssString => (
5  `@media screen and (min-width: 45rem) { ${cssString} }`
6);
1export const tablet = cssString => (
2  `@media screen and (min-width: 25rem) { ${cssString} }`
3);
4export const desktop = cssString => (
5  `@media screen and (min-width: 45rem) { ${cssString} }`
6);

And now I can use these "mixins" like this:

1<style jsx>
2  {`
3  ${
4    tablet(`
5    .class {
6      color: red;
7    }
8  `)
9  }
10`}
11</style>;
1<style jsx>
2  {`
3  ${
4    tablet(`
5    .class {
6      color: red;
7    }
8  `)
9  }
10`}
11</style>;

There is one final caveat with Styled-jsx, first off is that there are some minor bugs on how the selectors are actually set up. Every selector generally gets an extra [styled-jsx="some string of numbers here"] applied to it. This adds the convenience of "locally-scoped" css, however external strings added to the css don't get this feature. Which might cause css to break in some circumstances. There is a pr out currently to add in external css as well which might not fix this issue, but will allow you to split out that css from the view if you want to.

Ultimately I think this is going to be my go to setup to handle styles for the near future. I will always be experimenting with alternative methods, so I will be sure to add another post if in two months I start writing some fancy new syntax for my styles.

Tags:

CSSJavaScriptWeb Development