A few questions for those who might be using component-oriented CSS-in-JS libraries like styled-components [0] or glamorous [1]:
1. Do you still use a global, class-based, cascading CSS framework like Bootstrap, Semantic UI, etc, to provide baseline styling/theming for your pages and components? And if not, do you just essentially roll your own custom CSS framework in JS? Or are there styling frameworks out there that don't cascade and can compose more naturally with component-oriented approaches to styling?
2. If you do use cascading CSS frameworks in addition to something like styled-components, what are your approaches to limiting the unpredictable side-effects of cascading styles, dealing with specificity and load order issues, and ensuring proper style isolation inside your components?
It seems like using a cascading styling framework could defeat much of the purpose of using a well-isolated component-oriented styling library.
Although on the other hand, the alternative of writing all styling on my own seems like a futile exercise in reinventing a vastly inferior wheel, since so much designer talent has been poured into projects like Bootstrap to the point where an amateur designer like myself could never even approach the same level of polish, flexibility and consistency in their designs.
I'm hoping someone here could enlighten me on a better approach that takes the best of both worlds, or at least share a middle ground they're happy with?
1. No frameworks, but there's an `injectGlobal` escape hatch with styled-components that I use for a CSS reset. We're transitioning from a class-based approach and the two are working together quite neatly.
2. This hasn't been a problem. Most of the global styles are based on tags, and classes are already more specific. The legacy class-based stuff is all hash-based too, so there's been no conflicts.
So far I'm enjoying the component-based approach. Render functions look much cleaner and you abstract logic that might have previously looked like
On one hand I don't think I've done enough to reuse styles across components but on the other hand I know I'm never loading styles that aren't used specifically for the current render.
I have yet to get too involved in CSS-in-JS yet, purely because I am waiting for things to settle a little before I transition to it. With that said I am really excited for it, and I think it is solving a lot of problems I have with CSS.
1. This is one such component based styling framework built on top of styled-components. http://jxnblk.com/rebass/
2. In many of the solutions that exist I have found that they aim to work very well with existing CSS as much as possible. I haven't had to deal with many issues. Hopefully by the time I start switching entire projects over to it, everything will be completely stabilized.
I'm using polymer - so i guess that applies too.
What I personally do is have views that use global styling from bootstrap/material depending on the project, and individual views are built from components that have their own styling, that can be overriden by app-wide one whenever needed.
So far i never had problems with wrong styling caused by top level stylesheet.
1. Do you still use a global, class-based, cascading CSS framework like Bootstrap, Semantic UI, etc, to provide baseline styling/theming for your pages and components? And if not, do you just essentially roll your own custom CSS framework in JS? Or are there styling frameworks out there that don't cascade and can compose more naturally with component-oriented approaches to styling?
2. If you do use cascading CSS frameworks in addition to something like styled-components, what are your approaches to limiting the unpredictable side-effects of cascading styles, dealing with specificity and load order issues, and ensuring proper style isolation inside your components?
It seems like using a cascading styling framework could defeat much of the purpose of using a well-isolated component-oriented styling library.
Although on the other hand, the alternative of writing all styling on my own seems like a futile exercise in reinventing a vastly inferior wheel, since so much designer talent has been poured into projects like Bootstrap to the point where an amateur designer like myself could never even approach the same level of polish, flexibility and consistency in their designs.
I'm hoping someone here could enlighten me on a better approach that takes the best of both worlds, or at least share a middle ground they're happy with?
[0] https://github.com/styled-components/styled-components
[1] https://github.com/paypal/glamorous