Styles Backward Compatibility

Iotellect team is doing its best to ensure backwards compatibility between all Iotellect releases, including major ones. However, in some rare cases we have to modify platform's components, unified data model entities, and programmatic interfaces so that minor tweaks of platform-based products and services may be required after upgrading to a new major version.

In relation to Iotellect web UI components, the team provides compatibility converters with the frontend component changes on any minor and most major updates. The situation when you are facing the necessity to revisit and fix/update your custom CSS ideally should occur only if a UI component has been fully replaced with a new better one.

Follow the basic good practices to make sure that your custom CSS styles will make it through the next Server update:

• Avoid too specific combinators in selectors of custom CSS rules for styling UI components’ elements
  Descendant and child combinators don’t add to the selector specificity, but may “break” a style if additional HTML wrappers would appear in between the elements.

• Avoid too specific selectors in general for custom CSS styles
  Don’t rely on the exact component markup at the moment and address only the key classes and elements of its structure to compose a rule.

• Prefer using HTML classes to element tags or IDs when writing CSS selectors
  HTML elements that are used to compose UI components may change, but the essential class values will remain the same.

• Don’t use automatically generated classes like sc-dIfARi or jUhsgI in your selectors
  Those classes don't last long even within a user session and are constantly updated with a component's re-render.

• Utilize the default CSS variables to redefine them to your needs
  Managing CSS variables will help to keep mass style properties replacements in place.

• For the worst case scenario, keep an exported version of your dashboards
  It may help, if you import them to the updated Server instead of working with the pre-update versions.

To get more general best practices for writing custom CSS, read the Custom CSS Best Practices article.

If something went wrong after a Server update:

• First, troubleshoot the problematic custom CSS as it is described in the Troubleshooting CSS article to figure out possible clues on what exactly could possibly happen

• Look if you’re violated some of the recommendations from the How to Ensure Your Styles are Fine section of this article

• Try to change any of the styles to see if the new value apply

• Try to import the dashboard from a backup

In case of no visible reasons for your custom styles to stop working and nothing from the list above helps, please contact us to get further support.

Was this page helpful?

Tell us more

Send

Thank you!