styled-components.md

Best / our practise on writing styled components

📖 Documentation

• styled-components
• polished

👮🏻 Conventions

Know your components. Look at existing components before you create a brand new one. It is really fun to create new components but please ask yourself or the designer if we already have a component that might do the job first! Maybe you can create a variant of an existing component or just use it out of the box? It is important to evaluate the complexity of creating a variant. Sometimes it is smarter to create a new component. Discuss with your teammates!

DRY - Don't repeat yourself - Use inheritance to share style between similar components.

👍 Do

const Button = styled.button`
  color: papayawhip;
`;
const ProgressButton = styled(Button)`
  background: white;
`;

👎 Don’t

const Button = styled.button`
  color: papayawhip;
`;

 /* Repeating property that already exist in similar component 👆 */
const ProgressButton = styled.button`
  color: papayawhip;
  background: white;
`;

Export the component as a styled component. This way we can specify context / layout specific properties in a parent component (Article, Page, Screen, View, Route etc.).

👍 Do

/* Button.jsx */
export const Button = styled.button`
  color: papayawhip;
`;

/* Article.jsx */
import { Button } from 'Button';

export const Article = styled.article`
  ${Button} {
    margin-bottom: 20px;
  }
`;

👎 Don’t

/* Button.jsx */
export const Button = props => <button {...props} />;

/* Article.jsx */
import { Button } from 'Button';

const ArticleButton = styled(Button)``;
export const Article = styled.article`
  ${ArticleButton} {
    margin-bottom: 20px;
  }
`;

/* Article.jsx */
import { Button } from 'Button';

const ArticleButton = styled(Button)`
  margin-bottom: 20px;
`;
export const Article = styled.article``;

Naming the component descriptive and simple. You do not need to suffix with "Styled".

👍 Do

const Button = styled.button``;

👎 Don’t

const ButtonStyled = styled.button``;

Naming the file the same way you name the component. This way it is easy to find it 🕵️‍

👍 Do

/* Button.jsx */ 👈
export const Button = styled.button``;

👎 Don’t

/* ButtonStyled.jsx */ 👈
export const Button = styled.button``;

/* Button.styled.jsx */ 👈
export const Button = styled.button``;

Self contained and isolated

• ⚠️ Properties that should be avoided on block level
  • float, position, width, height, margin, z-index
  • position: relative; is an exception because the value do not effect layout outside the block
• 🛑 Don´t specify margin top because it might cause margins to collapse.
• Remember to use box-sizing: border-box if you specify padding in your block unless this is defined in your global style.