please namespace all classes #302
Comments
|
I understand the idea, but most people only use a single css framework. I guess you could import the sass files you want, and wrap that inside a new class, and use Or you could use CSS modules. But renaming everything would bring a lot of noise, and I believe most users don't want that noise. |
Could you expand on this. I'm not sure to understand what you meant. Alternatively, would you be open to a PR adding prefixes as an optional variables? Something as dumb than $prefix: 'my-prefix-'
.#{$prefix}input
color: redI agree that it's rather ugly but I've not done Sass since a long time, so maybe this is achievable in a prettier way. |
|
@jgthms I currently using
|
|
Not Namespacing CSS-Libraries is a Anti-Pattern. It is better to namespace by default. |
|
@nimo23 I too agree on this. But both |
|
Reopening the issue as I feel all of you make good points. I will consider adding |
|
@jgthms I'm pretty busy ATM, but I'll try to send you a PR for this when I can, unless someone beat me to it. |
|
No worries. I'm refactoring a lot of code. I'll add the prefix later. |
|
I submitted a PR for this. Does it take long to get it reviewed? |
|
@hgezim Did you run |
|
@yoostk, I did but Nothing should change in the deployed css file. Here's the diff: |
|
Because the same change can be seen in b2440df, the update to 0.3.1 (the commit pushed after your PR), I guess that's a normal behavior. |
|
There's still a conflict even though I did a |
|
It might be better to wait for the maintainer's response 🤔 |
That is exactly what I want every time I start a project. However whenever I deal with a project that survives longer than a year, I get frustrated when all the the sexy looking names are taken by a framework Nowadays one of my biggest concerns is finding easy to cherry-pick frameworks and having total control on non prefixed selectors CSS Modules are great, but not the best solution. They are only good for cleaning the global namespace While prototyping or applying minor modifications, I love having quick/dirty non prefixed selectors. In any case I do not like the "choose your own prefix" approach. I do believe it is far more valuable having two releases: one with and one without prefixes. That way we could get hard stats/data on what people want. Although I fear that what people initially desire/want is very different to what they need in long term projects |
|
I'd love a way to prefix bulma and generate a custom build just like jquery-ui used to to way back in the day. That way the core of bulma stays clean for new projects with only one CSS framework but can create a custom build with bulma restricted to a single container class. In my case I want to create a site plugin that inserts a chat to any existing webpage. And will love to have bulma in the chat but not outside of it. Hope this helps a little
|
|
In my opinion, the right way to prefix css classes, should you need to, is during the build process. I don't think it is right for Bulma to prefix all classes with something like |
|
you are correct, by default, prefixin all its ugly and has several disadvantages. I just posted an example of an online builder, in that way the core is intact and could create a custom scoped build for any purposes, This might actually can be my next weekend project. I just did a PoC using stylus: This outputs something like this: |
|
Personally I think scopes are the way to go. :) |
|
Guys, I wrap imports within a Based on https://github.com/jgthms/bulma-start/blob/master/_sass/main.scss @charset "utf-8";
// Customization
// You can easily customize Bulma with your own variables.
// Just uncomment the following block to see the result.
// 1. Import the initial variables
@import "../../node_modules/bulma/sass/utilities/initial-variables";
@import "../../node_modules/bulma/sass/utilities/functions";
@import "../../node_modules/bulma/sass/base/minireset";
// 2. Set your own initial variables
// Add pink and its invert
$teal: hsl(10, 70%, 61%);
$teal-invert: findColorInvert($teal);
$lightbrown: hsl(43, 27%, 82%);
$lightbrown-invert: findColorInvert($lightbrown);
// Update the sans-serif font family
$family-sans-serif: "Helvetica", "Arial", sans-serif;
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $teal;
$primary-invert: $teal-invert;
$link: $lightbrown;
$dropdown-content-arrow: $teal;
$button-background-color: $lightbrown;
$section-padding: 0.9rem 0.8rem;//DEFAULT 3rem 1.5rem
@import "../../node_modules/bulma/sass/utilities/_all.sass";
//@import "../../node_modules/bulma/sass/utilities/derived-variables.sass";
$addColors: (
"teal":($teal, $teal-invert),
"lightbrown": ($lightbrown, $lightbrown-invert)
);
$colors: map-merge($colors, $addColors);
.bulma {
@import "../../node_modules/bulma/sass/base/generic";
// 4. Import the rest of Bulma
@import "../../node_modules/bulma/bulma";
@import "formoverride.sass";
//bulma extensions
@import '../../node_modules/bulma-quickview/dist/bulma-quickview.sass';
@import 'bulma.extensions.tooltip';
.dropdown,
.dropdown .dropdown-trigger,
.dropdown .dropdown-trigger button {
display: flex;
flex: auto;
}
.dropdown .dropdown-trigger button {
justify-content: space-between;
}
@import '../../node_modules/bulma-calendar/src/sass/index.sass';
}
|
|
I tried Bulma today and I'm convinced of its features, but it's useless without namespace. Example
It's an aberration! How can we know risky selectors or integrate Bulma into an existing application? @jgthms I don't understand your message :
|
|
I am not sure if it's trivial to others, but it took me some time to figure it out. To set up a scope for bulma, say 'myscope', I did the following:
.myscope {
@import (less) url('bulma.css');
}
<!-- has bulma styles -->
<div class='myscope'>
<div class='columns'>
<div class='column is-8'></div>
<div class='column is-4'></div>
</div>
</div>
<!-- no bulma styles -->
<div class='columns'>
<div class='column is-8'></div>
<div class='column is-4'></div>
</div> |
|
Hi, I'm using bulma with wordpress and the generatepress theme. The "container" class, the theme uses it in the customizer, that is, the styles are in line. |
|
@walty8 this works beautifully. Thank you. |
|
I found a way to add custom prefix to all Bulma class selectors using PostCSS and postcss-prefixer. |
I have the same problem. |
|
Please take notice that Salesforce's Lightning Design System understands the need for automatic CSS scoping, and offers a download tool for prefixing. It seems trivial to add a $prefix variable that Bulma will account for. https://tools.lightningdesignsystem.com/css-customizer
This misses the point. I'm building web components with Bulma, which requires end-users to import compiled CSS - the majority of which are Bulma semantics. End-users should not be expected to accept a complete clobbering of native tags like H1, H2, input, etc, etc. Moreover, how would a large scale application slowly integrate Bulma styles while deprecating another library? They can't. Please provide prefixing, or accept the PRs of which there are numerous. Thanks. |
|
Eventually we were able to solve this issue with a few lines of regex. Here are two rules that we apply to the codebase to prefix all Bulma classes, variables and mixins with You might need to do some small fixes afterwards, as obviously these regexes are not 100 % accurate (but very close). There are a few global styles in |
|
I've created a simple NPM builder for bulma.css (v0.8.2) with a custom class namespace: https://github.com/creativesuspects/bulma-custom The package also includes a custom builder that allows you to only include the elements and components you need. I have only done some simple tests, but I haven't encountered any issues so far. I've also included the Checkradio extension in the custom build and that also works. |
|
I think this issue is still very relevant. Because of this "no prefix" design choice, we have to choose Vuetify over Bulma at this current project im working on. Which is kinda sad because i really like Bulma and the other design choices Bulma brings. The |
|
oh man... Day one of installing Bulma in an existing project and this is a real sticky problem. EDIT . . . gulp solution below. |
|
For anyone else, here's how to add a prefix to Bulma classes using postcss in gulp. I've also added an ignore for the modifiers, eg: |
|
@robhadfield whitch npm package are you using ? where the above maybe https://github.com/marceloucker/postcss-prefixer ? |
|
@lgh06 yes, that's the one - good luck! :) |
|
There was a little remaining from what @robhadfield shared to piece together so I shared a complete postcss-prefixer for bulma solution using gulp here: bulma-prefixer. If you are just wanting the compiled css file with the prefixed classes, that should get you closer. |
|
There's more too... here's the full (I think) list of all the other modifiers... |
|
If you're using Vue Cli it's very easy to add postcss-prefixer. Vue comes with PostCSS support, all you need to do is add the postcss-prefixer to your project: I used the ignore list from @robhadfield above. I'm also using this with the latest version of Vue 3 + typescript that's being used for a Wordpress plugin. Was getting frustrated with style clashes ... this solved the issues. |
|
An option to namespace the css would have been nice. |
|
CSS modules is not a standard anymore, CSS scoping is. Namespacing the CSS is still much preferable for any generic library, even with CSS scoping. I work on a project whose maintainer had to prefix all our classes even when having scoping because there could be clashing against things like |
|
Can this be reopened? |
|
To possibly help some people: one solution is to take the plugin postcss-prefixer mentioned above and then I am using it to automatically prefix bulma classes (to support possible bulma updates more easily). This works good out of the box, but in my case I had to make a change on this plugin, (see the gist here). I did this so I could put prefixes only on bulma files (and my bulma override file) since my styles are all imported at the same time. With that gist file above, my module.exports = (context) => {
return {
plugins: [
require('./<YOUR-PATH>/custom-postcss-prefixer.cjs')({
prefix: 'b-',
restrictByName: 'bulma',
ignore: []
}),
require('autoprefixer')
]
}
}This all needs both |
|
Hi, I also faced this issue while trying to use BulmaCSS for WordPress Admin pages use case. I wrote about it in my blog, along with a post-css prefixes solution https://zemian.github.io/blog/2022/adding-classname-prefix-to-bulmacss/. I hope this help someone who is looking for a quick solution. |
|
Config for running prefixer from Webpack (I love Bulma but I'm still having to find a way around this issue every project...) Add the loader to your Add a |
and others
Please namespace all your classes with the prefix "bulma-" or "b-", because there are a lot of conflicts when using other css frameworks as well. For example, common css-class names such as .card, .panel etc are in conflict. So please namespace all the classes with "b-" ("b-card", "b-panel", etc.).
Thanks.
The text was updated successfully, but these errors were encountered: