Optimizing CSS generation

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.

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.

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.

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

You can generate a complete preview of the auto-generated CSS by clicking Action > Preview inside 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.

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.