[Perf] Provide a CSS that does not contain MDL

firebase / firebaseui-web

FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.

https://firebase.google.com/

Apache License 2.0

4.58k stars 1.06k forks source link

[Perf] Provide a CSS that does not contain MDL #318

Open david-boles opened 6 years ago

david-boles commented 6 years ago

There seem to be issues with using this and sites that use MDL, beyond what was covered in #24. Specifically, for me, putting your CSS above my MDL changed the color of my buttons, and putting it after made the colors of the login buttons (at least the Google one) wrong... Anyway, it would be nice if it was just drop in and I didn't have to manually fix things.

bojeil-google commented 6 years ago

Hey @david476, we'll look into how we can simplify this for sites already using MDL. We are also open to ideas if you figure out a clean way to do this.

david-boles commented 6 years ago

@bojeil-google Would it work to just mark firebase-ui specific stuff with !important? Then I could override mdl without overriding yours.

david-boles commented 6 years ago

Alternatively, a distribution that doesn't include mdl?

shawnlauzon commented 6 years ago

I've been using Material UI and was seeing a difference when this CSS was loaded. I finally realized that all this time I wasn't correctly loading the Roboto fonts, and when I used the firebaseui CSS, they were loaded. When I disabled firebaseui and properly loaded Roboto, the firebaseui CSS caused no problems.

david-boles commented 6 years ago

@shawnlauzon Thanks for the suggestion, but given that I'm using MDL and not seeing the fonts changing, I'm guessing that's not my problem.

shawnlauzon commented 6 years ago

@david476 Oh well, worth a shot. Good luck

nicolasgarnier commented 6 years ago

@bojeil-google,

IMO we should offer two versions of our CSS:

The current one that bundles both the MDL CSS for component that we use and our customisations on top of it.
One with only our customisations (and no core MDL styles). This is for developers that already use MDL on their site and so already have the MDL CSS loaded. This would make the CSS a lot smaller for these developers and also avoid some issues with the order we load the CSS and some other optimisations developers can do (like CSS splitting etc..).

I'll change this issue into this feature request.

About the issue here, I think this usually also happen because developer often override base MDL styles. In general you should avoid this and always add a Class name to your elements and modify CSS rules based on those new class-names. This will avoid clashes of this sort.