The journey of simplifying our CSS
Creating and publishing experiments is at the core of DNSimple. Through these little projects, we get to test, study, and refine who we are as a company. We also take these opportunities to play with new technologies or try a different angle on what we normally do every day.
For our latest side project, dnstudy, we wanted to try out a different way to write our front-end code, so we gave Tachyons a try. Tachyons is described as "Functional CSS for Humans". It was a refreshing and enjoyable way to work on this project.
The dark side of CSS
Plenty has been written on managing CSS code. Writing and organizing CSS on large projects is hard. It requires a lot of effort to keep the stylesheets clean and well documented.
Naming CSS is hard. Giving semantic names (describing the element, not what the element contains) helps, but sometimes you need a slight variation for a given element and you end up with either very bad names or a specificity problem.
In CSS everything is global, grouped through selectors. This can bring a lot of redundancy to stylesheets. A lot of redundancy brings bloat — heavier files for your browser to handle.
CSS is fragile. Pages and elements breaks easily and in the most unexpected ways.
Two CSS properties walk into a bar.— Thomas Fuchs (@thomasfuchs) July 28, 2014
A barstool in a completely different bar falls over.
You have to pay attention to consistency. If you don't have a scale for paddings, margings, fonts, and z-indexes, things will get out of hand very quickly. You'll wind up with elements that don't exactly fit with each other because they have a slightly different padding, margin, or font-scale.
CSS Frameworks are great when you are starting a new project. You get to the point where you can show something very fast. But sometimes you get stuck in their documentation, because you are working with the framework's naming conventions and representations of elements.
You are forced to work against the framework as soon as you need to represent components differently than what the framework offers. The framework's representation of a "card" might not be yours. You might need something a bit different, so you start overwriting the parts that you want to change, which means tracking down what you want to override (or writing it from scratch), leading to writing more CSS and delivering heavier stylesheets.
My first reaction to Tachyons was disbelief. The classes were so cryptic (and abundant)! Check out this example below, it's a card for a talk on dnstudy:
There is definitely a learning curve here! What does
db mean? But you are going to have a learning curve no matter which framework you use.
The advantage here, is that once you know that
padding all the element with 3 units, and that
display: block you can apply this knowledge everywhere.
With other frameworks, the card above might have been called
card, with a need for a rigid HTML structure underneath with elements named
card-author. But if you wanted to use
card-author somewhere outside of a card, you may get stuck. You would have to search for something similar or, again, write your own.
The fastest prototype tool that I have tried
With Tachyons, because you focus on styling the element in the HTML, your focus stays in the HTML file instead of jumping between the CSS classes in both the HTML and the CSS files.
Tachyons brings consistency to our projects. We normally use a few scales: typography, spacing, and colors; however I found the scales in Tachyons better suited and easier to use than the ones I wrote. So I'll be switching to them in older projects.
The spacing scales and layout classes are probably the best gateway drug to Tachyons. Because Tachyons is modular, you can simply start with just that, and after a while, you might find it compelling to pull more of Tachyons into your projects. The documentation is fantastic and was very helpful to get us started.
Build, group, extract
We are continuing to use Tachyons on our upcoming projects, and experimenting with abstracting what we identify as big components into common classes; so it's easy for people starting on new projects to grab Tachyons with a short set of "DNSimple" styles to represent DNSimple concepts. This is a long term project, but you can check out our first steps in that direction today. We definitely don't want to create our own CSS framework…the world does not need another CSS framework.
These bigger components all start with Tachyons, so we are still experimenting how to scale them out.
If you are thing of giving Tachyons a try, I suggest you do. You might be surprised at the results. Start with our 5 minutes with Tachyons and let us know what you think.
Appreciates the finest things in life: clean code, good illustrations and carrot juice. Someday he will run a marathon.
We think domain management should be easy.
That's why we continue building DNSimple.
Elapsed time with Ruby, the right way
Elapsed time calculations based on Time.now are wrong. Learn why they are wrong and how to fix them.
What's in a DNS response?
DNS queries and responses fly across the internet all day, but we don't often take a look at what's inside of them. Today we do.