Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Some 🍋 0️⃣ usability questions

See original GitHub issue

Had a few questions, figured I’d open them all in an issue 😃

This provides resets for every element except <body> and <html>: (where they would be)
- is this intentional?
- I would guess so, react can’t quite produce those elements
- won’t I still need some sort of global reset for these elements?
How do I prevent my devs from accidentally using vanilla html elements in react?
- probably a good opportunity for a pre-commit hook?
How do I integrate third party react components?
- Say I find a totally-sick date picker, do I have to fork and s/div/Div/g in their component?
- Does this prevent me from taking advantage of out-of-the-box sort of react components?
- Is this maintenance overhead worth it?
Performance?
- I realize css benchmarks are kind of silly, but has there been any research into whether this approach impacts paint time?
Problems with global resets?
- were there ever any actual problems with a global reset? the blog post hints at potential problems with leaking scope in a .scss file, though I’m not sure how lemon reset helps that – perhaps it can be elaborated on 😃

Thanks! 👍

Issue Analytics

State:
Created 6 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

asottilecommented, Jun 27, 2018

I see <body> and <html> made it in, I think that and my other concerns are resolved now. Thanks, friends 🎉

1reaction

mxmulcommented, Mar 6, 2018

Oh hai. I’ll try to answers a few of these:

This provides resets for every element except <body> and <html>: (where they would be)

The goal of this library is to let you write components (using CSS modules) that have consistent styling across browsers. It’s pretty uncommon for a shared React component to render the <html> or <body> tags on a page, so its not something that we’ve run into. I’m open to a PR though, if this is something that you need 😃

How do I prevent my devs from accidentally using vanilla html elements in react?

Internally we have a custom eslint rule and run eslint through pre-commit. We should probably release that as well!

How do I integrate third party react components?

This library is useful to ensure that your own components have consistent styling, but there’s not much we can do about third-party components. Distributing React components with CSS publicly is tricky regardless – it’s usually better to provide a dist CSS bundle than to make any assumptions about the build of the application consuming your library (e.g. whether they’re using Webpack, css-loader, etc…).