CSS Classes and Rules

[tomasscerba]

Hi All,

does anyone figure it out how to apply CSS rules in UI Builder and what they are for? ServiceNow Docs regarding this topic is a joke.

Create custom style classes and rules • Australia Build or modify applications • Docs | ServiceNow

Has anyone ever figured it out how to for example apply some CSS on :hover?

Any help would be appreciated.

Thanks.

[Fernnn]

So is this just a way of organizing classes that we intend to apply conditionally vs ones we don't? I did something very similar, but with "Classes" rather than "Rules". I suspect this would work exactly the same either way.

[tomasscerba]

@Fernnn ,

yes its weired. For me classes are redundant there as components already have css in then co will just add class on top of class. That’s why I used rules instead of classes to apply new styling.

[Fernnn]

This is the way I did it:
IF(@item.value.hasOverride, "diagonal-stripe-background", "") (no JS required, just regular data binding)

Looks like with rules, you have to specify the ".", implying that you can also define ids and maybe other things. I tried to test using both but my dev instance is not behaving well. It may be time for a new one.

[Aaron _S]

I think I can corroborate your hunch.

"Rules" are essentially equivalent to CSS Rules/Rulesets (see recap about CSS Rulesets below).

The name of the Rule behaves like a CSS selector. The CSS you write will be applied to the selector.

And "Classes" are Rules, but their names are strictly just CSS class selectors.

The in my opinion very confusing catch: The *-declaration block takes in all the CSS you write, but it's not actually a global block.
If you add any other declaration blocks, you'll get a faint warning that only the global block will be considered:

So what this means is that you're effectively writing this kind of CSS

.test0 {
    * {
        color: red;
    }
}

but ServiceNow automatically strips the "nested" global declaration block, making it this kind of regular CSS:

.test0 {
    color: red;
}

I've set up a demo page with two stylized text components and a button component.

Then I added three style rules:

And one "Class":

I left the class empty at first:

I applied the "test0" class to the second stylized text Component:

The resulting Page is this:

The global Rule named "*" results in every element getting green background and red text color.

The "now-button" rule overrides the background-color to red for the button, thus selecting the "now-button" custom element of the button Component.

The ".test0" Rule works as expected: It establishes a new CSS class and this Rule is used by the new "test0" Class, setting the text of the second stylized text Component to red color.

If I adjust the color inside the "test0" Class, it overrides the ".test0" rule:

So.. it does make sense in the end.

What doesn't make sense is that this isn't just simply documented. It seems to me like a bit of a bastardization of CSS, but I can see the trade-offs made for configuration and theoretical ease of use.

But why do we have to figure out so many seemingly easily documentable things out ourselves. The configurability and ease of use turns into the opposite where it becomes much harder than just writing plain CSS.

-------

Recap on CSS Rulesets:

A CSS declaration is a key-value pair:

color: red;

A declaration block is a package of declarations delimited by curly braces:

{
color: red;
background-color: green;
}

A selector is a condition that determines to which elements in a webpage to apply a declaration block:

div > .btn-default

A ruleset is the combination of a selector and a declaration block:

div > .btn-default {
color: red;
background-color: green;
}