Inline Styles?

[nelsonic]

Facebook officially recommends that people define their
style as a JavaScript Object: http://facebook.github.io/react/tips/inline-styles.html
e.g:

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

Does anybody else think that in-lining styles as JS inside Components is a _debugging nightmare_ waiting to happen (*as an app gets larger and new people add hacks & overrides to mask previous CSS instead of editing the CSS in the style sheet...?

[jkbits1]

Interesting, it does look like a problem just waiting to happen. I'd definitely like to know if they have an argument why that's not the case.

[iteles]

This was exactly what put me off React in the first place. I would love to get some more views on this. @nelsonic Worth sharing the question on twitter?

[nelsonic]

@iteles nah, twitter is mostly people who are relatively inexperienced with large-scale react apps (e.g: have only built a handful of few components - still maintainable) and thus still think mixing style inside JS is a great idea ... and nobody at Facebook is going to badmouth anything about React because its their main front-end-developer recruitment tool ...

we need to survey people who are attempting to _maintain_ a React web app that was built & deployed by someone else ...

I have personal experience of attempting to Fix other people's poorly implemented React components (no names) ... but I don't know if my experience is "anecdotal" or if others have worked on apps that are large enough (and built by enough different people with insufficient testing) to be un-maintainable ...

[iteles]

This is actually an interesting article that doesn't advocate inline styling but does go some of the way to explaining the reasoning for this to be part of react in the first place: https://medium.com/@ajsharp/please-please-don-t-use-css-in-js-ffeae26f20f#.pypeemetl

[iteles]

http://red-badger.com/blog/2015/11/19/london-react-meetup-november-2015/
Has a talk on inline styles (that I haven't watched yet, but want to keep it somewhere so I don't forget!)

[newswim]

Dunno if anyone has seen this yet, but looks cool ---> https://github.com/rofrischmann/fela

Based on 'atomic' css, a la http://acss.io (i think)

[nelsonic]

Hi @newswim fela looks really promising as a CSS-in-JS tool!
Great docs, tiny size and feature-rich. 👍

However, we decided to use Tachyons on the basis that it takes the concept of "in-line-styles" all-the-way to the "Next Level". i.e: has zero cascading and all style application is 100 explicit/local and targeted to the HTML Element being styled.
It's impossible to break on any other component by changing a style in a different component.

We know it's not everyone's "cup-of-tea" because ironically it requires some CSS knowledge (even though you are not using CSS directly when you use Tachyons you still need to know about Margin, Padding, Positioning, etc. in order to use the library...)
See: https://github.com/dwyl/learn-tachyons

Where "Atomic" CSS is designed for "Maximum Re-use", see: https://github.com/acss-io/atomizer
Tachyons is designed to give you the "full power" of CSS without ever writing a line of CSS.
We can create an entire application simply by composing Tachyons properties without ever having to create a style.css file or doing an "pre-processing" or thinking about setting up "break points" for "responsiveness". That is literally all done for us which saves an immense amount of time both in "setup" for a new project and when our team members are switching between projects. ⏳

There are still plenty of use cases for the various CSS Frameworks/Libraries/Systems,
we are just really loving Tachyons right now, because we've felt the pain of using a more "advanced" framework and that requires a "build tool" to "compile" the CSS in our components and the perils of attempting to re-use styles which then get "broken" of "over-ridden" by well-meaning new team members who didn't know the style was used in more than one place ... 😢

Anyway, thanks for sharing the link to fela!
keep up the sharing it's always good to know about promising new tools! 👍
❤️ ✅

[pankajpatel]

Except for JS based animations, I would never write CSS in JS.

We have LESS/SCSS with PostCSS for that.

I think it in terms of operation that Browser needs to perform to apply any change. And when a Style is added by JS, there is DOM manipulation which puts all the core parts of browser to work for each step.

With CSS, these operations happen in less number (I assume).

[nelsonic]

@pankajpatel exactly.
Using Tachyons is benchmarked as being (much) faster on Mobile Clients than using JS to apply styles via "Virtual DOM". Performance is a "core principal" of Tachyons: http://tachyons.io/#principles

That is not to say that we don't apply styles in our elm components when required.
Simply that:
a) we don't "mutate" the DOM/Styles in multiple places
b) the Tachyons classes are all declarative no magic methods which can be over-ridden somewhere.
c) tracking changes to the styles for an individual HTML Element or Component is trivial which promotes accountability for the exact "look and feel" for that Element/Component because it's not possible to have "side effects" when changing one element.

