Coding Guidelines

Please ensure you are familiar with these guidelines when developing in this repository.

---

Table of contents

• Styled Components Guidelines

---

Styled Components Guidelines

Styles are not (usually) shared

For the most part, styled components should be considered **owned by a single component**. The whole point of using styled-components is to encapsulate the css, avoiding the nightmare that occurs when trying to modify css that is shared across the app. These styled components contain a lot of css. We separate out these styled components to make the other component files easier to read.

Therefore, most of the time styled components should be placed into a file named xxx.styles.ts, where xxx.tsx is the component consuming the styled components.

What this means:

• You should not export xxx.styles.ts in index.ts files.
• Styled components should be named basically. Use basic terms like HeaderContainer or NameLabel. Name these much like you would name css classNames. Their usage is isolated, so there is no need to worry about name clashes with other styled components in other *.style.ts files.
• A component should not import styled-components that it does not owned. E.g. foo.tsx should not import items from bar.styles.ts.
• If two components need a styled component that is styled the same, just copy the styled component. It is okay to have duplicate css.
• If you find there is a legitimate styled component that is reusable across the application, consider putting it in common/styles.ts.
  • Note: Please do not make common/styles.ts a dumping ground for components that aren’t actually reused much.

Use transient props for style options

Styled components can have props, which must be filtered to prevent those props from becoming attributes on the DOM element.

You should prefix all props with $ to ensure they are auto-filtered.

export interface FooProps {
  $good: number; // Prefix property with $ to make it transient
  bad: number;   // No prefix, which means this will end up as an attribute
}

export const Foo = styled.div<FooProps>`
  width: ${props => props.$good};
  height: ${props => props.bad};
`;

// This:
<Foo $good={42} bad={66}>Testing</Foo>

// Produces this:
<div class="xyz" bad="66">Testing</div>