Convert SCSS (Sass) to CSS-in-JS

cssCSS
javascriptJavaScript
scssSCSS
ClockIcon23m
Oleg Isonen
By

Oleg Isonen

I have been working on web UIs for over a decade when he realized there are two major challenges in front-end engineering: understanding the state and styling its representation. While the first task has become much easier with unidirectional data flow, components styling is still painful. To change that, I started a project called JSS back in 2014 and didn't stop learning and improving it since then.

About the Course

CSS uses a global namespace for CSS Selectors that can easily result in style conflicts throughout your application when building an application using modern web components. You can avoid this problem by nesting CSS selectors or use a styling convention like BEM but this becomes complicated quickly and won’t scale.

CSS-in-JS avoids these problems entirely by generating unique class names when styles are converted to CSS. This allows you to think about styles on a component level with out worrying about styles defined elsewhere.

In this course, you will learn how to express popular SCSS (Sass) language features using latest JavaScript features. We will convert simple examples from SCSS to CSS-in-JS. As a designer or (S)CSS developer, you should be able to follow without extensive JavaScript knowledge, understanding SCSS is required though. We will not be using any particular CSSinJS libraries. Instead, we will focus on a base knowledge you need later if you use any CSSinJS library.