Hacker News new | ask | show | jobs
by cel1ne 3681 days 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"
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.
2 comments
ryannevius 3681 days ago
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...
link
cel1ne 3681 days 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. :)

link
bshimmin 3681 days 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.)
link