Bootstrap: Prefix custom properties with `bs-`

[MartijnCuppens]

Something @tmorehouse mentioned in https://github.com/twbs/bootstrap/pull/30466#issuecomment-612177063, we could prefix our custom properties with bs-.

Thoughts @twbs/css-review?

[patrickhlauke]

personally, i'd be in favour. yes it makes them more verbose, but then again...not by a monstrously huge amount

[ffoodd]

I'd be in favor to, since Bootstrap can live beside other libraries (eg. Booster v4 includes jQuery TableSorter, speaking of table styles leaking) or custom code.

However, could this be some kind of no-conflict mode, a la jQuery, to allow devs to remove/add prefixes ?

[MartijnCuppens]

We could run all our variables through a function like this:
https://codepen.io/MartijnCuppens/pen/dyYPQVp?editors=0100

[mdo]

I'm still against prefixing things, regardless of the tooling or language. We haven't done it in Sass or Less ~or our JS~ for the last 8.5 years. Makes me super hesitant to add it now.

Thinking about it more, the syntax of custom properties lends itself quite nicely to a find and replace, I think. Take this example:

:root {
  --variable: value;
  --variable2: value2;
}

Finding ··-- in this file and replacing it with ··--b- isn't difficult or time consuming. (Note that the dots here indicate spaces—GitHub doesn't render spaces for some reason.

[tmorehouse]

Custom JS event names are postfixed (or is it middlefixed) (i.e. shown.bs.dropdown) :wink:

[mdo]

Doh, I knew that! Updated comment :).

[herbalite]

We could run all our variables through a function like this:
https://codepen.io/MartijnCuppens/pen/dyYPQVp?editors=0100

From an user perspective I'd appreciate that.

[MartijnCuppens]

Finding ··-- in this file and replacing it with ··--b- isn't difficult or time consuming. (Note that the dots here indicate spaces—GitHub doesn't render spaces for some reason.

Lot's of people (including me) are using Bootstrap via npm, find and replace is not really an option there. It could be possible with a PostCSS plugin, but afaik, there is non available (yet). Also, this PostCSS plugin should only run for the Bootstrap CSS so if you aggregate Bootstrap with custom CSS, you got a problem.

We haven't done it in Sass or Less or our JS for the last 8.5 years

This is different. Sass variables don't leak into the CSS, so the only conflicts we can have are in source Sass. For custom properties, we got to make sure those custom properties do not conflict with any custom CSS.

[mdo]

Ah, yeah, I was on a high horse about it earlier. I do see the difference here for what gets served to end users and that these things "leak" into other environments where it could clash with other CSS.