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.
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.
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.
As a react dev, I don't like CSS in JS either. It brings back the old font tag approach of individually styling components.
As an alternative, you can just assign class names to components and use global CSS like the old days, if you prefer. Sass is pretty great, basically CSS with better selectors and variables.
I think React is an interesting thing to think about here. There was a bunch of libraries that got ever-more-fancy about doing DOM manipulation. Those libraries helped manage the complexity of the model of doing in-place DOM manipulation. React chose something different – much more like the templates of yore – and instead of managing the complexity it introduced a simpler model that eliminated the complexity. That made it really different.
SASS/etc help manage the complexity of CSS, but they don't simplify anything at all. I think there's a scope problem here: the styling and layout of an application isn't just a bunch of selectors and styles in CSS. It's the class names and structure in the code, it's the implied connections between the expected rendered layout, it's a private language of expected elements and their semantics. You can't simplify that just using CSS. We're still waiting on someone to come up with a combined approach that actually works. I personally eagerly await someone's genius idea!
I'm not such a fan of how spread out everything is. I'd really like to see html, js, and css all together in one place. React is the best I've seen, but it doesn't provide a good solution for css.
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?
Yes, thank you. This has been my biggest problem with React as well. It feels like they are fighting against some of the most natural ways to use CSS in code. Which is too bad, b/c CSS is awesome, and React is awesome. But together it feels like they don't play well.
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.
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?
That's misunderstandong of the technology. React has nothing to do with styles, it manipulates DOM. Handling styles is up to you, and it's extremely easy to use CSS modules.
I've spent the past 5 years with various blends of SASS, CSS, CSS-in-JS, Redux, Rx, React, Material-UI and a few other bits and bobs (and several years of front end dev with other tech before that, too).
I prefer by far keeping the CSS (or SASS) separate from the rest. React's mix of JS and HTML-ish is very comfortable, but I can't say I love it more than "native JS + some kind of templating". However, I'm absolutely certain that I prefer the CSS left outside the rest. My reasons include:
- you (probably) don't have to recompile the whole JS app to get your style changes
- it's much easier to see the relevant JS when you don't have to skip over CSS or lengthy class names
- it's much easier to see how bits of CSS relate to one another when they're in the same file (which I'll admit can make _some_ parts of that job harder, some of the time)
- when the browser's dealing with "proper" CSS, you can use the browser tools to test changes before updating the source files, skipping around the DOM, watching all the selected elements change (which doesn't always happen when you have CSS Modules style scoping going on)
- code editor tooling is usually better
- you don't have to remember whether you're writing your CSS in native CSS, snake-case, or JS style camelCase (I know some of the recent CSS-in-JS tech helps here, but why add a library to do something the browser already does?)
- you don't need to add libraries to do something the browsers already do
I agree, it also makes React component much more complex thant it should. I've seen open-source components with dozens of props for the css and where 80% of the javascript code was actually just styling.
I'm not sure what's the gain there versus something like Sass + BEM, except from making the javascript code way more unreadable.
Not to mention the mess in the html if it inlines the css.
It's not just CSS that sucks, it's the whole, totally arbitrary, web UI stack.
Unlike with desktop apps, everybody pretty much builds everything in the UI for themselves, with the exception of a handful of primitive items (button, radio-button, text-field, etc) that people still re-implement anyway.
If there was a set of rich widgets to just take, configure and use in your JS app, like you can in Cocoa, Windows Forms, etc, it would be great. And no, React is not that.
The React way is different and I was hesitant, but it is better. It combines the best parts of native app development with the best parts of web development, then improves on them. The old way of doing CSS was crazy and unmanageable because CSS was intended for documents. Cascading styles are useful for publications, but they are unwieldy for UI components. There aren't many native app designers clamoring for global cascading styles.
The React way of separating design concerns from logic is to build container components[1] that handle the logic and pass props down to simple components that just display the data they're given. I would expect designers to spend more time in presentational components and CSS modules[2] while developers would build container components. (I'm a one-man shop doing both.)
reply