Rename the .dropdown class to be more specific to this component?

[stevenharman]

This component uses the .dropdown class name for the element used to contain the dropdown options. That can be problematic as a .dropdown component is pretty generic, and in fact implemented in a lot of UI toolkits. In those cases, the dropdown element generated by this component often inherit (at least some of) the styling rules of those toolkits. And with unexpected/awkward/broken results. Perhaps we could rename this component's .dropdown to be something more specific - v-select-dropdown, perhaps? Or just kill the entire .dropdown class and rename the related classes since we already have the v-select class.

I can work up a PR if we can get some guidance on an approach from @sagalbot. Thanks! 👏

[sagalbot]

Yeah, this one's gotta get done for sure. I like the idea of prefixing all internal classes with vs_ - we used vs__ in the flexbox layout changes, but in hindsight, using a single _ would shave a couple bytes off if we're using the prefix everywhere. Bit of a micro-optimization, but they add up.

I'd also like to get the CSS selectors to use the least amount of specificity as possible so it's dead simple to override them. I'd love to be able to leverage scoped styles, while keeping it simple to override - but I'm not sure that's really possible.

[stevenharman]

FWIW, I used the double-underscore as part of the flexbox layout change because I tend to follow the BEM CSS guidelines. I'm not opposed to adopting a different style, so long we we use something consistent throughout the component.

[sagalbot]

Agreed - I liked that it conformed to the BEM standard as well. It'd be interesting to do it all with the double __, run the build, check the kb, then swap it out for _ and see if it's worth deviating from the standard.

[SamueleCaprioli97]

Hi, i have a similar problem. I think the best solution is to set the style tag as 'scoped' in Select.vue file

[stevenharman]

@SamueleCaprioli97 If I'm not mistaken, scoping the component CSS would make it near impossible to override. Something like a consistent prefix, such as @sagalbot has already started to implement would keep the override/customization door open.

[connorshea]

I'm currently running into an issue with this because of Bulma's dropdown class, it should definitely be named vs_dropdown instead :)

It'd maybe also be nice to be able to customize the class name?

[unikitty37]

Yes, I've had to add

.dropdown.v-select {
  display: block;
}

to my main CSS file in order to work around the Bulma issue. It would be nice not to have to do this (or at least for the documentation to mention the need for this workaround until then 😁 )

[sagalbot]

The vs prefix will be added for all classes in v3.0. The CSS is also separated from the JS in the build, so you'll be able to directly import SCSS and adjust variables if you need to.