6 ms·

This reminds me of Tachyons[1], except Tachyons (supposedly) isn't satire. [1] http://tachyons.io/ http://tachyons.io/

bshimmin 10y ago
I think I'd have to assume anyone using that on a project I was paying them for really was trying to be funny. I mean, really, take a look at this: https://github.com/tachyons-css/tachyons-visibility https://github.com/tachyons-css/tachyons-visibility
- cel1ne 10y ago
  I used and am using this in production. So are others. It works really really well. Here's the rational: http://mrmrs.io/writing/2016/03/24/scalable-css/ http://mrmrs.io/writing/2016/03/24/scalable-css/
  - ryannevius 10y ago
    In all seriousness, what advantages do you see over writing inline styles?
    - ranyefet 10y ago
      Better caching, smaller HTML size and the ability to use inline styles if you do need to override something
      - ryannevius 10y ago
        Are `class` attributes cached more efficiently than `style` attributes for some reason?
        Touche 10y 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.
    - cel1ne 10y ago
      Tachyons is based on mathematical scales: http://tachyons.io/docs/layout/spacing/ 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.
      - ryannevius 10y 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...
        cel1ne 10y 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-stupid-benchmark/ http://ctheu.com/2015/08/17/react-inline-styles-vs-css-stupi... 5. I thoroughly enjoy using it. :)
        deleted 10y ago
        [deleted]
      - bshimmin 10y 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_attributes/class https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att... (The second paragraph.)
    - crucialfelix 10y ago
      It is much faster to type and maintain, easier to read, smaller document size and faster for the browser to parse.
      - ryannevius 10y ago
        Is there a benchmark you can point me to for "faster for the browser to parse"?
        crucialfelix 10y ago
        sure, I searched for tests just before I posted my comment. http://ctheu.com/2015/08/17/react-inline-styles-vs-css-stupid-benchmark/ 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.
  - christophilus 10y ago
    I've been looking at this recently. I'd really love to hear more about real-world experience using Tachyons. We're suffering from serious bloat (500KB CSS) on an old project, and are trying to figure out how best to manage CSS so it doesn't bloat over time (at least not as much).
  - akavi 10y ago
    These are valid issues, but one that has a better, actually scalable solution: CSS preprocessors. You can name your magic numbers/RGB values. You can move your shared behaviour into mixins. You can stop using float for god's sake - it's 2016, we have flexbox now (OK, so that's not related to preprocessors, but it's still true). Sure, if it's a quick hack or something you're throwing together for personal reasons, use whatever mixture of inline-styles, "visually semantic" classes, and table layout goes fastest for you. But if the point is "scalability" (In the sense of size of team working together), then this halfway point between semantic classes and inline styles is definitely not the right way to achieve it.
    - spdustin 10y ago
      If you want a website that works on enterprise desktops, you aren't using flexbox - you're using floats.
      - akavi 10y ago
        Is that still true? I recently joined a company whose primary audience is education, and our numbers say that less than 1% of our customers use browsers that don't support flexbox. Are public middle schools farther along the tech curve than "enterprise"? (Legitimately curious. It'd be pretty funny if so.)
        robin_reala 10y ago
        For what it’s worth my project is about 2.5% no flexbox, which is too high to move over really.
        kemayo 10y ago
        The sticking point for enterprise-y things remains IE, since it only supports flexbox (buggily) as of IE11. Though there's polyfills like flexibility out there, of course.
        jbrantly 10y ago
odonnellryan 10y ago
Reminds me of React! ;) Not trolling, I think React is a fine framework.

I think I'd have to assume anyone using that on a project I was paying them for really was trying to be funny. I mean, really, take a look at this: https://github.com/tachyons-css/tachyons-visibility https://github.com/tachyons-css/tachyons-visibility

cel1ne 10y ago
I used and am using this in production. So are others. It works really really well. Here's the rational: http://mrmrs.io/writing/2016/03/24/scalable-css/ http://mrmrs.io/writing/2016/03/24/scalable-css/
- ryannevius 10y ago
  In all seriousness, what advantages do you see over writing inline styles?
  - ranyefet 10y ago
    Better caching, smaller HTML size and the ability to use inline styles if you do need to override something
    - ryannevius 10y ago
      Are `class` attributes cached more efficiently than `style` attributes for some reason?
      - Touche 10y 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.
  - cel1ne 10y ago
    Tachyons is based on mathematical scales: http://tachyons.io/docs/layout/spacing/ 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.
    - ryannevius 10y 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...
      - cel1ne 10y 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-stupid-benchmark/ http://ctheu.com/2015/08/17/react-inline-styles-vs-css-stupi... 5. I thoroughly enjoy using it. :)
      - deleted 10y ago
        [deleted]
    - bshimmin 10y 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_attributes/class https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att... (The second paragraph.)
  - crucialfelix 10y ago
    It is much faster to type and maintain, easier to read, smaller document size and faster for the browser to parse.
    - ryannevius 10y ago
      Is there a benchmark you can point me to for "faster for the browser to parse"?
      - crucialfelix 10y ago
        sure, I searched for tests just before I posted my comment. http://ctheu.com/2015/08/17/react-inline-styles-vs-css-stupid-benchmark/ 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.
- christophilus 10y ago
  I've been looking at this recently. I'd really love to hear more about real-world experience using Tachyons. We're suffering from serious bloat (500KB CSS) on an old project, and are trying to figure out how best to manage CSS so it doesn't bloat over time (at least not as much).
- akavi 10y ago
  These are valid issues, but one that has a better, actually scalable solution: CSS preprocessors. You can name your magic numbers/RGB values. You can move your shared behaviour into mixins. You can stop using float for god's sake - it's 2016, we have flexbox now (OK, so that's not related to preprocessors, but it's still true). Sure, if it's a quick hack or something you're throwing together for personal reasons, use whatever mixture of inline-styles, "visually semantic" classes, and table layout goes fastest for you. But if the point is "scalability" (In the sense of size of team working together), then this halfway point between semantic classes and inline styles is definitely not the right way to achieve it.
  - spdustin 10y ago
    If you want a website that works on enterprise desktops, you aren't using flexbox - you're using floats.
    - akavi 10y ago
      Is that still true? I recently joined a company whose primary audience is education, and our numbers say that less than 1% of our customers use browsers that don't support flexbox. Are public middle schools farther along the tech curve than "enterprise"? (Legitimately curious. It'd be pretty funny if so.)
      - robin_reala 10y ago
        For what it’s worth my project is about 2.5% no flexbox, which is too high to move over really.
      - kemayo 10y ago
        The sticking point for enterprise-y things remains IE, since it only supports flexbox (buggily) as of IE11. Though there's polyfills like flexibility out there, of course.
        jbrantly 10y ago

odonnellryan 10y ago

Reminds me of React! ;) Not trolling, I think React is a fine framework.