Styling

Lazy and Explicit Styling

There are two types of styling for Uranium interactions. One we generally refer to as "lazy" styling, the other as "explicit" styling. Lazy styling requires fewer lines of CSS, but explicit styling is really the best way to style your interactions.

Lazy Styling

As its name implies, lazy styling is simpler and faster to do. You only really need to write out two declaration blocks. The first covers the element in its non-enabled state, and the other when the element is enabled.

Say we're styling a toggler button. When "enabled", we want it to be full opacity. However, when disabled we want it to be at 50% opacity. Pretty simple using the following CSS:

    [data-ur-toggler-component="button"] {
      background: gold;
      opacity: 0.5;
    }
    
    [data-ur-toggler-component="button"][data-ur-state="enabled"] {
      opacity: 1.0;
    }
    

Its default state (the first block) describes its color and that it should be at 50% opacity. The second block says that when the button is enabled, it will be at 100% opacity. Simple.

However, lazy styling can cause problems. Let's take a look at a better way to style interactions.

Explicit Styling

The problem with lazy styling is this: you're only really saying what the element looks like when the data-ur-state is enabled. We're taking it for granted that the non-enabled state is the same as the disabled state. This is an OK assumption to make in most cases.

But this isn't actually the case. What actually happens is that the element goes through a brief period without any data-ur-state before Uranium assigns the default (which is usually disabled). (Of course, this doesn't apply if you specify in your HTML that the element has a data-ur-set.)

So when we style the non-enabled state in lazy styling, we're actually styling two states — the one before any state has been assigned AND the "disabled" state.

We should instead style these states separately, as shown:

    [data-ur-toggler-component="button"] {
      background: gold;
    }
  
    [data-ur-toggler-component="button"][data-ur-state="disabled"] {
      opacity: 0.5;
    }
  
    [data-ur-toggler-component="button"][data-ur-state="enabled"] {
      opacity: 1.0;
    }
    

On a modern desktop computer, Uranium works too fast to notice the non-assigned state. However, on mobile devices you can sometimes see a delay. You can sometimes see the delay if you refresh the carousel examples page.

And that's how we style things explicitly, rather than lazily.