Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update best-practices.mdx #3180

Merged
merged 1 commit into from
May 2, 2024
Merged

Update best-practices.mdx #3180

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 8 additions & 8 deletions docs/best-practices.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,29 +93,29 @@ Advantages of sharing styles via component reuse include:

The css prop or `styled` should be used for static styles, while the `style` prop (inline styles) should be used for truly dynamic styles. By dynamic styles, we mean styles that change frequently or are unique to a single element.

Imagine you are displaying a list of user avatars in a forum application. Every avatar shares certain static CSS, like `width: 40px` and `border-radius: 50%`, but the avatar image is set via a `background-style` rule whose value is different for each avatar. If you pass all of this CSS through the CSS prop, you'll end up with a lot of nearly-duplicate CSS in the document. With 3 avatars, Emotion will create something like:
Imagine you are displaying a list of user avatars in a forum application. Every avatar shares certain static CSS, like `width: 40px` and `border-radius: 50%`, but the avatar image is set via a `background-image` rule whose value is different for each avatar. If you pass all of this CSS through the CSS prop, you'll end up with a lot of nearly-duplicate CSS in the document. With 3 avatars, Emotion will create something like:

```html
<style>
.css-1udhswa {
border-radius: 50%;
width: 40px;
height: 40px;
background-style: url(https://i.pravatar.cc/150?u=0);
background-image: url(https://i.pravatar.cc/150?u=0);
}

.css-1cpwmbr {
border-radius: 50%;
width: 40px;
height: 40px;
background-style: url(https://i.pravatar.cc/150?u=1);
background-image: url(https://i.pravatar.cc/150?u=1);
}

.css-am987o {
border-radius: 50%;
width: 40px;
height: 40px;
background-style: url(https://i.pravatar.cc/150?u=2);
background-image: url(https://i.pravatar.cc/150?u=2);
}
</style>
```
Expand All @@ -141,19 +141,19 @@ CSS variables can be used with the `style` prop to keep the CSS in a single plac
border-radius: 50%;
width: 40px;
height: 40px;
background-style: var(--background-style);
background-image: var(--background-image);
}
```

Then, for each avatar, you render an element which sets the value of the `--background-style` CSS variable:
Then, for each avatar, you render an element which sets the value of the `--background-image` CSS variable:

```tsx
function Avatar({ imageUrl }) {
return <div className="avatar" style={{ '--background-style': imageUrl }} />
return <div className="avatar" style={{ '--background-image': imageUrl }} />
}
```

If you're using TypeScript, you'll have to use a type assertion like `style={{ ['--background-style' as any]: imageUrl }}` as explained [here](https://stackoverflow.com/a/52013197/752601).
If you're using TypeScript, you'll have to use a type assertion like `style={{ ['--background-image' as any]: imageUrl }}` as explained [here](https://stackoverflow.com/a/52013197/752601).

### If using React, prefer `@emotion/react` or `@emotion/styled` over `@emotion/css`

Expand Down