Use custom properties (CSS variables) in bootstrap

I like sass variables and they’re great during buildtime. But projects that need a microfrontend architecture (i.e. webcomponents) tend not to rebuild components. They rather reuse existing components and provide the style context to it.

Using CSS variables will allow to provide runtime configuration for styling, such as colors. CSS variables can work in conjunction of SASS. I’m happy with a few the first couple of CSS variables in bootstrap, but as already mentioned they’re only exposed and not used by bootstrap itself. This means, if a project likes to override these CSS variables at runtime, there’s no effect with the bootstrap components themself.

Is there anything against going into the CSS variable direction? Browser support is really great and the fallback option will keep non-supported browsers happy.

I understand this is a big change though. It woudl work like this:

Intialize CSS vars. We use use double-double fallback to ensure we have a fallack and do not need to repeately add the fallback everywhere.

:root {
    --primary: var(--primary-color, #{$primary});
}

Then for each and every component that uses the primary color, we could use the --primary variable instead. For example on a button, it would go like this (just a few lines that i’m using in my sandbox project, so its not so relevant to bootstrap sources):

.btn {
    &-primary {
        background-color: var(--primary);
        border-color: var(--primary);
        &:hover,
        &:not(:disabled):not(.disabled):active {
            background-color: var(--primary-darken);
            border-color: var(--primary-darken);
        }
    }
}

This would allow to change the color at runtime.

[yordis]

@mdo has been a long trip with Bootstrap and being grateful for your work, but I believe you are being stubborn on this one.

CSS Variables are 100% supported on green browsers and the global usage is quite enough for saying that we should start embracing the technology.

Keeping v5 without major updates shouldn’t be the goal, like I said Bootstrap has been breaking changes every major release and everyone is aware of that.

I do not believe that the rearchitecture has to be that bad, specially that must of the source code is well known and written so far.

Progressive enhancement always exists and we could slowly upgrade the framework to be 100% CSS variables with all the good practices in the future.

Sorry, but I can see any valid point for not doing it. I would take the initiative of written the spec of the changes and the roadmap and implement it if you want.

I don’t want to create another Bootstrap and having to deal with marketing the framework. I would love to see you change your mind.

Just put in perspective the implications of not doing this agains your thoughts right now.

[tobi-or-not-tobi]

@mdo do I get it right that the vision is that CSS custom properties are not for Bootstrap?

The runtime configurability of CSS custom properties over build-time configurability are huge, imho. Webapps are going to change with smaller reusable webcomponents, using view encapsulation that cannot be controlled with a global css. Cloud native applications prefer configurability over extensibility.

Imagine we would change the primary color for an app with a large number of webcomponents. Without CSS custom properties, it means that we need to rebuild and redeploy all the webcomponents (assuming primary color is used everywhere) and clients can no longer use the cached components (which is so important . Moreover, the components are not reusable as the CSS is baken into the component.

Using CSS custom properties is going to make a much better story. Web components can be reused by multiple apps; CSS custom properties do pass the encapsulated shadow DOM by design; changing CSS custom properties do not require a new build, deployment and the components do not need to be evicted from caches.