Unopinionate CSS

[jedifunk]

First off, loving the component. Very easy to use, and a quick port over from react-image-lightbox.

Wondering if you might consider making the CSS unopinionated. I'm finding I have to overwrite CSS in order to get the lightbox to match my global styles, when just not having CSS would do the trick.

At the moment, I'm looking at the Captions plugin, where I have to overwrite for the font family, sizes, etc. If the plugin CSS just defaulted to the body copy that would be ideal as it would pick up my global styles. That's my current example.

Just a thought. Thanks again for all your work!

[igordanchenko]

Hi! Can you point me to some library following this approach?

I felt it was important to provide some sensible defaults as a completely unstyled version would look unprofessional. For instance, the title and description are styled with different font sizes and weights.

I totally expect library users to customize the visual appearance, and #6 that I'm about to publish will streamline the customization process. For instance, you'll be able to attach your typography classes to specific slots with just one line of code.

Update: I removed this example since it will be invalid in most cases due to css specificity.

[jedifunk]

i agree that there has to be "some" styling, but that should only be for structure and layout for the lightbox to work.

you are explicitly setting the font-family to Arial, etc ... you could just leave this out and it would be taken care of the inheritance of if the user didn't style it otherwise.

instead now i'm having to use !important which should only be a last case scenario.

i found my way to your repo via the react-image-lightbox, and they do a great job of keep the CSS to a minimum for just layout/structure, and leave everything else to the user.
https://github.com/frontend-collective/react-image-lightbox

[igordanchenko]

I can surely remove the font-family, but some styling will still remain. Even in the example you provided they set the color and the font size, which you'd still need to override. And I do not see a huge difference between overriding just 2 properties instead of 3...

instead now i'm having to use !important which should only be a last case scenario.

This doesn't sound right. Can you tell me how you are currently styling the lightbox?

[jedifunk]

well to be fair, i could inline or use CSS-in-JS, but i prefer to have a global stylesheet ... which your stylesheet overrides since it is imported into the component, thus having higher specificity.

honestly, you can do what you feel is right ... but it seems like the best would be having CSS only deal with the structure/layout to make the component work.

i can do the overwrites as well :)

[igordanchenko]

Alright, now I see the issue with typography classes that I suggested above.

1. I'll remove the font-family as it doesn't have to be there, but it'll have to wait till v2 as that may be a breaking change for some users.

2. I'm still not convinced I should ship the completely unstyled version as it looks pretty blah.

3. You should still be able to style the current version the way you like without using !important, though it can't be in the global css.

// lightbox.css

.yarl__slide_title_container {
  background-color: ...
}

.yarl__slide_title {
  color: ...
  font-size: ...
}

import Lightbox from "yet-another-react-lightbox";
import Captions from "yet-another-react-lightbox/plugins/captions";
import "yet-another-react-lightbox/plugins/captions.css";
import "./lightbox.css"

4. Let me see if pushing the design attributes to css variables will make things easier.

[igordanchenko]

I went ahead and removed the font-family style in v1.12.0 (#13). In addition to the styling option described above, you can also tweak the styles via css variables and this can be done from your global css.

:root {
  --yarl__slide_title_font_size: 1.5rem;
}

I will be documenting all available css variables and slots classes in #6