Introduction
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.
Wow Classes?!
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.
Customizations
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.
Top comments (6)
You should also check out Semantic UI. It has a similar feel to what you describe in Tachyons, covers a lot of ground with the build-in parts, and the syntax is highly legible. For example:
Ok, I kinda skimmed over the documentation and examples. It's definitely worth looking deeper into, it's way more than a simple library and gives you a lot of options. I'll play around with it further and maybe do a comparison article in the future. Thanks 😉
Oh wow, I never heard of that. I thought Tachyons was the only library that used classes in that way. Have you used both Semantic UI and Tachyons? If so what you think is a major difference?
I haven't used Tachyons. Your article was the first I heard of it. We do have apps in production with Semantic UI. I had seen it years ago, but was afraid to take the plunge when it was newer. I used mostly Bootstrap instead.
Semantic is an extensive library. But its syntax is memorable and legible. I've also found that the library already covers so many scenarios (and allows you to mix them reasonably), that I rarely have to create my own UI widgets.
Even if it's too large of a package for what you need, it's worth looking at how they implemented their "semantic" classes.
Ok cool I can see how useful it can be with larger projects. Try tachyons out for smaller or quick projects. I do notice the semantics being different. Tachyons seems to use abbreviations like, “.ba” for “border-all”. Both has its strengths and weaknesses.
Sorry for any errors I’m using my phone 🤷🏾♂️😊.
Jumping in a few months late but just seeing this.
I've deployed Semantic-UI v2.2.x in production on dotnet core apps (i know, i know), and have also started using ng2-semantic (github.com/edcarroll/ng2-semantic-ui) on new Angular2/4/5 apps before we were just mandated to switch to Angular-Material.
I never had any issues with semantic and it has been the easiest layout system and class system I've used. Tachyons is intriguing due to the size but the syntax is $H!T in my opinion. I found this article searching for a translation sheet of all abbreviations to what they actually mean. I stumbled upon it once before and don't recall where.
My recommendation would be to leverage Semantic if possible. There are limitations I've read about but haven't hit any along the way. I'm using Tachy for some personal projects just to get the feel for it and I'm not burdening anyone else with having to learn the syntax.
Have a good one.