What is CSS-in-JS
The tradiction way to use CSS in SPA is using global CSS files. But there are some drawbacks in this approach:
- Headache in inventing class names.
- Hard to maintian: Changing one CSS may affect many HTML.
- Zombies CSS code.
If you write CSS in JavaScript, you can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If you delete a component, you delete its CSS too. No more append-only stylesheets!
Some Avandtage of CSS-in-JS:
- Styles/Component co-location: As components include all the source code, styles, and logic they need for proper running, you can securely move them around.
- Local Scoping: By default, CSS doesn’t allow local scoping. Each style rule has a global scope, so it applies to the entire project.
- Reusability: Components are reusable, so you only have to write them once, then you can run them everywhere.
- Dynamic Functionality: As CSS-in-JS is essentially JavaScript code, you can apply complex logic to your style rules, such as loops, conditionals, variables, state-based styling, and more.
- Provide State-based styling: CSS-in-JS gives developers API to describe state-based styles in a better way than using a bunch of conditional class names.
- Constrain Selector: CSS-in-JS helps to constrain that power by scoping its selectors. Providing more expressiveness while encouraging more maintainable patterns than cascading.
- Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
- Automatic vendor prefixing: Most library provide this.
- Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. Write CSS in JS, every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
- Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
- No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
Some popular CSS-in-JS library:
- styled-components
- Emotion
- JSS
- APHRODITE
- RADIUM
- STYLETRON
- STYLED-JSX
styled-components
styled-components is the result of wondering how we could enhance CSS for styling React component systems.
It removes the mapping between components and styles. This means that when you’re defining your styles, you’re actually creating a normal React component, that has your styles attached to it.
Usage
Install: npm install styled-component Once you’ve added styled-components you will have access to the global window.styled variable.
It utilises tagged template literals to style your components. Example:
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: #e22`
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);
Emotion
Install it for React
npm i @emotion/styled @emotion/react
Example
import styled from '@emotion/styled'
const Button = styled.button`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
color: black;
font-weight: bold;
&:hover {
color: white;
}
`
render(<Button>This my button component.</Button>)
My Conclusion
- Every component own it’s style. the CSS code will be very big.
- How to share style between different components?
- How use preproccessor, like Sass, to manage style.