diff --git a/src-docs/src/views/theme/_json/eui_theme_dark.json b/src-docs/src/views/theme/_json/eui_theme_dark.json
index 73103d9f2b1..2c89f3c5ce6 100644
--- a/src-docs/src/views/theme/_json/eui_theme_dark.json
+++ b/src-docs/src/views/theme/_json/eui_theme_dark.json
@@ -6,24 +6,6 @@
     "l": "24px",
     "xl": "32px"
   },
-  "avatarSizing": {
-    "s": {
-      "size": "24px",
-      "font-size": "12px"
-    },
-    "m": {
-      "size": "32px",
-      "font-size": "14.4px"
-    },
-    "l": {
-      "size": "40px",
-      "font-size": "19.200000000000003px"
-    },
-    "xl": {
-      "size": "64px",
-      "font-size": "25.6px"
-    }
-  },
   "euiBadgeGroupGutterTypes": {
     "gutterExtraSmall": "4px",
     "gutterSmall": "8px"
diff --git a/src-docs/src/views/theme/_json/eui_theme_light.json b/src-docs/src/views/theme/_json/eui_theme_light.json
index aceac775505..9378c3a9924 100644
--- a/src-docs/src/views/theme/_json/eui_theme_light.json
+++ b/src-docs/src/views/theme/_json/eui_theme_light.json
@@ -6,24 +6,6 @@
     "l": "24px",
     "xl": "32px"
   },
