CSS-in-JS
{{Context|date=July 2019}}
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 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{{Cite web|url=https://emotion.sh/docs/introduction|title=Emotion - Introduction|website=emotion.sh|access-date=2019-07-03}}
- Styled Components{{Cite web|url=https://www.styled-components.com/|title=styled-components|last=styled-components|website=styled-components|language=en|access-date=2019-07-03}}
- JSS{{Cite web|url=http://cssinjs.org/|title=JSS|website=cssinjs.org|language=en|access-date=2019-07-03}}
- 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:
import styled from 'styled-components';
// Create a component that renders a
element with blue text
const BlueText = styled.p`
color: blue;
`;
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.