diff --git a/packages/eslint-plugin/changelogs/upcoming/8722.md b/packages/eslint-plugin/changelogs/upcoming/8722.md
new file mode 100644
index 00000000000..8e373823df1
--- /dev/null
+++ b/packages/eslint-plugin/changelogs/upcoming/8722.md
@@ -0,0 +1,5 @@
+- Changed the `prefer-css-prop-for-static-styles` rule message (formerly `prefer-css-attribute-for-eui-components`) 
+
+**Breaking changes**
+
+- Renamed the rule from `prefer-css-attribute-for-eui-components` to `prefer-css-prop-for-static-styles` to align with Emotion's best practice guidelines
diff --git a/packages/eslint-plugin/src/index.ts b/packages/eslint-plugin/src/index.ts
index df7a6a3cad1..1b2121c41c6 100644
--- a/packages/eslint-plugin/src/index.ts
+++ b/packages/eslint-plugin/src/index.ts
@@ -20,15 +20,14 @@
 import { HrefOnClick } from './rules/href_or_on_click';
 import { NoRestrictedEuiImports } from './rules/no_restricted_eui_imports';
 import { NoCssColor } from './rules/no_css_color';
-import { PreferCSSAttributeForEuiComponents } from './rules/prefer_css_attribute_for_eui_components';
+import { PreferCSSPropForStaticStyles } from './rules/prefer_css_prop_for_static_styles';
 
 const config = {
   rules: {
     'href-or-on-click': HrefOnClick,
     'no-restricted-eui-imports': NoRestrictedEuiImports,
     'no-css-color': NoCssColor,
-    'prefer-css-attributes-for-eui-components':
-      PreferCSSAttributeForEuiComponents,
+    'prefer-css-prop-for-static-styles': PreferCSSPropForStaticStyles,
   },
   configs: {
     recommended: {
@@ -37,7 +36,7 @@ const config = {
         '@elastic/eui/href-or-on-click': 'warn',
         '@elastic/eui/no-restricted-eui-imports': 'warn',
         '@elastic/eui/no-css-color': 'warn',
-        '@elastic/eui/prefer-css-attributes-for-eui-components': 'warn',
+        '@elastic/eui/prefer-css-prop-for-static-styles': 'warn',
       },
     },
   },
diff --git a/packages/eslint-plugin/src/rules/prefer_css_attribute_for_eui_components.test.ts b/packages/eslint-plugin/src/rules/prefer_css_prop_for_static_styles.test.ts
similarity index 89%
rename from packages/eslint-plugin/src/rules/prefer_css_attribute_for_eui_components.test.ts
rename to packages/eslint-plugin/src/rules/prefer_css_prop_for_static_styles.test.ts
index 2be3ffb0d38..f2a730e41e1 100644
--- a/packages/eslint-plugin/src/rules/prefer_css_attribute_for_eui_components.test.ts
+++ b/packages/eslint-plugin/src/rules/prefer_css_prop_for_static_styles.test.ts
@@ -20,7 +20,7 @@
 import dedent from 'dedent';
 import { RuleTester } from '@typescript-eslint/rule-tester';
 
-import { PreferCSSAttributeForEuiComponents } from './prefer_css_attribute_for_eui_components';
+import { PreferCSSPropForStaticStyles } from './prefer_css_prop_for_static_styles';
 
 /**
  * For some reason, `languageOptions` is defined in `RuleTesterConfig` but causes an error: "Object literal may only specify known properties".
@@ -37,8 +37,8 @@ const languageOptions = {
 const ruleTester = new RuleTester();
 
 ruleTester.run(
-  'prefer-css-attribute-for-eui-components',
-  PreferCSSAttributeForEuiComponents,
+  'prefer-css-prop-for-static-styles',
+  PreferCSSPropForStaticStyles,
   {
     valid: [
       {
@@ -67,7 +67,7 @@ ruleTester.run(
         languageOptions,
         errors: [
           {
-            messageId: 'preferCSSAttributeForEuiComponents',
+            messageId: 'preferCSSPropForStaticStyles',
           },
         ],
         output: dedent`
diff --git a/packages/eslint-plugin/src/rules/prefer_css_attribute_for_eui_components.ts b/packages/eslint-plugin/src/rules/prefer_css_prop_for_static_styles.ts
similarity index 74%
rename from packages/eslint-plugin/src/rules/prefer_css_attribute_for_eui_components.ts
rename to packages/eslint-plugin/src/rules/prefer_css_prop_for_static_styles.ts
index 302ee0dcbc5..018ca73417b 100644
--- a/packages/eslint-plugin/src/rules/prefer_css_attribute_for_eui_components.ts
+++ b/packages/eslint-plugin/src/rules/prefer_css_prop_for_static_styles.ts
@@ -19,8 +19,8 @@
 
 import { TSESTree, ESLintUtils } from '@typescript-eslint/utils';
 
-export const PreferCSSAttributeForEuiComponents =
-  ESLintUtils.RuleCreator.withoutDocs({
+export const PreferCSSPropForStaticStyles = ESLintUtils.RuleCreator.withoutDocs(
+  {
     create(context) {
       const isNamedEuiComponentRegex = /^Eui[A-Z]*/;
 
@@ -42,7 +42,7 @@ export const PreferCSSAttributeForEuiComponents =
             ) {
               context.report({
                 node: styleAttrNode?.parent,
-                messageId: 'preferCSSAttributeForEuiComponents',
+                messageId: 'preferCSSPropForStaticStyles',
                 fix(fixer) {
                   const cssAttr = node.attributes.find(
                     (attr) =>
@@ -53,10 +53,12 @@ export const PreferCSSAttributeForEuiComponents =
                     return null;
                   }
 
-                  return fixer.replaceTextRange(
-                    styleAttrNode?.name?.range!,
-                    'css'
-                  );
+                  const range = styleAttrNode?.name?.range;
+                  if (!range) {
+                    return null;
+                  }
+
+                  return fixer.replaceTextRange(range, 'css');
                 },
               });
             }
@@ -67,14 +69,16 @@ export const PreferCSSAttributeForEuiComponents =
     meta: {
       type: 'suggestion',
       docs: {
-        description: 'Prefer the JSX css attribute for EUI components',
+        description:
+          'Prefer the `css` prop for static styles in EUI components',
       },
       messages: {
-        preferCSSAttributeForEuiComponents:
-          'Prefer the css attribute for EUI components',
+        preferCSSPropForStaticStyles:
+          'Use the `css` prop instead of `style` for static styles in EUI components to ensure better performance and consistency with EUI’s styling approach. Read more: https://emotion.sh/docs/best-practices#use-the-style-prop-for-dynamic-styles',
       },
       fixable: 'code',
       schema: [],
     },
     defaultOptions: [],
-  });
+  }
+);