CSS-in-JS

CSS-in-JS is a styling technique where JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a <style> element) and attached into the DOM. It allows to abstract CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way. There are multiple implementations of this concept in the form of libraries such as

These libraries allow to create styled components using tagged template literals. For example, using styled components in a React (JavaScript library) project would look like the following:

import styled from 'styled-components';
// Create a component that renders a <p> element with blue text
const BlueText = styled.p`
  color: blue;
`;

<BlueText>My blue text</BlueText>

CSS-in-JS is capable of other things which were not possible using traditional CSS techniques. It is possible to make the styles dynamic in line with just a few conditional statements. It also allows users to write more modular code with your CSS being encapsulated in the same block as user's javascript, scoping it to that module only.

Industry use

Thousands of companies use CSS-in-JS in production, including Reddit, Patreon, Target, Atlassian, Vogue, GitHub, Coinbase, and many more.

Benefits
  • Thinking in components. It is not necessary for users to have to maintain a bunch of stylesheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).
  • CSS-in-JS leverages the full power of the JavaScript ecosystem to enhance CSS.
  • True rules isolation. Scoped selectors are not enough. CSS has properties that are inherited automatically from the parent element, if not explicitly defined
  • Scoped selectors. CSS has just one global namespace. It is impossible to avoid selector collisions in non-trivial applications. CSS in JavaScript generates unique class names by default when it compiles to CSS.
  • Vendor prefixing. The CSS rules are automatically vendor-prefixed, so users don’t have to think about it.
  • Code sharing. Easily share constants and functions between JavaScript and CSS.
  • Only the styles which are currently in use on user's screens are in the DOM.
  • Dead code elimination.

References
  1. "Emotion - Introduction". emotion.sh. Retrieved 2019-07-03.
  2. styled-components. "styled-components". styled-components. Retrieved 2019-07-03.
  3. "JSS". cssinjs.org. Retrieved 2019-07-03.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.