What is a Safelist?
A safelist is a list of CSS selectors (classes, IDs, or both) that RapidLoad will ignore when optimizing your site’s CSS. Selectors on the safelist will not be removed during optimization.
What is a Blocklist?
A blocklist is a list of CSS selectors (classes, IDs, or both) that RapidLoad will forcibly remove when optimizing your site’s CSS. Selectors on the blocklist will be removed during optimization.
Understanding Safelist Types
CSS selectors are often chained together and applied with varying degrees of specificity. To give you greater control over how RapidLoad optimizes your site’s files, we’ve added three types of safelist designations: single, deep, and greedy.
Note:- When adding a safelist you don't add symbols of class or ID(. or #)
Single
Selectors that are safelisted with the Single designation will only be safe from removal if they are the only selector being applied to a given element.
Example Single safelist entry: my-class*
| Selector | Final result |
.my-class-1 |
Safe |
.my-class-1 #my-id |
Removed |
.my-class-2 |
Safe |
.first-class .my-class-1 #my-id |
Removed |
Deep
Selectors that are safelisted with the Deep designation will be safe from removal if they are the first or the only selector being applied to a given element.
Example Deep safelist entry: my-class*
| Selector | Final result |
.my-class-1 |
Safe |
.my-class-1 #my-id |
Safe |
.my-class-2 |
Safe |
.first-class .my-class-1 #my-id |
Removed |
Greedy
Selectors that are safelisted with the Greedy designation will always be safe, no matter where they are in a selector chain.
Example Greedy safelist entry: my-class*
| Selector | Final result |
.my-class-1 |
Safe |
.my-class-1 #my-id |
Safe |
.my-class-2 |
Safe |
.first-class .my-class-1 #my-id |
Safe |
How to Add Safelist & Blocklist Rules
Individual safelist and blocklist rules can be added in the “Advanced Settings” section of the RapidLoad plugin.
Add safelist and blocklist rules in RapidLoad Advanced Settings. Full selectors, such as my-class, my-id, or h3 are accepted, as are selectors that includes wildcards (*). Examples of accepted rules: my-class, my-id, h3, ul, *my-class, my-id*, *ul*.