CSS-in-JS

CSS-in-JS is a styling technique by which 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 enables the abstraction of 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

• Emotion^[1]
• Styled Components^[2]
• JSS^[3]
• Tailwind CSS

These libraries allow the creation of styled components using tagged template literals. For example, using styled components in a React project would look like the following:

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

Some outcomes that may be achieved through CSS-in-JS can not be obtained using traditional CSS techniques. It is possible to make the styles dynamic in line with just a few conditional statements. Programmers may also write more modular code, with CSS being encapsulated in the same block as the programmer's JavaScript, scoping it to that module only.

CSS-in-JS is used by Reddit, Patreon, Target, Atlassian, Vogue, GitHub and Coinbase.^[4]

• Cascading Style Sheets
• JavaScript
• Web design
• World Wide Web Consortium standards

• Wikipedia articles needing context from July 2019
• All Wikipedia articles needing context
• All pages needing cleanup