undefined | Better HN

story

0 pointsryannevius9y ago0 comments

In all seriousness, what advantages do you see over writing inline styles?

0 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"

  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.

ryanneviusOP9y ago

But how is that any more efficient than changing:

    style="margin-top: 1rem;"

    style="margin-top: 2rem;"

It's also two keystrokes, and is mathematically determined...

cel1ne9y ago

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. :)

bshimmin9y ago

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.)

crucialfelix9y ago

It is much faster to type and maintain, easier to read, smaller document size and faster for the browser to parse.

ryanneviusOP9y ago

Is there a benchmark you can point me to for "faster for the browser to parse"?

crucialfelix9y ago

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.

ranyefet9y ago

Better caching, smaller HTML size and the ability to use inline styles if you do need to override something

ryanneviusOP9y ago

Are `class` attributes cached more efficiently than `style` attributes for some reason?

Touche9y ago

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.

j / k navigate · click thread line to collapse

0 comments

cel1ne9y ago

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"

  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.

ryanneviusOP9y ago

But how is that any more efficient than changing:

    style="margin-top: 1rem;"

    style="margin-top: 2rem;"

It's also two keystrokes, and is mathematically determined...

cel1ne9y ago

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. :)

bshimmin9y ago

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.)

crucialfelix9y ago

It is much faster to type and maintain, easier to read, smaller document size and faster for the browser to parse.

ryanneviusOP9y ago

Is there a benchmark you can point me to for "faster for the browser to parse"?

crucialfelix9y ago

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.

ranyefet9y ago

Better caching, smaller HTML size and the ability to use inline styles if you do need to override something

ryanneviusOP9y ago

Are `class` attributes cached more efficiently than `style` attributes for some reason?

Touche9y ago

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.

j / k navigate · click thread line to collapse