GeneXus allows you to define styles for your digital products. In particular, it allows you to use CSS language, including importing CSS libraries, to specify styles in Design System Styles, for example.
Conflicts between styles occur for different reasons. To solve this in CSS, it is possible to use styles that are more specific and to set their priority, among others. Another way is to define Cascade Layers.
The cascade is a series of steps for resolving conflicts between styles. Building CSS within Layers provides control over which styles have priority in a project.
Therefore, it is necessary to keep in mind that conflicts between styles are resolved according to the following cases:
- Definitions made in a Layer.
- Definitions made in different Layers.
In this case, all CSS (of the User Control, the Theme, theDesign System) are within the same Layer.
Then, when you define different styles, the one with the highest specificity or the one that comes after, etc. wins. This happens because all the selectors are at the same level and, therefore, they will compete with each other according to the specificity of the selector to determine which one applies. The one with the highest priority wins and overwrites the others, regardless of the order in which it has been defined.
When different Layers have been defined, conflicts between them are always resolved using the styles of the Layer with the highest priority. That is, the specificity of the selectors does not matter.
Layers in GeneXus are as follows:
- Base styles (references to external CSS)
This is the lowest-precedence Layer, so the styles defined here can be changed or modified by the Layers that come after. For example, the value Bootstrap v3 of the Base CSS property in Design System Object
- User Control Styles
This Layer can alter styles defined in the previous Layer. For example, it can rewrite Bootstrap v3 values.
- Design Systems Object
The DSO Layer will always be the last one added and therefore the one with the highest precedence. The selectors of an external User Control or CSS do not overwrite the DSO, even if they have more specificity.
Consequently, to build a User Control, you must take into account the above order.
In addition, you must consider the above when defining a Web Panel that uses a DSO. This is because each of the CSS generated by a DSO will be inside a Layer. Both Tokens and Styles will share this Layer.
It is important to have a clear understanding of how CSS Cascade Layers work. Below is a list of some features to keep in mind:
CSS Cascade Layers