What does HackerNews think of styled-components?
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
#257th most starred repository on GitHub, used by millions of developers to ship millions of websites — you've very likely visited websites that are built with it!
It has out of the box support in Atom and scss (like?) syntax.
strikes a really nice balance here imo. I use Radium every day and in general it has been easier to maintain and use in comparison to all css but if I could do it again I would go with styled-components.
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?
From the top of my mind https://github.com/styled-components/styled-components.
Very nice to work with.
https://github.com/styled-components/styled-components
Edit: for the record there's nothing stopping you from using CSS files with classnames on your tags as usual, but libraries like styled-components allow you to easily scope and collocate your CSS with your components.
CSS classnames are purely for the developer's benefit. Not the user's. And as developers, forcing ourselves to find semantic meaning for every element we write leads us to component-oriented CSS like BEM. Which is a fine thing, but we can also use purely visual classes - like `bg-red bold border-solid` if it helps (and it does. check out tachyons.io)
The class names of elements in Google's homepage for example reads like 'tsf-p', `oq`, `gsb` etc. I suspect these are machine generated. Same with Facebook. One of the best libraries to do this currently is styled-components (https://github.com/styled-components/styled-components).
Consider reading http://nicolasgallagher.com/about-html-semantics-front-end-a..., http://mrmrs.io/writing/2016/03/24/scalable-css/, and http://johnpolacek.com/2016/06/17/atomic-css-movement/ for reasoned perspectives.
Not all of them use inline styles and a lot are library agnostic. Here are just some of the ones I have played with, plenty more exist.
https://github.com/rofrischmann/fela
https://github.com/FormidableLabs/radium
https://github.com/Khan/aphrodite
https://github.com/threepointone/glamor
https://github.com/MicheleBertoli/css-in-js
https://github.com/styled-components/styled-components
https://github.com/css-modules/css-modules
https://github.com/cssinjs/jss
(Feel free to dig into the code and submit a PR if you're so inclined! https://github.com/styled-components/styled-components.githu...)