Proper CSS loading in Lightning components in Salesforce involves specific security-compliant methods, and there are important differences between loading approaches:
**Proper CSS Loading Methods:**
1. **Using Static Resources**: Include CSS files in static resources instead of loading them from third-party sources. This ensures compliance with security policies.
2. **Referencing CSS Securely**: Use the `<ltng:require>` tag in the component's markup to reference the CSS. For example:
```html
<aura:component>
<ltng:require styles="{{!$Resource.SLDSv1 + '/assets/styles/lightning-design-system-ltng.css'}}" />
</aura:component>
```
3. **Avoiding Direct External Links**: Do not use the `<link>` tag to load external CSS resources directly. Instead, save third-party CSS files in static resources and include them in your solution package.
**Key Differences Between Loading Methods:**
**`<link>` Tags:**
- **Security Risk**: Directly reference external resources, which violates Salesforce security policies and can introduce vulnerabilities
- **Compliance**: Not acceptable for security review
- **Risk Factors**: Can expose application to external dependencies and security threats
**`<ltng:require>`:**
- **Secure and Recommended**: This is the preferred method for Aura components
- **Compliance**: Securely references styles uploaded as static resources within Salesforce
- **Benefits**: Ensures the styles are version-controlled, sandboxed, and compliant with Salesforce's security standards
- **Isolation**: Maintains proper namespace isolation
**Security Benefits:**
This approach ensures your solution is secure, version-controlled, and adheres to Salesforce's security review requirements. Using `<ltng:require>` is the recommended and secure approach that prevents vulnerabilities associated with external CSS loading.