JavaScript Style Sheets A Declarative Description of Styles

JSS also is known as JavaScript Style Sheets is a combination of JS and CSS. It is a tool which uses JS to describe styles declaratively, which makes it conflict-free and more reusable.

When the javascript is parsed, CSS is generated attached to the DOM(usually gives style element i.e.,<style> )

From SASS to CSS-in-JS we resolved many style conflicts due to the CSS selectors, and complicated nesting of CSS selectors. JSS avoids such conflicts by generating unique class names when JS is parsed into CSS   

Features Of JSS:
Real CSS:
JSS creates real CSS, not Inline Styles. It bolsters each current CSS highlight. CSS rules are made once and reused over the components utilizing its class name in opposition to Inline Styles.

Reusable styles:
Utilizing JavaScript as a host language offers us a chance to reuse CSS decides such that is beyond the imagination with ordinary CSS. You can use JavaScript modules, factors, capacities, math activities, and the sky is the limit from there. Whenever done right, it can, in any case, be completely definitive.

Conflict-free CSS:
JSS creates unique class names by default. It permits keeping away from the run of the mill CSS issue, where everything is worldwide as a matter of course. It totally evacuates the requirement for naming shows.

Dynamic CSS:
Utilizing JavaScript capacities and Observables makes it conceivable to progressively create styles in the program, allowing you a chance to get to your application state, program APIs or remote information for styling. You can characterize styles once as well as update them anytime in an effective manner.

Critical CSS:
To upgrade time to initially paint, you can utilize server-side rendering and concentrate basic CSS. You can couple the rendering of CSS with the rendering of HTML so that no unused CSS gets created. It will result in a negligible basic CSS removed amid server-side rendering and enable you to inline it.

Expressive syntax of CSS:
Because of different modules, JSS enables you to have settling, worldwide selectors, an organization with existing worldwide class names. For example, JSS-module extend enables you to express properties like box-shadow even in a more coherent manner than it is conceivable with CSS. You can likewise utilize layout strings on the off chance that you need to duplicate glue styles legitimately from the program dev instruments.

The simplicity of removal and modification:
Express use of CSS rules enables you to follow them down to the purchaser and choose on the off chance that it very well may be securely evacuated or altered.

JavaScript fabricate pipeline:
There is no requirement for extra form pipeline arrangement for CSS. Whatever apparatus you manufacture your JavaScript, it will simply work with JSS.

A comparison of CSS and JSS below

CSS:

    var font = {
  fontSize: 12,
  lineHeight: 1
};

export default {
  button: {
    extend: font,
    border: 'none',
    margin: [5, 10],
    transition: ['background', 'color', 'font-size'],
    transitionDuration: 300,
    background: {
      color: 'white',
      image: 'url("/some/url/image.png")',
      repeat: 'no-repeat',
      position: 'contain'
    },
    '&:before': {
      content: '"icon"'
    }
  },
  redButton: {
    extend: 'button',
    background: 'linear-gradient(to right, red 0%, green 100%)',
    fallbacks: {
      background: 'red'
    },
    '&:hover': {
      border: [
        [1, 'solid', 'blue']
      ],
      boxShadow: [
        [0, 0, 0, 10, 'blue'],
        [0, 0, 0, 15, 'green']
      ],
      '& span': {
        color: 'red'
      }
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      fontSize: 16
    }
  }
};
  

	.button-0-1-7 {
  border: none;
  margin: 5px 10px;
  font-size: 12px;
  transition: background color font-size;
  background: white contain no-repeat;
  line-height: 1;
  background-image: url("/some/url/image.png");
  transition-duration: 300ms;
}
.button-0-1-7:before {
  content: "icon";
}
.redButton-0-1-8 {
  background: red;
  border: none;
  margin: 5px 10px;
  font-size: 12px;
  transition: background color font-size;
  background: linear-gradient(to right, red 0%, green 100%);
  line-height: 1;
  transition-duration: 300ms;
}
.redButton-0-1-8:before {
  content: "icon";
}
.redButton-0-1-8:hover {
  border: 1px solid blue;
  box-shadow: 0 0 0 10px blue, 0 0 0 15px green;
}
.redButton-0-1-8:hover span {
  color: red;
}
@media (min-width: 1024px) {
  .button-0-1-7 {
    font-size: 16px;
  }
}