# CSS-in-JS

> Mediated Wiki article. Canonical URL: https://mediated.wiki/source/CSS-in-JS
> Markdown URL: https://mediated.wiki/source/CSS-in-JS.md
> Source: https://en.wikipedia.org/wiki/CSS-in-JS
> Source revision: 1337368890
> License: Creative Commons Attribution-ShareAlike 4.0 International (https://creativecommons.org/licenses/by-sa/4.0/)

Styling components in JavaScript

This article provides insufficient context for those unfamiliar with the subject. Please help improve the article by providing more context for the reader. (July 2019) (Learn how and when to remove this message)

**CSS-in-JS** is a styling technique by which [JavaScript](/source/JavaScript) is used to style components. When this JavaScript is parsed, [CSS](/source/Cascading_Style_Sheets) is generated (usually as a <style> element) and attached into the [DOM](/source/Document_Object_Model). 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]

These libraries allow the creation of styled components using tagged template literals. For example, using styled components in a [React](/source/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>

Some outcomes that may be achieved through CSS-in-JS can not be obtained using traditional [CSS](/source/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.

## Industry use

CSS-in-JS is used by [Reddit](/source/Reddit), [Patreon](/source/Patreon), [Target](/source/Target_Corporation), [Atlassian](/source/Atlassian), [Vogue](/source/Vogue_(magazine)), [GitHub](/source/GitHub) and [Coinbase](/source/Coinbase).[4]

## References

1. **[^](#cite_ref-1)** ["Emotion - Introduction"](https://emotion.sh/docs/introduction). *emotion.sh*. Retrieved 2019-07-03.

1. **[^](#cite_ref-2)** styled-components. ["styled-components"](https://www.styled-components.com/). *styled-components*. Retrieved 2019-07-03.

1. **[^](#cite_ref-3)** ["JSS"](http://cssinjs.org/). *cssinjs.org*. Retrieved 2019-07-03.

1. **[^](#cite_ref-4)** ["A Detailed Explanation of CSS-in-JS"](https://www.alibabacloud.com/blog/a-detailed-explanation-of-css-in-js_598842). *Alibaba Cloud Community*. Retrieved 2023-07-05.

v t e JavaScript Code analysis ESLint JSHint JSLint Subsets,* supersets JS++ Source* TypeScript (ArkTS) Transpilers AtScript Babel ClojureScript CoffeeScript Dart Elm Emscripten Google Closure Compiler Google Web Toolkit Haxe LiveScript Morfik Nim Opa PureScript ReScript WebSharper Concepts JavaScript library JavaScript syntax Debuggers Chrome DevTools Firefox Inspector (formerly Firebug) Komodo IDE Safari Web Inspector Documentation generators JSDoc Editors (comparison) Ace Cloud9 IDE Atom CodeMirror Brackets Light Table PhpStorm Orion Visual Studio Visual Studio Express Visual Studio Code Visual Studio Team Services Vim Engines List of JavaScript engines Frameworks Comparison of JavaScript frameworks List of JavaScript libraries Related technologies Ajax AssemblyScript asm.js CSS DOM HTML HTML5 JSON WebAssembly WebAuthn Package managers npm pnpm yarn Bun Module bundlers Bun esbuild Vite Webpack Server-side Active Server Pages Bun CommonJS Deno JSGI Node.js Unit testing frameworks (list) Jasmine Mocha QUnit People Douglas Crockford Ryan Dahl Brendan Eich John Resig Jesse James Garrett Outline Index Wikibook

---
Adapted from the Wikipedia article [CSS-in-JS](https://en.wikipedia.org/wiki/CSS-in-JS) by Wikipedia contributors ([contributor history](https://en.wikipedia.org/wiki/CSS-in-JS?action=history)). Available under [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/). Changes may have been made.