This is a very thought-provoking talk that attempts to show that CSS has fundamental flaws and writing styling in JS solves most of the problem without even trying.

If you liked this article, you might be interested in my Twitter feed as well.
 
  • jhubert

    What are your thoughts on performance impacts of having repeated inline styles on all of the HTML elements?

    I suppose it replaces the need to have a large CSS stylesheet load, but I'm curious if you've done perf testing on this at scale. I don't know enough about browser processing to understand the impacts.

  • Jimmy

    Is there a video of this talk somewhere?

  • Gil Birman

    Inspiring approach, Vjeux. I took a stab at solving these problems with just CSS. I think I was able to solve some of the challenges you had at Facebook...
    https://github.com/gilbox/futuristic-sass-guide/blob/master/solving-complexity.md

  • Matt Zabriskie

    Without doing any benchmarks myself, I don't think there would be a negative impact on performance with this approach. If anything I suspect it would improve performance.

    The real implication with having inline styles on every row of a list for example, is that traditionally they are generated on the server, transferred to the client over HTTP and then processed by the browser. Having inline styles causes a lot of extra, unnecessary bytes. This results in delayed page loads, especially if you have a slower network connection. Then once the content has been downloaded, it gets passed on to the processor for rendering.

    With client side rendering however, the network aspect is removed from the equation. You now only have to download a bit JavaScript that contains the styles, which can be cached. Then it's all up to the processor to render the elements and apply the inline styles.

    Network transfer aside, I suspect the styles themselves will be applied much quicker using inline styles. With a stylesheet you will have selectors that contain declaration blocks. The browser will have to parse the stylesheet, then scan the document to apply the declarations with elements that match the selectors. The performance of this is affected by how complicated the selector is, and how large the document is. Not to mention anytime a reflow occurs this all has to be done all over again.

    Using inline styles would avoid all of this processing. You are telling the browser that this element has these style rules, plain and simple. No cascading, no selector matching.

  • jhubert

    Thanks for the well thought out reply. I was thinking that there may be a benefit to using selectors that match multiple elements, but thinking back on it now that doesn't make much sense.

  • Nglavin

    you would probably want to do render your app server side for your initial page load so still be sending a large page for that first hit but I'd imagine these inline style would gzip well as there is a large amount of repetition

  • Sitebase

    I was searching for a good solution for our CSS architecture and this seems like a very solid solution. Thanks!

  • fhuuucho

    Hey, what's the a:hover alternative for inline CSS?

    (I asked the same question on stackoverflow: http://stackoverflow.com/questions/28365233/inline-css-styles-in-react-how-to-implement-ahover)

  • Paulo
  • Sitebase

    For the people interested, I've created a small implementation example of this pattern over at github: https://github.com/Sitebase/cssinjs/

  • Paulo

    Hi Sitebase,

    Thanks for this. Its interesting to see an example. I can see the hover state issue you mention however what about making a site responsive? How would you handle media queries?

  • Sitebase

    Good point Paulo. Added it to the list in my repo. What could be an option is that besides the size option in my example, you also have a sizeMobile and sizeTablet for example. Then you could write a mixin that auto picks the correct size prop based on the screen width.

  • Andy Edwards

    I'm disappointed they didn't just throw out CSS layout entirely and do their layouts in JS, setting the absolute positions of the elements. I think that would eliminate headaches for so many of us.

  • http://memeLab.com.au/ Tim Osborn

    better, they reimplemented flexbox in JS, which is much flexier than absolution positioning! https://github.com/facebook/css-layout

  • Andy Edwards

    Setting absolute positioning with JS wouldn't have any of the drawbacks of setting absolute positioning with CSS, because you could re-compute the absolute positions with JS anytime a reflow is needed. Flexbox is nice, but even it can't solve all layout problems, because it's not a Turing-complete language. By performing layouts with JS one would be able to solve any layout problem precisely for any viewport/text size and zoom level.

  • kobachi

    Really wish the sound on this was a direct recording

  • Bohdan Tkachenko

    I agree that the real problem is if you want to render app on the server too. In this case every generated page will have a lot of inline styles.

  • Philipp Adrian

    For all who are interested, we worked on a solution for the problem at the Wall Street Journal: https://github.com/dowjones/react-inline-style

  • Develum

    This article seems to miss the point of Cascading Style Sheets, if you are a smart HTML/CSS coder, you will use the cascade to your advantage, and ensure the things you don't want in the global scope to be defined in the correct scope of the page...for instance header .button { } instead of just .button. So I am not sure what this is really trying to solve. Cascading style sheets has namespace by definition. If you put a class on the body tag, and write all your css with that class element before it, is is namespaced? I think this is more of educating people on how to use CSS properly.

 

Related Posts

  • September 24, 2011 Javascript: Cyclic Object Detection (8)
    URLON.stringify() suffer from a problem, when passed an object that contains a cycle, it will never stop. This article shows 3 techniques in order to detect if an object is cyclical. Edit the object: Mark In order to detect a cycle in an object, the method we learn at school is to […]
  • October 12, 2011 Hook document.CreateElement (3)
    For a project I will talk later on, I need to hook the function document.createElement. The code I wanted to write was: var original = document.createElement; document.createElement = function (tag) { // Do something return original(tag); }; Problem However, there's a […]
  • March 14, 2015 Keynote on React Native – React.js Conf (1)
    I had the chance to organize React.js Conf and was convinced that on-top of this I should work on open sourcing React Native -and- do a talk on it. Was a couple of intense weeks but I'm really happy with the result :)
  • July 26, 2012 CSS – Cross Browser Drag Cursor (3)
    grab and grabbing are two great CSS cursors you can use when you are moving things around. Windows: Mac: Since those are not standard, it is really tricky to get them working cross browser. This article is going to show you all the available workarounds to get the best version […]
  • November 4, 2013 Bitwise Truthiness (0)
    In this blog post, I explore another form of truthiness in Javascript. What happens if you use a bitwise operator on a value like 0|value or ~~value. Context We recently turned on the JSHint bitwise rule by default and the following code was caught. var isValid = false; for […]