Why aren't inline styles good enough?

(William Le) #1

There seems to be a proliferation of CSS-in-JS libraries like CSS modules, styled-components, aphrodite, etc…

What’s wrong with using only inline styles? I heard some arguments about pseudo-selectors (:after, :before, :nth-child), and @media queries. These aren’t too painful to do with some JavaScript…

Are there other reasons why you’re not using plain 'ole inline styles?

(Sagiv Ben Giat) #2

Theming? How would you control themes in efficient way.
Another thing is style override. It would be harder to override styling properly

(Nikhith Jadav) #3

CSS is about separating presentation from markup. When you tangle the two together, things get much more difficult to understand and maintain. It’s a similar principle as separating database code from your controller code on the server side of things.

Advantage having a different css file are

  1. Easy to maintain your html page.
  2. Change to the Look and feel will be easy and you can have support for many themes on your pages.
  3. Your css file will be cached on the browser side. So you will contribute a little on internet traffic by not loading some kbs of data every time a the page is refreshed or user navigates your site.

(Joetidee) #4

Surely you can theme by setting aside some LESS variables that are updated in a file, that subsequently compiles the CSS for browser consumption. With styled components, they run real-time, so this is a performance hot - 3x slower that raw React/CSS.

(Arthur Park) #5

I’d like to point that css files generated from CSS-in-JS libs can be cached.

If you need to render from server side, style will add weight to generated html string, and for complex app, this could be significant.

I’d argue that with any approach, there is pros and cons. What you want is explore/measure and make trade offs.

(Michael Toomim) #6

Inline styles are good enough. In fact, with React it’s the best way to go.

CSS was invented before we had programming abstractions (like functions or variables) to generate our HTML. If you wanted to make every header on your page big and blue, you had to wrap each one in a <font face="verdana" size="5" color="blue"> tag. This got tedious. In a programming language, you would just write a function header() or a variable header_style and re-use it. But HTML doesn’t have functions or variables, so the W3C invented a new language with abstractions for style, called CSS.

And then, of course, CSS wasn’t good enough, because it didn’t have arithmetic and variables. So we had to invent new languages on top of it, like LESS and SASS.

But now all our pages are generated with Javascript. We have functions, variables, and turing-complete code. We don’t need CSS anymore. We don’t need LESS or SASS. In fact, we don’t even need HTML as a language—we just generate DOM directly.

Yet, people are so used to CSS that they think they still need it. They’ve invested so much energy into learning its intricacies, and developing complex, customized workflows that regularly exploit its most elaborate features that they’ve become defensive and resistant to the suggestion that it isn’t necessary. The same thing happens when people try to suggest that GIT can be simplified—check out this academic research on how people react to a simpler GIT.

One of the reasons people give for CSS is that it separates content from style. But that’s not even the case—you can’t represent all of the style in CSS, you often have to insert new DIVs, for instance, to give your CSS the right things to move around. Furthermore, there is no objective distinction between content and style. The choice of which things go in CSS vs. HTML itself is a matter of style. And finally, separating content from style doesn’t actually make your code better. What makes code better is removing duplication, and for that, it’s better to use a full-featured language like Javascript rather than a crippled thing like CSS.

The people who argue for separation between content and style often don’t know the history of their dogma. You see, HTML evolved from SGML, which was designed at IBM’s in-house technical document writing, where it was deemed more proper for a technical writer to care only about the words and not the fonts used. This developed a cult following at IBM, along with the color blue, 7-bit character codes (instead of 8), and a few silly songs. This cult followed the WWW mailing list, since it used an SGML derivative, and was very vocal in the standardization process to separate content from style, even though it doesn’t make sense now that 90% of HTML is written to achieve a custom look. I mean, how many DIVs does the average page have today, just to help arrange things within things so that they nest properly on the page?

Anyway, forget those hoey louies. Use inline styles. Abstract with Javascript. It’s the future. CSS was wrong in the first place.