[Suggestion] Class names namespace to avoid conflicts about ui HOT 14 CLOSED

Ye, and FontAwesome actually have this SCSS:

$fa-css-prefix: crazyprefix;
.#{$fa-css-prefix}-spin { ...

So if an option - it would go into the SCSS + the JS options (must be same ofc.). Else just go with e.g. fap (fancy app :D )

from ui.

Hi,

I like the idea about the prefix, I think I will add that as an option.

from ui.

You might want to revisit this. Many of the fancybox classes are not scoped such as is-hidden. It would be helpful if you would scope everything as to not come into conflict with existing frameworks.

from ui.

You already can override all the classnames, it just takes a bit of a work.

In the options, you can do the following

classNames: {
    viewport: "carousel__viewport",
    track: "carousel__track",
    slide: "carousel__slide",
    slideSelected: "is-selected",
},

And alter as needed. You need to manually alter the styles after you do this though

Though it could be made a bit more clear, or maybe just set it in one place (some kind of prefix option maybe, that would get copied across the board?)

Agreed on better prefix for Carousel, that is rather generic, as opposed to Fancybox and Panzoom. Maybe something like fancyapps_carousel, fancyapps_fancybox, etc?

from ui.

I was more thinking of a generic prefix for all classes, could be fancyapps - but fancyapps_fancybox__slide sounds a bit... verbose :) But a prefix for the most generic would ok too / good enough I spose 👍

I just often find that class names quickly becomes to generic. Targeting the styles can be ok easy like wrap the whole SCSS import in a main class (although a bit bloated) - but that does not help if e.g. bootstrap (and its a bs discussion too I have seen) "bleeds out" across. And also a query selector like ".carousel" will end up "getting too may". I am in an environment where I have no idea what else is there - even in the SCSS stack.

from ui.

Agreed that is a bit verbose, I was thinking about something that would not conflict with other stuff (just fa sounds like related to FontAwesome, etc.)

from ui.

Honestly, naming was a very difficult decision. All common names are already taken (like Swiper), a random name would also confuse or would be hard to remember, fa- (or f-) prefix could be confused with Facebook or other projects.

On the other hand, Carousel needs very little CSS for basic functionality. You could easily set your custom names using JS options and then just write your CSS that you need.

from ui.

Naming always is ain't it! ;-) Well, as I am test running your v4 here - my decision is to base it on top of your SCSS files - cause just in case you add some sort of really important thing like css transform, overflow, grid/flex swap etc. that is crucial - then the JS and SCSS package update will take care of that..

from ui.

+1 for ALL class names used in this project to be namespaced (e.g. fb4-*) by default (or main classname namespaced and all other classes nested under it in scss/css).

Too many other libraries in use now-a-days to use non-namespaced class names. It you are worried about classname length, I would rather see the namespace and a less verbose classname.

Fancybox V4 class names should also be isolated from Fancybox V3 classnames for those migrating to avoid conflicts. Not sure if they are or not--- haven't jumped in that far yet.

.carousel, .compensate-for-scroll are common classnames.

from ui.

I am going to change naming in v5. Which option would you prefer? Maybe there are other suggestions?

.FancyPanzoom {}        .FancyPanzoom__content {}
.FancyCarousel {}       .FancyCarousel__slide {}
.FancyBox {}            .FancyBox__content {}

OR

.fancy-panzoom {}        .fancy-panzoom__content {}
.fancy-carousel {}       .fancy-carousel__slide {}
.fancybox__container{}   .fancybox__content {}

from ui.

Personally the latter.

And here is another suggestion - a bit shorter, split of fancybox and with BEM -- for "state" (A):

.fancy_panzoom {}         .fancy_panzoom-content {}
.fancy_carousel {}        .fancy_carousel-slide {}    .fancy_carousel-slide--active {}
.fancy_box-container{}    .fancy_box-content {}

Or even shorter (B):

.f_panz {}          .f_panz-content {}
.f_caro {}          .f_caro-slide {}    .f_caro-slide--active {}
.f_box-container{}  .f_box-content {}

But anything goes :)

from ui.

Personally I prefer snake_case and/or kebab-case for naming stuff in projects over CamelCase

Maybe slight suggestion for sake of clarity, use fancy as prefix always, including Fancybox (so something like fancy_box, fancy_carousel etc, if going with 🐍).

I like the first suggestion from @AndersMad, the second would probably run into problems of being too confusing with other libraries, as I mentioned before.

from ui.

Thanks for the suggestions. I will probably choose the simplest solution to add a prefix to all class names. Not sure which one to choose, maybe f- would be fine - simple and short:

.f-panzoom {}	
.f-panzoom__viewport {} 
.f-panzoom__content {}

.f-carousel {}
.f-carousel__track {}
.f-carousel__slide {}

.f-fancybox__container {}
.f-fancybox__backdrop {}
.f-fancybox__slide {}
.f-fancybox__content {}
.f-fancybox__caption {}

from ui.

Hi,

So, v5 has been released recently and class names are prefixed with f- except for Fancybox.

from ui.