We will be producing an intro video to Tachyons 🔜 dwyl/book#69 (watch this space)

Thanks again for unearthing this issue/discussion thread! 👍

[pankajpatel]

Thanks @nelsonic for info about Tachyons.

This seems to be a good fit for kick starting new projects. I found many kickstart projects for React and many were good fit, but I have to do the CSS setup most of the times. So I created one just for myself https://github.com/pankajpatel/kickstart-react.

It allowed me to choose between LESS and SCSS with just config file , but I thing I will add Tachyons as primary one in there.

[pankajpatel]

I came across a thread about the Browser Performance in Mobile devices, which primarily stated that JS animations on mobile screens will lag because as part of optimising Battery Utilisation, browser pauses the JS execution while scrolling whereas CSS isn't. It sounded fair too for mobile browsers.

http://stackoverflow.com/questions/15871942/how-do-browsers-pause-change-javascript-when-tab-or-window-is-not-active

And now I'm thinking what would happen to CSS in JS.

[newswim]

@pankajpatel That's interesting! I hadn't at all thought of the introduction of lag due to JS runtime behavior on mobile. Thank you's to yourself and @nelsonic for the illuminating discussion.

I stumbled across this how-to-style-react article yesterday and felt utterly lost. It seems like mxstbr, one of the core React contributors has rallied some support behind styled-components, but after reading all of the cross-talk on various threads I'm still at a bit of a loss.

Picking a library seems conditional on the use case, but all the divergent opinions (not from you folks) seems a bit at odds with the whole point of a front-end framework. While I'd like to use SCSS for all of the familar libs and functions, I can definitely see the gains from an extremely declarative library like Tachyons. Here it goes... 🏊

[newswim]

Styled-Components are about to published a really cool utility library called Polished.

If anyone used Stylus and remembers Rucksack or Nib, it reminds me of similar mixins. It seems to play very nicely with the larger Styled Components workflow. I know DWYL is partial to Tachyons, but this is one of the few React styling libraries that looks like it will be successful in the long term.

[nelsonic]

@newswim it's always good to be aware of what is available. thanks for sharing it! 👍
https://github.com/styled-components/polished looks promising 👀 🚀
I remain curious about all new technologies and approaches to solving common problems.

However ... I think polished is solving a different "problem" from the "Functional CSS" libraries.

I'm not an "expert" but ... each time I see a style library that requires ES6 I cannot help but feel it is (almost by definition) over-complicating UI rendering in the pursuit of "moar features".
If those ES6-enriched styles are pre-computed ("transpiled") by babel they might be fast to render, but I'm a huge fan of the "Less is More" approach taken by Tachyons. 😍

More importantly what are you/your team using for your UI and why? 🤔

[pankajpatel]

The article by Addy Osmani published few days back explains clearly the initial peroformance load in JS frameworks.

What would happen if CSS also becomes part of that initial loading? More time needed to respond after initial load.

BEM and similar methodologies already are there to easily manage the CSS' meaningfulness regarding the components.

[newswim]

@nelsonic my team just started using a combination of styled-components and Tachyons, and will probably add Polished once it hits 1.0

The syntax is a little daunting at first (literally put all these together today), but it should help greatly with creating a theme (the why question). 😸

[nelsonic]

https://zendev.com/2017/09/11/css-in-js.html
https://news.ycombinator.com/item?id=15218893