Inline Cascading Style Sheets (CSS)
Why is this an issue?
Inline CSS using style attributes or <style> tags creates security and maintenance concerns:
Security risk: Inline styles can be injection vectors for attacks
CSP violations: May conflict with Content Security Policy restrictions
Maintenance difficulty: Styles scattered across components are hard to manage
No reusability: Inline styles cannot be shared across components
Examples
Examples of incorrect code:
<div style="color: red; font-size: 14px;">Warning message</div>
<style>
.warning-message { color: red; }
</style>
<div class="warning-message">Warning message</div>
Example of correct code:
<div class="warning-message">Warning message</div>
With CSS in a separate file:
.warning-message {
color: red;
font-size: 14px;
}
How can I fix violations?
Use CSS classes: Define styles in component CSS files or static resources.
Use SLDS: Leverage Salesforce Lightning Design System classes.
Use CSS custom properties: For dynamic values, use CSS variables with component properties.
When should I disable this rule?
You may dismiss specific violations for:
Dynamically calculated styles that must be set at runtime
Email templates where inline styles are required
Resources