-  "avatarSizing": {
-    "s": {
-      "size": "24px",
-      "font-size": "12px"
-    },
-    "m": {
-      "size": "32px",
-      "font-size": "14.4px"
-    },
-    "l": {
-      "size": "40px",
-      "font-size": "19.200000000000003px"
-    },
-    "xl": {
-      "size": "64px",
-      "font-size": "25.6px"
-    }
-  },
   "euiBadgeGroupGutterTypes": {
     "gutterExtraSmall": "4px",
     "gutterSmall": "8px"
diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
index 1559166b8fa..912a8c4378a 100644
--- a/src/components/avatar/__snapshots__/avatar.test.tsx.snap
+++ b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
 <div
   aria-label="aria-label"
-  class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2"
+  class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 css-yd7f8d-euiAvatar-m-user"
   data-test-subj="test subject string"
   role="img"
   style="background-color:#ee789d;color:#000000"
@@ -20,7 +20,7 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
 exports[`EuiAvatar is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2"
+  class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 css-yd7f8d-euiAvatar-m-user"
   data-test-subj="test subject string"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
@@ -37,7 +37,7 @@ exports[`EuiAvatar is rendered 1`] = `
 exports[`EuiAvatar props color as null is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   title="name"
 >
@@ -52,7 +52,7 @@ exports[`EuiAvatar props color as null is rendered 1`] = `
 exports[`EuiAvatar props color as plain is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar--plain"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-16zsvx6-euiAvatar-m-user-plain"
   role="img"
   title="name"
 >
@@ -67,7 +67,7 @@ exports[`EuiAvatar props color as plain is rendered 1`] = `
 exports[`EuiAvatar props color as string is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#000;color:#FFFFFF"
   title="name"
@@ -83,7 +83,7 @@ exports[`EuiAvatar props color as string is rendered 1`] = `
 exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -100,7 +100,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
 exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -118,7 +118,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
 exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -136,7 +136,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
 exports[`EuiAvatar props iconType is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -154,7 +154,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
 exports[`EuiAvatar props imageUrl is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000;background-image:url(image url)"
   title="name"
@@ -164,7 +164,7 @@ exports[`EuiAvatar props imageUrl is rendered 1`] = `
 exports[`EuiAvatar props initials is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -180,7 +180,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
 exports[`EuiAvatar props initialsLength is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -195,7 +195,7 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `
 
 exports[`EuiAvatar props isDisabled is rendered 1`] = `
 <div
-  class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled"
+  class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled css-1m6lajy-euiAvatar-m-user-isDisabled"
   role="presentation"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -211,7 +211,7 @@ exports[`EuiAvatar props isDisabled is rendered 1`] = `
 exports[`EuiAvatar props size l is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--l euiAvatar--user"
+  class="euiAvatar euiAvatar--l euiAvatar--user css-d4s9pe-euiAvatar-l-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -227,7 +227,7 @@ exports[`EuiAvatar props size l is rendered 1`] = `
 exports[`EuiAvatar props size m is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -243,7 +243,7 @@ exports[`EuiAvatar props size m is rendered 1`] = `
 exports[`EuiAvatar props size s is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--s euiAvatar--user"
+  class="euiAvatar euiAvatar--s euiAvatar--user css-1e7wq2y-euiAvatar-s-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -259,7 +259,7 @@ exports[`EuiAvatar props size s is rendered 1`] = `
 exports[`EuiAvatar props size xl is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--xl euiAvatar--user"
+  class="euiAvatar euiAvatar--xl euiAvatar--user css-tifdxf-euiAvatar-xl-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -275,7 +275,7 @@ exports[`EuiAvatar props size xl is rendered 1`] = `
 exports[`EuiAvatar props type is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--space"
+  class="euiAvatar euiAvatar--m euiAvatar--space css-1vuomnm-euiAvatar-m-space"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -289,3 +289,48 @@ exports[`EuiAvatar props type is rendered 1`] = `
 `;
 
 exports[`EuiAvatar should throw error if color is not a hex 1`] = `"EuiAvatar needs to pass a valid color. This can either be a three or six character hex value"`;
+
+exports[`EuiAvatar should throw error if color is not a hex: renders with emotion styles 1`] = `
+.css-yd7f8d-euiAvatar-m-user {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-background-size: cover;
+  background-size: cover;
+  text-align: center;
+  vertical-align: middle;
+  overflow-x: hidden;
+  font-weight: 500;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  font-size: calc(16px * 0.9);
+  border-radius: 50%;
+}
+
+<div
+  aria-label="name"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
+  role="img"
+  style="background-color:#e4a6c7;color:#000000"
+  title="name"
+>
+  <span
+    aria-hidden="true"
+  >
+    n
+  </span>
+</div>
+`;
diff --git a/src/components/avatar/_avatar.scss b/src/components/avatar/_avatar.scss
deleted file mode 100644
index 60f5c478a22..00000000000
--- a/src/components/avatar/_avatar.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.euiAvatar {
-  flex-shrink: 0; // Ensures it never scales down below its intended size
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  background-size: cover;
-  text-align: center;
-  vertical-align: middle;
-  overflow-x: hidden;
-  font-weight: $euiFontWeightMedium; // Explicitly state so it doesn't get overridden by inheritance
-}
-
-.euiAvatar--user {
-  @include innerBorder('dark', 50%, .05);
-  border-radius: 50%;
-}
-
-.euiAvatar--space {
-  @include innerBorder('dark', $euiBorderRadius, .05);
-  border-radius: $euiBorderRadius;
-}
-
-.euiAvatar-isDisabled {
-  cursor: not-allowed;
-  filter: grayscale(100%);
-}
-
-.euiAvatar--plain {
-  background-color: $euiColorEmptyShade;
-}
-
-// Modifiers for sizing.
-$avatarSizing: (
-  s: (
-    size: $euiSizeL,
-    font-size: $euiSizeM
-  ),
-  m: (
-    size: $euiSizeXL,
-    font-size: $euiSize*.9
-  ),
-  l: (
-    size: $euiSizeXXL,
-    font-size: $euiSizeL*.8
-  ),
-  xl: (
-    size: ($euiSize * 4),
-    font-size: $euiSizeXL*.8
-  ),
-);
-
-@each $size, $map in $avatarSizing {
-  .euiAvatar--#{$size} {
-    @include size(map-get($map, 'size'));
-    line-height: map-get($map, 'size');
-    font-size: map-get($map, 'font-size');
-  }
-}
diff --git a/src/components/avatar/_index.scss b/src/components/avatar/_index.scss
deleted file mode 100644
index 50653a82668..00000000000
--- a/src/components/avatar/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'avatar';
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
new file mode 100644
index 00000000000..e10f591400e
--- /dev/null
+++ b/src/components/avatar/avatar.styles.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+const _avatarSize = ({
+  size,
+  fontSize,
+}: {
+  size: string;
+  fontSize: string;
+}) => {
+  return `
+    width: ${size};
+    height: ${size};
+    line-height: ${size};
+    font-size: ${fontSize};
+  `;
+};
+
+export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
+  // Base
+  euiAvatar: css`
+    // Ensures it never scales down below its intended size
+    flex-shrink: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-size: cover;
+    text-align: center;
+    vertical-align: middle;
+    overflow-x: hidden;
+    // Explicitly state weight so it doesn't get overridden by inheritance
+    font-weight: ${euiTheme.font.weight.medium};
+  `,
+  // Variants
+  plain: css`
+    background-color: ${euiTheme.colors.emptyShade};
+  `,
+  user: css`
+    border-radius: 50%;
+  `,
+  space: css`
+    border-radius: ${euiTheme.border.radius.medium};
+  `,
+  // States
+  isDisabled: css`
+    cursor: not-allowed;
+    filter: grayscale(100%);
+  `,
+  // Sizes
+  s: css(
+    _avatarSize({
+      size: euiTheme.size.l,
+      fontSize: euiTheme.size.m,
+    })
+  ),
+  m: css(
+    _avatarSize({
+      size: euiTheme.size.xl,
+      fontSize: `calc(${euiTheme.size.base} * 0.9)`,
+    })
+  ),
+  l: css(
+    _avatarSize({
+      size: euiTheme.size.xxl,
+      fontSize: `calc(${euiTheme.size.l} * 0.8)`,
+    })
+  ),
+  xl: css(
+    _avatarSize({
+      size: `calc(${euiTheme.size.base} * 4)`,
+      fontSize: `calc(${euiTheme.size.xl} * 0.8)`,
+    })
+  ),
+});
diff --git a/src/components/avatar/avatar.test.tsx b/src/components/avatar/avatar.test.tsx
index c4297d814ce..d9f95138631 100644
--- a/src/components/avatar/avatar.test.tsx
+++ b/src/components/avatar/avatar.test.tsx
@@ -9,10 +9,13 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { renderWithStyles } from '../../test/internal';
 
 import { EuiAvatar, SIZES } from './avatar';
 
 describe('EuiAvatar', () => {
+  renderWithStyles(<EuiAvatar name="name" />);
+
   test('is rendered', () => {
     const component = render(<EuiAvatar name="name" {...requiredProps} />);
 
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index e526f626759..87592a14f8b 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -11,9 +11,15 @@ import { CommonProps, ExclusiveUnion, keysOf } from '../common';
 import classNames from 'classnames';
 
 import { isColorDark, hexToRgb, isValidHex } from '../../services/color';
-import { euiPaletteColorBlindBehindText, toInitials } from '../../services';
+import {
+  euiPaletteColorBlindBehindText,
+  toInitials,
+  useEuiTheme,
+} from '../../services';
 import { IconType, EuiIcon, IconSize, IconColor } from '../icon';
 
+import { euiAvatarStyles } from './avatar.styles';
+
 const sizeToClassNameMap = {
   s: 'euiAvatar--s',
   m: 'euiAvatar--m',
@@ -118,25 +124,37 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
   style,
   ...rest
 }) => {
+  const euiTheme = useEuiTheme();
+  const styles = euiAvatarStyles(euiTheme);
+
   const visColors = euiPaletteColorBlindBehindText();
 
+  const isPlain = color === 'plain';
+
   const classes = classNames(
     'euiAvatar',
     sizeToClassNameMap[size],
     typeToClassNameMap[type],
     {
       'euiAvatar-isDisabled': isDisabled,
-      'euiAvatar--plain': color === 'plain',
     },
     className
   );
 
+  const cssStyles = [
+    styles.euiAvatar,
+    styles[size],
+    styles[type],
+    isPlain && styles.plain,
+    isDisabled && styles.isDisabled,
+  ];
+
   checkValidInitials(initials);
 
   const avatarStyle: CSSProperties = style || {};
   let iconCustomColor = iconColor;
 
-  const isNamedColor = color === 'plain' || color === null;
+  const isNamedColor = isPlain || color === null;
   if (!isNamedColor) {
     checkValidColor(color);
 
@@ -177,6 +195,7 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
 
   return (
     <div
+      css={cssStyles}
       className={classes}
       style={avatarStyle}
       aria-label={isDisabled ? undefined : name}
diff --git a/src/components/comment_list/__snapshots__/comment.test.tsx.snap b/src/components/comment_list/__snapshots__/comment.test.tsx.snap
index 597c015844e..f1381b83472 100644
--- a/src/components/comment_list/__snapshots__/comment.test.tsx.snap
+++ b/src/components/comment_list/__snapshots__/comment.test.tsx.snap
@@ -103,7 +103,7 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
       >
         <div
           aria-label="Mario"
-          class="euiAvatar euiAvatar--l euiAvatar--user"
+          class="euiAvatar euiAvatar--l euiAvatar--user css-d4s9pe-euiAvatar-l-user"
           role="img"
           style="background-color:#f1d86f;color:#000000"
           title="Mario"
diff --git a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
index 2fbd66a7bbc..1831c637217 100644
--- a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
+++ b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`EuiCommentTimeline props timelineIcon is rendered 1`] = `
     >
       <div
         aria-label="Mario"
-        class="euiAvatar euiAvatar--l euiAvatar--user"
+        class="euiAvatar euiAvatar--l euiAvatar--user css-d4s9pe-euiAvatar-l-user"
         role="img"
         style="background-color:#f1d86f;color:#000000"
         title="Mario"
diff --git a/src/components/index.scss b/src/components/index.scss
index a42e85b124e..5e9817ddd34 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -3,7 +3,6 @@
 @import 'accessibility/index';
 @import 'accordion/index';
 @import 'aspect_ratio/index';
-@import 'avatar/index';
 @import 'badge/index';
 @import 'basic_table/index';
 @import 'beacon/index';
diff --git a/src/themes/amsterdam/overrides/_avatar.scss b/src/themes/amsterdam/overrides/_avatar.scss
deleted file mode 100644
index 61d2b53a71d..00000000000
--- a/src/themes/amsterdam/overrides/_avatar.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.euiAvatar--space,
-.euiAvatar--user {
-  // Remove faux outline
-  &:after {
-    display: none;
-  }
-}
diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
index 8a47eb0736f..4381b3a6d15 100644
--- a/src/themes/amsterdam/overrides/_index.scss
+++ b/src/themes/amsterdam/overrides/_index.scss
@@ -1,4 +1,3 @@
-@import 'avatar';
 @import 'breadcrumbs';
 @import 'button';
 @import 'button_empty';
diff --git a/upcoming_changelogs/5670.md b/upcoming_changelogs/5670.md
new file mode 100644
index 00000000000..5e50033267c
--- /dev/null
+++ b/upcoming_changelogs/5670.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiAvatar` to CSS-in-JS styling
\ No newline at end of file
diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md
index e1440dd2a37..8770fc4e339 100644
--- a/wiki/writing-styles-with-emotion.md
+++ b/wiki/writing-styles-with-emotion.md
@@ -25,14 +25,64 @@ import { euiComponentNameStyles } from './{component name}.styles.ts';
 
 export const EuiComponent = () => {
   const theme = useEuiTheme();
-  const styles = euiComponentStyles(theme);
+  const componentStyles = euiComponentStyles(theme);
+  const styles = [componentStyles]
 
   return (
-    <div css={[styles]} />
+    <div css={styles} />
   );
 };
 ```
 
+## Style helpers
+
+EUI components often have style variants that use a similar patterns. In these cases, consider creating a helper function to create repetitive styles.
+
+```ts
+const _componentSize = ({
+  size,
+  fontSize,
+}: {
+  size: string;
+  fontSize: string;
+}) => {
+  return `
+    width: ${size};
+    height: ${size};
+    line-height: ${size};
+    font-size: ${fontSize};
+  `;
+};
+```
+
+The helper function can then be used in the exported style block:
+
+```ts
+export const euiComponentStyles = ({ euiTheme }: UseEuiTheme) => ({
+  // Sizes
+  s: css(
+    _componentSize({
+      size: euiTheme.size.l,
+      fontSize: euiTheme.size.m,
+    })
+  ),
+  m: css(
+    _componentSize({
+      size: euiTheme.size.xl,
+      fontSize: `calc(${euiTheme.size.base} * 0.9)`,
+    })
+  ),
+  l: css(
+    _componentSize({
+      size: euiTheme.size.xxl,
+      fontSize: `calc(${euiTheme.size.l} * 0.8)`,
+    })
+  ),
+});
+```
+
+Note that the helper function returns a string literal instead of a `css` method from `@emotion/react`. This reduces the serialization work at runtime and makes the helper more flexible (e.g., could be used with a `style` attribute). Also note that the `css` method from `@emotion/react` can be [called as a normal function](https://emotion.sh/docs/@emotion/css#css) instead of as a template literal.
+
 ## Conditional styles
 
 Styles can be added conditionally based on environment variables, such as the active theme, using nested string template literals.
@@ -57,5 +107,8 @@ _Work in progress_
 * Use an array inside of the `css` prop for optimal style composition and class name generation. This is relevant even if only a single style object is passed.
 
 ```tsx
-<EuiComponent css={[styles.default, styles.stateful]} />
+const styles = [componentStyles.default, componentStyles.stateful];
+return (
+  <EuiComponent css={styles} />
+);
 ```