# So, what's the deal about "tachyons"?

## Elevator pitch?

- Composable, single concern utility classes.
- Design in the browser, within your HTML.
- Scales extremely well, cognitive load remains low.
- Optimised for browser performance.

## What problems does it try to solve?

- Promote CSS re-usability, build almost anything without writing new CSS.
- Promote consistency by enforcing a predefined set of choices. Design system!
- Keep the specificity low. Predictable, easy to reason UI styling.
- Portable. Create **styled HTML components** that work in any project.

## Common, major misconceptions

- Not a framework. Solves different problems than Bootstrap / Foundation.
- Not an "all or nothing" implementation. Spinkle on top, use as needed.
- Not inline styles. Looks similar, behaves VERY differently.

## Why so much love/hate?

- Challenges a lot of long-time best practices, shakes the industry.
- The highly emotional opinions of writing "semantic CSS".
- Literally everyone hates it at first sight. I sure did.
- "looks dumb, works great™" => don't see the benefits until you give it a try.
- People rarely sit on the fence. Either reject it, or become strong advocates.

## Tips and tricks

- Sprinkle on top VS going all-out: pros, cons and hard learned lessons.
- Run your projet through http://cssstats.com - it's pretty eye opening!
- Abstract "combo classes" in components. Leave out spacing around component. It will vary.
- Take some time defining your "scales" and UI colors. Shape up your "design system".
- **Write documentation**. Tachyions docs are open source, work great in that regard.

## Live demo?

- Why not! Add CDN link, start building right away!

## Worth a read

- [CSS and Scalability](http://mrmrs.github.io/writing/2016/03/24/scalable-css/) by Adam Morse
- [How is tachyons different from inline styles](https://github.com/tachyons-css/tachyons/issues/12) github discussion
- [Kiss My Classname: A Counterpoint](https://medium.com/@johnpolacek/kiss-my-classname-a-counterpoint-3ca41f0aed1a) by John Polacek
- [About HTML semantics and front-end architecture](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/) by Nicolas Gallagher
- [Full re-write in 10 days with tachyons and functional CSS: A case study](https://hackernoon.com/full-re-write-with-tachyons-and-functional-css-a-case-study-part-1-635ccb5fb00b) by Simon Vrachliotis
- [CSS Utility Classes and "Separation of Concerns"](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) by Adam Wathan