CSS in JS

CSS in JS Libs

• Styled Components

• CSS Modules

• Emotion

• Styled JSX

• JSS

• Radium

CSS Problems

The main problems when you use CSS are the following ones:

1. Global scope. All rules in CSS are in the same scope, so that you can overwrite rules when you use different style sheets.

2. Cascading rules. The source order really matters when you have a global scope.

3. Inheritance. The rules can inheritance between their and you can expect a different behavior due to this characteristic.

4. Selector specificity. One of the biggest problems when creating style sheets comes from the fact that the operation of selectors is not known in depth.

5. Toolchain & Features (We needed variables, nesting, the ability of breaking down out styles into smaller files, calculations and dynamism)

6. Classnames are redundant. They are an extra link between external stylesheets and result in the parent components dictating through numerous classnames, how the child should look & feel. Extra cognitive load for thinking of the proper classnames for BEM.

Disadvantages of Pure CSS in JS

To list down more disadvantages of inline styling:

• Code duplication in case of SSR.

• Additional costs in JS payload. Remember that styles which are embedded in JS are not for free. It is not only about download time, it is also about parsing and compiling.

• No media queries (@media)

• No CSS animations (@keyframes)

• No pseudo-classes (:hover)

• No web fonts (@font)

• No autoprefixer (well there is inline-style-prefixer)

Styled Components pros and cons

Styled-components work the following way. A template string is passed to the library containing the CSS styles. From these styles, a unique hash for a class name is created, and applied to a style tag in the head tags of your application. This constructed class name is automatically applied to your component!

Pros:

• Popularity (big community)

• Developer Experience (no classes used, a developer can use TypeScript for autocompleting)

• Theming (easy theming out of the box)

• Performance (one of the most performed CSS in JS library, constantly improves performance from version to version)

• Less css (styled-components are rendered only if the component is on screen)

• Dead Code Elimination (gives you confidence that by removing this particular component, you’re removing style code applicable to this component only)

• True encapsulation of styles at the component level

• semantic elements (CSS in JS gives us truly unlimited semantic elements that are semantically clear)

Cons:

• Caching (class names are generated dynamically, which can cause issues with caching between builds or renders)

• learning curve (learn how to use styled-components correct way)

• separation of concerns (JS and CSS are in the same file)

• additional dependency (increase JS bundle size)

• doesn't work without JS