Popular posts

Thanks @sandeep for the invite! Writing CSS in javascript is becoming more and more popular. It makes it easier to bypass CSS specificity wars, autoprefixing, dead code elimination etc.. And that's great! However, most implementations seem far from ideal. Writing CSS in Javascript should be as easy as writing CSS! But projects like JSS have some cons:

• Some javascript properties require 'quoting' (like '&:hover').
• It's difficult to read.
• No native syntax highlighting for editors.
• Everything needs to be camelCase.

I personally like how Vue approached these problems. They created a 'vue-loader' Webpack loader that simply scans for <style> tags within a Vue component file. It also accepts a 'scoped' attribute for scoped selectors. It can also use different CSS preprocessors by using the 'lang' attribute (for SASS/ Stylus/ LESS/ whatever you want to use). And in the end you can just write CSS like you're used to.

Instead of writing this:

button: {
  fontSize: 12,
  '&:hover': {
    background: 'blue'
  }
},

You can write this (when using a SCSS loader):

<style lang="scss" scoped>
button {
  font-size: 12px;
  &:hover {
    background: blue;
  }
}
</style>

No need to quote properties, using camelCase for everything or create a new Syntax highlighting plugin that understands JSS. It also makes the code more readable, thus making it easier to maintain.

TLDR; JSS does a great job at solving some problems with CSS, but the implementation can be more elegant.