CMS Connect Recommendations for Optimal Usage
Read these tips and gotchas to get the most out of CMS Connect.
Your Experience Builder site pages can have CSS. Your CMS connections can have CSS. To avoid rule collision on your site’s pages, we recommend scoping your CSS.
Scoping involves adding a
DIV class in the code to “tag the tags,” which prevents rule collision by marking the CSS from your CMS with a prefix so that it’s given a higher priority.
For example, your site page specifies 10-point font, while your CSS has 14-point font. Use a scope prefix on your CSS to determine which rule gets priority.
The downside of scoping your CSS is that it increases your code’s file size by 10–20%, which translates to longer download time for your viewers. But you can make up for this performance hit by minifying and reminifying your code. Plan to include this work as part of your build time for your CMS website. It’s worth doing so that you can reap the benefits of scoping without degrading performance.
If the content on your pages looks too large, it’s possible that your CSS is using REM with the old technique of 62.5%. The root page of Salesforce uses REM at 100%. Recode your CSS at 100%.
Typically, you define the libraries, like
jQuery plugins such as a carousel, as part of the CMS Connect configuration to make sure that they:
- Load early
- Are always present on the page
- Are ready to be used by multiple fragments