Tachyons In Production
Darrell Washington Sep 14, 2017
I will start off by saying, this will be a short post. I mean really short, barely a five-minute read. No, this post will not dive deep into how Tachyons works. No, this post will not show you how to install Tachyons. However, this post, if you keep an open mind, may persuade you to use it and understand how beneficial it can be in your workflow.
Now, if you want to know further details and how to install Tachyons visit the website for Tachyons. Also, check out a much better post on Tachyons, that will dive deeper, if that's what you are looking for. The author also gives even more useful resources in "Keeping your CSS Dry with Tachyons", the title speaks for itself.
What Exactly Is Tachyons?
Here is my short answer to that question based on my cough, "Junior Level" understanding. It's just a CSS library. Yeah, doesn't sound that special right? We already have preprocessors for CSS and now PostCSS which I love as well. What can a simple library possibly do? Well... umm simplify things right? I thought that's what all libraries are supposed to do? I mean am I right?
All jokes aside this is the best library out in my opinion. I know okay, I know I may be a novice but I've run into my own share of problems with CSS. Like oh, I don't know, "SPECIFICATION". Yeah, I even hate spelling that word as much as saying it. I've tried using the OOCSS (Object Oriented CSS) way of organizing and managing CSS. I've tried using nothing but classes and boy was I close to a solution.
Although, someone with way more experience than me, took classes to a whole different level.
If you have already guessed it the library is filled with just classes. Now, wait just listen, or umm read, or whatever. In my experience classes usually sound like this, "article-font" or "nav-style". Basically, we have classes that state a general name, nothing else. You have to look at the element to understand it's having something done to it. Then you have to look deep into a class in CSS to understand what's happening.
Why not say what's happening right from the start? Have your classes tell the reader "what" is being applied to the element. No more flipping between HTML to CSS files required bro I promise. At least you won't have to cheat and take a sneak peak at your CSS when you forget a class name and what's really going on. So, I get it, you need an example.
<h2 class="open-sans ttu tracked f3">10 Questions You Must Ask...</h2>
Wow! Look at that! It's well... simple. The heading element font-family is open-sans, oh and the text is upper case. Now I know you may not get the pattern right off back. The "tracked" and "f3" may be confusing but ignore that for now. Using this system does include a small learning curve. Once you get it though, you will never forget it. What's happening to an element becomes apparent just by reading the elements classes. Finally, collaboration can be a lot easier and the CSS files can well, not contain so much mess and endless possibilities to destroy a design.
I said this would be short and I attend to keep it that way. Here's a list of the benefits of Tachyons and again this is my opinion. Test this out for yourself.
- No bleeding effect
- An easy and adaptive system.
- Takes away the need for an oversized main CSS file and modules.
- Easy to customize and add classes to the library.
I could go into detail on the list but I think you get the point of each item. I will point out that once you get used to the system or how the classes are made, you will make your own. Also, you will not want to go back to the old way of doing CSS. I'm just saying, keep an open mind and give it a chance.