Namespaced css classes

[mateuswetah]

Description

Current css classes are clear and easy to understand, but as with Bulma they might face name conflicts with other css/components if more than one is present on the project (single vue components inside of a larger project, for example).

This is not really Buefy's fault, but a design decision made by Bulma. The disscusion can be seen here and in many other issues on their project. The solution seemed to be a $prefix variable but that was rejected by the project author here. Some guys were able to get their way with it, although, using SASS, LESS or POSTCSS like this one.

That approach would only work if Buefy offers some option (on the constructor, for example), for also prefixing EVERY css class names, as much of the work is done internally by the vue.js logic. Combining the two approaches, one might be able to effectively use it.

I am aware that this would imply polluting the code with considerable extra complexity, and might be a feature not much required by most developers. Still it is something that should be kept into discussion in case someone comes up with a clever solution.

Why Buefy need this feature

Because Bulma and Buefy class names can easily cause conflicts with other css framework classes (container, control, column, to name a few).

[Tofandel]

Yeah that's not really something buefy should or could do, it's either bulma adds this prefix feature and buefy follows or the developer does this with some tool after hand, but I really don't think buefy would benefit from offering this as it's a vue framework which this problem rarely affects

Here is a tool you could use to prefix buefy and bulma classes to prevent conflicts https://www.npmjs.com/package/postcss-prefixer
You will need to tweak the ignore regex to a negative lookahead to only affect the classes you need prefixed

Or you can also wrap your sass import of bulma and buefy into one class (eg: bulma) and because the css will be more specific it will avoid a lot more inside clashes, and you will eradicate completely external clashes

If you do manage to get a good result out of one solution, we could add it to the documentation

[mateuswetah]

Hi @Tofandel , I've read about it but never used postcss-prefixer. But as much as I understood about it, I couldn't think how would it prefix the class names that are used inside Buefy's vue component templates (the html part). Is it possible?

[Tofandel]

@mateuswetah Nope that indeed wouldn't be possible and would need an implementation on buefy, which might honestly be too much trouble for little benefit (you would need to check all the classes of each component and run them one by one through a function that would be provided in buefy's config to output it as is or with a prefix..
As long as you're not using another framework within the same vue app, you can still wrap all of the styles within your app class and that will prevent most internal conflicts and all external ones, you'll need to add custom rules to fix the internal conflicts (Eg: if the class columns inherits a background from another framework and that property is not set in bulma, you would need to make sure it's defined within your app to prevent the other value from being applied)
You could also go for a full style reset within your app .my-app * {background: none;font-family: none;transform:none;transition:none;color:none;font-size:initial;/*etc..*/}

[mateuswetah]

Yeah I get it, it's really hard .

Unfortunately, this breaks a bit of expectation to Vue's progressive implementation philosophy, as in my project it may be very common for other frameworks coexist. But I guess it's due to Bulma's choice, as they gave up this approach. Wrapping up the styles in a better class hierarchy has been my solution for most cases, even though it won't be enough for all situations.

[toftstade]

A solution that works for me as we're transitioning to buefy and bulma is a custom build with a container class '.bulma'. Based on buefy-build.scss and changed like this:
.bulma { @import "../node_modules/bulma/sass/utilities/functions"; @import "../node_modules/bulma/sass/utilities/initial-variables"; @import "utils/_all"; @import "../node_modules/bulma/bulma"; @import "buefy"; }

[mateuswetah]

@Tofandel does this really solves everything? For example, when you open a modal, Buefy has to add a is-noscroll class to the body tag. I feel that a solution that does not affect all the DOM hierarchy would be really complicated. In any case, I'm considering closing this issue as @jtommy and other folks have been working o a new project that will potentially target this issue better: https://oruga.io/

[Tofandel]

@toftstade This solution is not better than using postcss prefixer because you cannot blacklist some of the elements not to target (for instance html, body, .modal and anything appended to the body)
As such using this you should encapsulate all of the styles within a bulma class on the html element or lose a lot of styles so it offers no advantage except a more targeted selector

[mateuswetah]

Exactly. I think we're done here, if someone come up with another solution, feel free to open another issue. For now I'll keep my eyes on Oruga.

[toftstade]

@Tofandel I know this isn't better, it just works for me at the moment. I add an empty .bulma-element where notifications and such can attach themselves and use a .bulma-container for some custom web components that use buefy - this solved my issues. Hopefully there will be better ways to solve this in the future - for me it's a temporary solution while transitioning from another framework.