I feel like CSS frameworks are not themselves modern. My thought has been that web components are preferred over css classes.
In React, I use jsx-styled to style my components. Then I simply re-use the components as needed. This way I don't ever need to use re-usable CSS classes.
They are not CSS frameworks in the sense of Bootstrap.
They are React component frameworks for common functionality with a unified style approach.
Something purpose-built for React is usually much better than something where React is bolted on to an existing framework, like Reactstrap (React + Boostrap) because those usually are built with jQuery and just handle state and functionality in a way that's not easy to integrate with React cleanly, so you end up re-implementing the actual functionality again.
I'm going to echo styled-components being a godsend.
I've built a ton of front-end applications, both pre- and post-react. I've tried a ton of implementations of CSS, including just using PostCSS. After all my time investigating the best way to approach CSS, I think style-components is the best solution to use with React.
From a javascript point of view, React is great, but I wholeheartedly disagree on the CSS modules. What React did here breaks the whole purpose of CSS, even if it is messy, not to mention that now designers need to have help from programmers to do their job. IMHO, it is much better to user Sass to make CSS sane, and just do whatever makes life easier on the frontend. I feel something light like Backbone.Native with a Shadow/Virtual DOM system is a superior system in this sense.
Looks great. Is it possible to use css frameworks with it (let's say bootstrap etc). I'm trying to understand where this fits in the overall stack. Is it possible to use react libraries with it.
What CSS libraries are startups currently using to build their web apps using React? As we cant use plain Bootstrap with React, following were the popular choices I found on web:
1. Material-UI
2. React-bootstrap
3. Reactstrap.
Do you prefer using a CSS library or no CSS library at all with React?
I prefer react-css with react mostly because I can import styles and treat them like regular objects. I also find it much easier to do responsive styling by computing CSS values with js.
Another reason for this approach is that I believe React Native will be the universal framework for mobile and web development and it also uses this method of styling so I'm adapting to it.
Even though this is a good point, I am somewhat disappointed that people downvoted a trivially correct statement. React is arguably the most popular web framework and it definitely doesn’t do this, nor does anything about it make it especially make sense to do this. Not every React app uses styled components or a CSS in JS solution at all. Arguably, a fair bit don’t. Anything using Blueprint doesn’t entirely use CSS in JS.
I've been using plain css for my React stuff so far but I do miss a lot of the syntactic sugar Sass allows, like nested selectors, BEM extrapolation, colour utilities etc. What is the norm for people these days when it comes to CSS and React? is css-in-js very popular at all?
I'm a big fan of React, but I agree styling is a mess.
CSS in JS has many limitations and virtually every alternative adds either another library or some other convention/configuration overhead.
Other frameworks struggle with this as well but it feels like React really shrugs off styling as the community's problem and subsequently there's a hodgepodge of solutions that work in this or that scenario but no gold standard.
Yeah, I was mostly going after a direct comparison with styled-components.
I used to be quite happy with css-in-js because of its simplicity but found that it doesn't scale very well to large & complex apps.
About a year ago I was introduced to styled-components by a colleague and though initially sceptical (it took me a little while to grok its patterns) I've found it really nice, it solved basically all of the issues I found with scaling styles inside a React app, and I haven't looked back. The only concern I have with it is its not insignificant contribution to bundle size, but that's literally the only thing that would dissuade me from using it on any new project by default.
Since it obviously fits so well with the 'React way', and allows you to colocate styles within components with full access to the power of JS for building complex styles dynamically, I just wonder why you'd go for Sass, which is a great but much more general purpose tool, when it exists?
React is, in my opinion, a big step forward in reclaiming the front end as a mature UI environment.
I have also found that CSS becomes a lot more tolerable with CSS Modules, in combination with React, which allows you to write CSS that targets one component and only that component. By eschewing cascading, you can finally write modular, reusable CSS that avoids side effects and still allows fine-tuning (overriding) by the component user.
Going to have to disagree with the comment on CSS-in-JS.
CSS-in-JS is one of my favorite parts of the React ecosystem. Style as a function of state is such a natural extension to React's programming model that I end up cringing a bit every time I have to go back to writing a bunch of different classes and applying them conditionally. Representing styles as data also means you have the full power of JavaScript at your disposal to compose and manipulate styles (not to mention access to a proper module system), whereas with plain CSS you're limited to a handful of mixins offered by whatever post-processor you choose, and those in turn are generally limited in terms of expressiveness themselves by nature of only being able to perform simple string interpolations, since that's the format they have to deal with.
I think these benefits are analogous to the benefits of HTML-in-JS a la JSX over traditional JS-in-HTML templates. I'm honestly struggling to see why someone would prefer HTML-in-JS but not CSS-in-JS.
reply