TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

State of React and CSS

71 pointsby cjrabout 9 years ago

14 comments

madeofpalkabout 9 years ago
I find it very hard to understand what these CSS-in-JS libraries are for, and how anyone can be happy with them. They&#x27;re all extremely leaky abstractions for what&#x27;s mostly a &#x27;solved problem&#x27; - how do I style something.<p>What&#x27;s wrong with just &quot;plain old CSS&quot; with whatsoever pre processor you choose? If you&#x27;re working in a larger project and what to completely modularise your styles, throw in CSS Modules.<p>I think this over complicated approach by overloading the style attribute, and then figuring out how to do :hover is just too much snd is partly what others point to and laugh when they talk about &quot;JS Fatigue&quot;<p>Edit: Look, I love React. We just build a reasonably large site with it using some fairly novel and modern approaches to how to make a website. I have absolutely zero sympathy for this self-imposed JS Fatigue that was all the hotness 3 months ago. But using a convoluted system like Radium is just begging for the JS Fatigue crew to point and laugh at you.
评论 #11425826 未加载
评论 #11425764 未加载
评论 #11426280 未加载
评论 #11425668 未加载
评论 #11426331 未加载
评论 #11426281 未加载
评论 #11428112 未加载
评论 #11425896 未加载
simonwabout 9 years ago
&quot;Frontend developers don’t usually worry too much about CSS&quot;<p>&quot;Core developers build some core JavaScript tools&#x2F;libraries and focus on non-UI stuff. CSS is something they don’t need to worry about.&quot;<p>If you work professionally with frontend code, you damn well better have a deep understanding of CSS. The fact that so many developers who work with browsers don&#x27;t have this is a major contributing factor to the terrible bloated state of so many modern websites and applications.<p>Learn your tools, people!
评论 #11425729 未加载
评论 #11426150 未加载
spankaleeabout 9 years ago
All these abstractions over CSS seem way to complicated and many way to far from the browser to me.<p>With Shadow DOM style scoping, CSS custom properties and @apply mixins all coming very soon, most of the problems of composable, reusable styling, and even theming, will have great native solutions.<p>I&#x27;d like to see more focus on reusable polyfills than trying to divert around CSS. Polymer supports all three of those now, but they&#x27;re pretty tightly integrated so other frameworks can&#x27;t use them so easily yet.
acjohnson55about 9 years ago
I&#x27;ve never worked on a team where the front-end developers don&#x27;t have to worry about CSS. Everywhere I&#x27;ve worked, designs produce assets and redlined mocks, and it&#x27;s up to front-end devs to figure out how to execute the design. I&#x27;ve never worked with a designer I&#x27;ve known to have an in-depth understanding of CSS. So, from my perspective, embedding CSS in the logic makes a lot of sense.
fuzionmonkeyabout 9 years ago
A very comprehensive list of CSS-in-JS libraries with code examples is maintained here: <a href="https:&#x2F;&#x2F;github.com&#x2F;MicheleBertoli&#x2F;css-in-js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;MicheleBertoli&#x2F;css-in-js</a> for folks who are interested.<p>My personal favorite: <a href="https:&#x2F;&#x2F;github.com&#x2F;rtsao&#x2F;csjs" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;rtsao&#x2F;csjs</a>
bungabout 9 years ago
Sort of tangential, I&#x27;m curious about your internal process with this kind of workflow. After you have a new design approved the next milestone is just &quot;here&#x27;s the app&quot;?<p>We like to have our junior guys build the &quot;HTML&quot;: HTML, LESS&#x2F;SASS (BEM&#x2F;SMACSS concepts), JS, Responsive, and cross-browser tested, which we can then review and approve and build the project.<p>For those of you doing this kind of workflow, building CSS while building components, you just review it all together once the whole thing is done? Which is not a risk as everything is &quot;scoped&quot; or &quot;componentized&quot;?<p>(We do mostly websites not apps, if it matters.)
rvdmabout 9 years ago
Another great article! The Kadira team is on fire.<p>I have been working on a descent sized React.js commerce platform. While I was able to get past writing HTML tags that should be as simple as<p>&lt;div&gt;Product&lt;&#x2F;div&gt;<p>using this instead<p>React.createElement(<p><pre><code> &#x27;div&#x27; {}, &#x27;Product&#x27; </code></pre> );<p>I could justify this overhead in development time and effort because of React&#x27;s obvious advantages ( Universal rendering!! ).<p>However when I started adding in styles using Radium I found myself more frustrated than delighted. There are a lot of situations where writing styles in javascript becomes very inelegant very quickly. While basic CSS is far from perfect, I genuinely felt like I took a step back with Radium and reverted back to the legacy CSS stylesheets I had from our previous iteration.<p>I do have to note the version of Radium I was using inlined all the styles, I do like the new approach Radium is using a lot better, however I&#x27;ll likely end up converting my legacy CSS to CSS modules, which has my winning vote for the moment as well.<p>Thank you for opening up the conversation here. All things considered I&#x27;m still not sure if CSS modules are really the holy grail. Curious to see what the future will bring for CSS + JS.
renke1about 9 years ago
Personally, I am using CSS Modules with Less as preprocessor, mostly because of constants, color functions and the occasional mixin.<p>I resort to inline styles and sometimes Radium when I deal with highly dynamic styles, usually sizing and positioning for things like popups.<p>While I like inline styles in general, the editor support is a bit lacking compared to working with Less files.
acbabisabout 9 years ago
&gt; Frontend developers don’t usually worry too much about CSS. They mostly care about the application’s functionality and the layout of the app.<p>Whether or not frontend developers do a lot of CSS depends on the skills of the team. Companies prefer to hire candidates with design knowledge <i>and</i> coding knowledge, but a lot of the time those end up being separate roles. I&#x27;m a frontend developer and I write a lot of CSS.<p>What the author calls a &quot;UI Designer&quot;, I would call a &quot;UI Developer&quot;.
评论 #11426646 未加载
abritinthebayabout 9 years ago
There&#x27;s yet to be a CSS-in-JS library that is<p>* loads the styles before the content or markup<p>* as fast or faster than CSS<p>* able to have the power of modularized CSS preprocessors for reducing complex styles<p>* worth the effort.<p>I&#x27;m not against the <i>idea</i> but practically every single instance it comes up it feels like programmers who don&#x27;t get CSS trying to write something in what they DO understand that handles CSS so they don&#x27;t have to.<p>That&#x27;s fine, and useful, but lets not pretend it&#x27;s <i>better</i>.
评论 #11425796 未加载
评论 #11425805 未加载
kuonabout 9 years ago
My problem with CSS-in-JS is that I have big part of my app which is not react based.<p>So I have to style slim&#x2F;erb templates and react components in a coherent and manageable way.<p>The current thing I use is reasonable css from rscss.io but I still have a feeling of &quot;disconnection&quot; between templates&#x2F;components and css.
stevepotterabout 9 years ago
For me, using css classes in a css file has worked fine for reusable components. For isolation, the root element of the component has a class name like class=&quot;supermenu&quot;. What are the disadvantages of this as opposed to the intricate toolchains being popularized along with React?
评论 #11425713 未加载
评论 #11425640 未加载
gsmethellsabout 9 years ago
What happened to division of labor? Progressive enhancement? Mixing CSS into JS is just muddying the water.
TheAceOfHeartsabout 9 years ago
I think we&#x27;re still in the heavy exploration phase with styles. It reminds me of the explosion of flux frameworks until we finally settled on redux. I&#x27;m really hopeful that React will just pick a winner, and the community will stand behind em. In the react-future repo they also have some interesting ideas for taking on layout, which might be an exciting change.<p>In any case, I think CSS modules are still lacking. I&#x27;ve been using css modules for the last few months, and although I love using em, it still feels like it has a long way to go. With that said, I do think that CSS modules are probably the best general-purpose solution that we have so far (i.e. they work for the largest number of scenarios).<p>My first problem with css modules was the lack of value types. This is really important for stuff like colors, where you wanna declare a single color value and use it in multiple attributes (background-color, border-color, border-top-color, etc). To tackle that they eventually added module values [0]. Yay! Except that it doesn&#x27;t work for attributes with commas (i.e. shadows), nor does it perform any kind of validation on the values, so typos are very likely to pass unnoticed. :( And it doesn&#x27;t play well with other PostCSS plugins.<p>The second problem is that they don&#x27;t provide a easy &#x2F; simple way to tackle stuff like theming or one-off tweaks. I&#x27;m not a fan of Polymer, but that&#x27;s one of the few things that I think they&#x27;ve gotten right. Check out the paper-tabs element [1]. They allow you to pass a css variables (--paper-tabs-selection-bar-color), but in case you don&#x27;t pass any variable it&#x27;ll use the fallback (--paper-yellow-a100).<p>These aren&#x27;t insurmountable issues, and you can totally work around em, but I&#x27;d hardly consider em ideal.<p>I&#x27;ll note one thing that I absolute LOVE about css modules and css module values: dependencies are explicit! You import specific values from different files, so it&#x27;s very easy to see from what file each value come from. It&#x27;s the same thing with composed classes. This is actually one of my bigger issues with Polymer: HTML imports just pollute your environment with all their junk. You import a file without any clue of what just got pulled in! If you&#x27;re looking at a file with a handful of imports, good luck tracing where everything came from. It makes reading Polymer code very unpleasant. On top of that, Polymer decided to go with mixins as their composition strategy, which is also difficult to trace... Even after the React community tried em out something similar and eventually decided to move towards using higher order components.<p>Going beyond that, our style strategies are all really hard to share with others. If you want people to be able to use your components, you end up falling back to global css.<p>React Native&#x27;s Stylesheet class seems to be one of the better options for inline styles (or more specifically, React Native Web&#x27;s version). However, it&#x27;s only good for app styles. If you have a website, it&#x27;s probably not a good choice: it doesn&#x27;t have any way to reset browser styles, nor does it allow you to target plain elements. I had wanted to use React Native Web&#x27;s Stylesheet class for a website that was using React without any client-side JS (only server-side rendering), but once I realized I&#x27;d have to pull in even more tools to style other stuff, I dropped that idea.<p>I&#x27;ll also note that React Native Web&#x27;s Stylesheet class can be problematic in certain apps. For example, if you receive pre-compiled HTML fragments from the server and your only way of targeting those elements is to use nested selectors. Normally you&#x27;d have styles that look like this: .FooBar nav h1, .FooBar nav h2, etc. But that&#x27;s not doable at the moment.<p>Hopefully this doesn&#x27;t come off as a negative rant, because I&#x27;m actually REALLY excited to see so much experimenting and progress being made in this area. I have nothing but the utmost respect for all the awesome developers that are trying out ideas left and right.<p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;css-modules&#x2F;postcss-modules-values" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;css-modules&#x2F;postcss-modules-values</a><p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;PolymerElements&#x2F;paper-tabs&#x2F;blob&#x2F;master&#x2F;paper-tabs.html#L169" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;PolymerElements&#x2F;paper-tabs&#x2F;blob&#x2F;master&#x2F;pa...</a>