CSS strategy

[vkammerer]

Hello,

The package does not include any default CSS, is it intentional? I understand that this means that the components are highly customizable, but it makes them practically unusable at first.

What could be an optimal CSS strategy that would:

• provide some basic styles that make the component usable without having to style everything by hand
• remain small and simple so that users can easily understand them and customize them.

Would it also be a good idea if some styling depended on props, like "height" and "color"?

[alexanderwallin]

Yes, this has indeed been intentional.

Regarding initial usability – which is poor since you basically don't see anything – I agree we could provide some bootstrap styles. Preferably we could do that in the README, on the demo page or in a css file named to hint about it not being meant for production use.

The only thing I feel would make sense to provide production-ready styles for is <RangeControlOverlay />, which is essential for sliders to work at all.

The tricky part is making all components customisable independently of which styling technique you use, be it CSS, CSS modules or style props. I don't have much experience with CSS modules etc, so some research on best practices would be good. Have you seen any good examples of this?

[vkammerer]

I have personally used css modules (https://github.com/css-modules/css-modules) with webpack for the past 8 months, and they are really nice and easy to use.

I am just throwing out ideas here, but what would you think about:

• setting the webpack configuration to include support for css modules (I can make a PR for that). It's basically one or two LOCs and two additional npm packages. The configuration could be done so that the default styles are namespaced and dont pollute too much the global namespace (like "rpc-")
• wrap every component into a directory, create in each directory a css file that goes with the component, and then import the css modules in the jsx files and apply the classes to the elements.
• if needed, also create a "common" directory with common css styles that could also be imported by the individual components.
• expose a "overridingClassName" prop on each component, which, if defined, would add the class to the component in last position, therefore overriding the default styles. Potentially also expose a "styles" prop that would have the same logic.

Regarding the documentation: what about displaying on your demo page, for each code section of each component, a CSS tab which, if selected, would display the default styles? That would make it easy for anyone to understand which properties to override. The README could simply indicate that the CSS structure can be found on the demo page.

[vkammerer]

After thinking again about it and doing some research, I realize that the proposal here above doesn't solve the issues you mention.

The problems with a class based approach to styling (as opposed to a styles based approach) are:

• the pollution of the global namespace
• the definition of the classes themselves (which require users to include a css file in the html or to include it in their css stack one way or another)

For these reasons (especially the second aspect), an approach to styling via inline styles might be best for your package, don't you think?

Exposing a way to override these styles via a prop could be a very satisfying solution

[vkammerer]

I have done a bit of research on the strategies that some other components use (like https://github.com/callemall/material-ui) and it seems that for now the way to go to distribute a component's style is to use inline styles.

Do you have time to talk about it on skype? my username is vincentkammerer

[alexanderwallin]

Thanks for all the good input!

As you say, providing overridable classNames and style props should be enough to be able to customise the components the way you want. That way this package stays unbiased on how to style your stuff.

For nested components we could expose [componentName]Style props (like playButtonStyle) to begin with.

On top of that, we'll provide some default styles both as CSS files and JavaScript objects, free for any consumer to implement.

What do you recon of that plan?

[vkammerer]

yes that sounds good! For example with the VolumeSlider component, do you plan to implement it this way?

<VolumeSlider
  defaultClassName={true} // Boolean, to add the class name used in the distributed stylesheet
  customClassName="personnalClassName" // String, to add more class names 
  defaultStyle={true} // Boolean, to add the default inline styles, same as those of the default class 
  customStyle={color: 'blue'} // Object, to be merged with the default styles if turned on
/>

If the component has sub tags (like for the VolumeSlider), how do you want to expose custom styling? Should props also enable fine control over these elements? like:

<VolumeSlider
  handleDefaultClassName={true}
  handleCustomClassName="handlePersonnalClassName"
  handleDefaultStyle={true}
  handleCustomStyle={color: 'blue'}
/>

[alexanderwallin]

Parent/root components

I think this can be simplified by simply providing className and style props together with a collection of Styles:

import { VolumeSlider, Styles } from 'react-player-controls'

<VolumeSlider
  className="MySuperVolumeSlider"
  style={{
    ...Styles.VolumeSlider,
    width: 36,
  }}
/>

Components have defaultProps like:

VolumeSlider.defaultProps = {
  className: 'VolumeSlider',
  style: {},
  ...
}

[vkammerer]

Yes that sounds more simple than what I had proposed. So, if I understand correctly:

• the package includes a stylesheet that declares classes named after the Components, like for example:

.VolumeSlider {
  color: green;
}

and developers are free to include the stylesheet in their css stack, or to define this class as they want.

• the prop "className" overrides that name and makes it possible for devs to declare their own class name.

How do you want to generate the stylesheet? Ideally it should depend on where the { Styles } are defined. And do you know how the styling of sub tags could be exposed?

[alexanderwallin]

Precisely!

I have more faith in a JS -> CSS compilation than the other way around, and there's probably plenty of tools out there (such as this one).

Yes, customization of nested components needs to happen, probably through props on the wrapping component.

I'll make a milestone with issues for each task.

[alexanderwallin]

Milestone: https://github.com/reactify/react-player-controls/milestone/1

Feel free to grab an issue!

[vkammerer]

Hey thanks it's looking good! I just started a new job on monday and it's taking all my time so I'll be less available in the future.. (I'd have already sent you a PR otherwise). Maybe I'll have time on the weekend but I cant be sure for now..