Zenn
Open4

CSS in JS の Syntax を考える

CSS
JavaScript
設計
Taishi NaritomiTaishi Naritomi

Object ( style({}) )

// TODO

style({
  color: 'red',
  backgroundColor: 'red',
  '&:hover': {
    color: 'red',
    backgroundColor: 'red',
  },
  '@media (max-width: 1000px)': {
    color: 'red',
    backgroundColor: 'red',
  },
  '&::after': {
    content: '""',
    color: 'red',
    backgroundColor: 'red',
  }
})
Taishi NaritomiTaishi Naritomi

Tagged templates ( style`` )

// TODO

style`
  color: red;
  background-color: red;
  &:hover {
    color: red;
    background-color: red;
  }
  @media (max-width: 1000px) {
    color: red;
    background-color: red;
  }
  &::after {
    content: "";
    color: red;
    background-color: red;
  }
`
Taishi NaritomiTaishi Naritomi

Method chain ( style.color('red') )

// TODO

style
  .color('red')
  .backgroundColor('red')
  .selector('&:hover', style.color('red').backgroundColor('red'))
  .selector(
    '@media (max-width: 1000px)',
    style.color('red').backgroundColor('red'),
  )
  .selector(
    '&::after',
    style.content('""').color('red').backgroundColor('red')
  );