FAQ-000311 - CSS and UI Security / Inline CSS Security Issues

For dynamic styling in managed packages, Salesforce recommends the following approved alternatives to inline styles: **Primary Alternatives:** 1. **JavaScript for Styling**: Use JavaScript in your custom code to dynamically apply styles, ensuring it adheres to security guidelines. 2. **CSS Custom Properties**: Leverage CSS custom properties in Lightning Web Components (LWC) for dynamic styling. You can define and apply these properties dynamically based on input or conditions. 3. **Static Resources for CSS Files**: Store CSS files in static resources and reference them securely using `<ltng:require>` in Aura components or by importing them in LWC. **Implementation Guidelines:** - **CSS Custom Properties in Lightning Web Components (LWC)**: These allow you to define and apply styles dynamically based on conditions or inputs. - **Static Resources**: Store your CSS in static resources and reference them securely using appropriate tags. - **Secure Reference Methods**: Use `<ltng:require>` in Aura components or proper import methods in LWC. **Security Considerations:** - These methods ensure compliance with Salesforce's security and packaging standards - Maintain proper style isolation and namespace boundaries - Avoid security vulnerabilities associated with inline styles - Follow secure coding practices for dynamic content **Best Practices:** - Use static resources for reusable or external CSS - Implement CSS custom properties for component-specific dynamic styling - Ensure all styling approaches comply with security policies - Maintain proper version control of all CSS resources These approaches ensure compliance with security guidelines while providing the flexibility needed for dynamic styling in managed packages.