Skip to main content

Optimizing CSS generation

Disabling unused formats

If you are not sure where a format is used, click Actions > List sections to get a list of all the sections where this format is used in your application.

You can then refactor the section to use a different format and then disable this format by clicking Actions > Disable.

how to identify sections that are using a specific format

Each format that is present in the skin adds CSS selectors that impact performance when parsing the CSS file and rendering the UI. The more formats you have in your application, the more likely a Pega Developer might use the incorrect format. Make sure that you limit the list of formats to what is really needed by your design system.

As a rule of thumb, Pega recommends you create a new format if you can find at least three sections in your application that use it.

Marking a format as deprecated

If you are concerned about disabling a format but want Pega Developers to stop using it, a simpler approach is to annotate the format and mark it as deprecated in the usage annotations.

Example of deprecated formats with instructions on which format to use a replacement

Click the Update Details action to provide recommendations for the format to use instead.

Example of annotation for a deprecated format

Reviewing the size of the generated CSS

You can generate a complete preview of the auto-generated CSS by clicking Action > Preview inside the skin ruleform.

Note: The preview CSS is not the complete CSS that will be auto-generated; it does not contain any base stylesheet as well as additional stylesheets attached to any parent skins.
Previewing the auto-generated CSS from the skin ruleform

This opens a new window where you can view the auto-generated CSS file. This allows you to search for selectors and determine what is generated by the skin ruleform.

Example of auto-generated CSS when previewing a skin

Click Download Statistics to download a CSV file that can be parsed by Excel. The file highlights how many formats are used and the number of bytes required by each format. 

In the screenshot below, you can see that a table format will generate CSS selectors for both the Repeating component (legacy table) and the TemplateGrids component (optimized table). These 2 components are using a significant amount of CSS selectors and reducing the number of grid formats will help improve the performance. For a small adjustment to an existing format, using a helper class to slightly alter the behavior of a format is usually a better approach.

Review the size of the different formats

Check your knowledge with the following interaction

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice