Uses of Cascade Layers in CSS

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.

Definitions in a Layer

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.

Definitions made in different Layers

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:

1. 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
2. User Control Styles
   This Layer can alter styles defined in the previous Layer. For example, it can rewrite Bootstrap v3 values.  
3. 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.

Characteristics of Cascade Layers

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:

• Specificity still applies to conflicts within each Layer, but conflicts between Layers are always resolved using the Layer styles with the highest priority, which in this case is DSO. 
• It is possible to revert this order of Layers using !important. That is, the DSO will be given the lowest priority, the preferences set in the User Control will override the default values in DSO, and the base style will be able to override all of them.
• You can define these styles outside the Layers and they will become the ones with the highest priority. Therefore, for example, you can modify styles in the DSO (which is the last Layer). 
  
  Example:

  @layer layer-1  
  @layer layer-2 
  @layer layer-3 
  un-layered (highest priority)

• Layers are taken in the order in which they first appear. In addition, the first layer is the one with the lowest priority and is located at the bottom. On the other hand, the last and highest priority layer is at the top. Therefore, if in the above example un-layered is removed, layer-1 is that with the lowest priority and layer-3 is that with the highest priority. 
• Entire style sheets can be added to a Layer using the layer() function and the @import rule. For example:

  <style>@import url("/example.css") layer(<name>)</style>

• It is possible to use global keywords to revert the cascade in several ways. To learn more about this topic, read CSS Cascade Layers.

See also

Browser compatibility
CSS Cascade Layers