JSS - Author CSS Using JavaScript as a Host Language - Interview with Oleg Slobodskoi

JSS - Author CSS Using JavaScript as a Host Language - Interview with Oleg Slobodskoi

If there's one thing that divides web developers, it's styling. A part of this has to do with the different requirements of websites and web applications

Can you tell a bit about yourself?

Working on web UIs for over a decade, I have realized there are two significant challenges in frontend engineering: understanding the state and styling its representation. Unidirectional data flow has made managing state much easier, but styling components is still painful.

To improve the situation, I started JSS back in 2014 and haven't stopped learning and developing the project since. Currently, I am working at Chatgrape where we are building a sophisticated client using NLP and deep services integration. All CSS is managed using JSS. Also, I try to talk at conferences from time to time, even if I know I suck at this haha.

How would you describe JSS to someone who has never heard of it?

In general, "CSS in JS" libraries are authoring tools which allow you to generate CSS. The paradigm is similar to Sass, Less or Stylus in this regard, the difference being that the host language JavaScript is well-standardized.

JSS is a set of libraries for writing CSS in JavaScript. They address a wide spectrum of issues. The most significant features are class names scoping, critical CSS extraction, significantly improved maintenance, code reuse and sharing, theming, co-location and state-driven styles.

It is important to understand though that not every product has all of the issues that these features address, so not every developer can relate to them or even confirm that they are real. If you don't get it - don't worry, the time for you just hasn't come yet.

One general truth you could take away from this is that JSS is a more powerful abstraction over CSS, which is good and bad at the same time. Less powerful abstractions may be of benefit for less experienced developers because less can be done incorrectly, but they certainly have limitations.

How does JSS work?

The essential libraries in JSS are core, React-JSS, and Styled-JSS. Low level and library-agnostic, the core is responsible for compilation and rendering of a stylesheet.

The core is used by both React-JSS and Styled-JSS internally. React-JSS is a higher-order component providing an interface for React. Styled-JSS is an alternative interface for React which implements the styled primitives factory.

Styled primitive or styled component is a component which has initial styles applied when created. There is no need to provide class names when you use it. It has been very actively promoted by the Styled Components library and is worth looking into as an alternative to other interfaces. Our implementation, in fact, combines both styled primitives and a classes map in one solid interface.

The general process goes like this:

  1. Declaration: Styles are described by the user in JavaScript. By default we use JSON Syntax.
  2. Processing: Styles are processed by JSS plugins. Plugins do vendor prefixing, implement syntactic sugar for user styles and can be made to do any other transformations, similar to PostCSS.
  3. Injection: Once you call the .attach method, styles are compiled to a CSS string and injected into the DOM using a style element.

jss css

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This CSS Cut Out Effect is Guaranteed to Blow Your Mind. This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

CSS Animation: translate3d, backdrop-filter, and Custom Tags

Learn how to create a smooth animation using the CSS transform translate3d prop, as well as why we use cubic-bezier transition timing function and its benefits.