# 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