Hacker News new | ask | show | jobs
by ryannevius 3681 days ago
In all seriousness, what advantages do you see over writing inline styles?
3 comments

Tachyons is based on mathematical scales: http://tachyons.io/docs/layout/spacing/

Practical example: I have a form with a header. I look at it and think "there needs to be more space below the header". So I change

  className="mt0"
to

  className="mt1"
It hot-reloads etc. It took me exactly two keystrokes to change this and I know that the spacing is consistent with all the other spacing in my app.
But how is that any more efficient than changing:

    style="margin-top: 1rem;"
to

    style="margin-top: 2rem;"
It's also two keystrokes, and is mathematically determined...
1. way less clutter and repeating, my whole style is in one line per tag.

2. the scale also has fractional rem values.

I'd rather change "f5" to "f6" for a smaller font than: "fontSize: 1rem" to "fontSize: 0.875rem".

3. the author of tachyons clearly understand design. If he improves his stylesheet, I benefit.

4. Apparently inline-styles are slower [0], but I don't count that since everything could be extracted.

[0] http://ctheu.com/2015/08/17/react-inline-styles-vs-css-stupi...

5. I thoroughly enjoy using it. :)

Perhaps I'm just a fuddy-duddy, but I rather like MDN's description of what classes used to be for: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att... (The second paragraph.)
It is much faster to type and maintain, easier to read, smaller document size and faster for the browser to parse.
Is there a benchmark you can point me to for "faster for the browser to parse"?
sure, I searched for tests just before I posted my comment.

http://ctheu.com/2015/08/17/react-inline-styles-vs-css-stupi...

I use react inline styles in some situations where it's appropriate. on large tables or SVG (eg. with zillions of styled circles) there will be issues.

if you are sending HTML from a server with inline-styles then you will have much bigger problems with bandwidth.

This is where tachyon and basscss can provide a clean way for the day to day simple styling tasks like "needs more padding here" "make that title bigger there" without writing up stylesheets with repetitive margin, float, etc. for every single view in your app or every page on your website.

Better caching, smaller HTML size and the ability to use inline styles if you do need to override something
Are `class` attributes cached more efficiently than `style` attributes for some reason?
I assume he/she means that CSS is cached as an http resource and can be reused in different pages, whereas style attributes are only cached as part of the page; ie using them adds page weight.