JSS generates actual CSS, not Inline Styles. It supports every existing CSS feature. CSS rules are created once and reused across the elements using its class name in contrary to Inline Styles. Also, when DOM elements get updated, previously created CSS rules are applied.
JSS generates unique class names by default. It allows avoiding the typical CSS problem, where everything is global by default. It completely removes the need for naming conventions.
Ease of removal and modification.
Explicit usage of CSS rules allows you to track them down to the consumer and decide if it can be safely removed or modified.
To optimize time to first paint, you can use server-side rendering and extract critical CSS. You can couple the rendering of CSS with the rendering of HTML so that no unused CSS gets generated. It will result in a minimal critical CSS extracted during server-side rendering and allow you to inline it.
JSS core implements a plugin-based architecture. It allows you to create custom plugins which can implement custom syntax or other powerful abilities. JSS has many official plugins, which can be installed individually or using a default preset. A good example of a community plugin is jss-rtl.
Thanks to various plugins, JSS allows you to have nesting, global selectors, composition with existing global class names. E.g.
jss-plugin-expandallows you to express properties like
box-shadoweven in a more readable way than it is possible with CSS. You can also use template strings if you want to copy-paste styles directly from the browser dev tools.
Another useful plugin example is
jss-plugin-isolate, which allows you to isolate your elements from global cascading rules fully and potentially overwriting unwanted properties. Especially useful when creating a widget that is supposed to render inside of a third-party document.
The React-JSS package provides some additional features:
- Dynamic Theming - allows context based theme propagation and runtime updates.
- Critical CSS extraction - only CSS from rendered components gets extracted.
- Lazy evaluation - Style Sheets get created when a component gets mounted.
- The static part of a Style Sheet gets shared between all elements.
- Function values and rules are updated automatically with props as an argument.