CSS Specificity, Next Experience (Polaris) Themes Part 9

July 1, 2025 · 4 min read

ServiceNow Wizard

This is Part 9. You should start with Part 1.

CSS Specificity

I read a lot... and some of what I read is very random, and sometimes that comes in handy. One of the RSS feeds I subscribe to recently had an article on CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control. Reading it gave me some nicely grounded insight into some things I had sorta figured out but didn't have names for. You dont need to go and read it unless you want a better understanding of how CSS specificity works and different ways of dealing with it (without resorting to just adding !important everywhere).

What does this have to do with ServiceNow theming? Read on and find out...

Naming Strategies

Without trying to explain everything in that article it talks about four different common ways to make CSS specific to the element you want it to apply to. They are Traditional, BEM, Utility Classes, and Cascade Layers.

If you have experience with Service Portal, the Bootstrap CSS classes used there are Utility Classes. However, NEUI uses BEM, Which stands for The Block-Element-Modifier, but knowing that doesn't actually matter.

How to build a Property name

At the top level of each property you have --now- because that is just standardized (and helps make sure that we dont somehow reuse a property that shows up somewhere).

Anywhere that there should be a space you put in a -

So as we start building you might have something like

--now-unified-nav

Next, you might add something after an _

--now-unified-nav_utility-panel-tabs

This means that there is an element that depends on the previous one. In this case utility-panel-tabs is part of unified-nav.

After that you may see --

--now-unified-nav_utility-panel-tabs--color

Which is a modifier on the property. In this case we are defining the Color that the Unified Panel Tabs in the Unified Nav.

You can also have multiple modifiers

--now-unified-nav_utility-panel-tabs--color--active
--now-unified-nav_utility-panel-tabs--color--hover
--now-unified-nav_utility-panel-tabs--color--selected

Exceptions

The developers and designers are all humans, so there are places where this is inconsistent.

For example:

--now-button--primary_highlighted--background-color--selected_active

I am pretty sure that it should really be

--now-button--primary_highlighted--background-color--selected--active

with a -- instead of a _ at the end before active.

While this is "wrong" I also don't really blame anyone because these properties are all "undocumented" and I don't think that anyone really expected people to dive in and use them. The direction that the product seems to be pushing certainly seems to be "Use Theme Builder", and to hide the complexity of all of these properties away.

Why should I care about this?

Knowing that there is a formal and (somewhat) consistent naming convention also means that you can often guess a property name. If there is a hover color, there is very likely to also be an active and selected color property.

Beyond that, I would guess that you care because you have followed me down this rabbit hole to get to the end of the 9th(!) part of this series on a rather niche and esoteric topic.