Untangle Your CSS for Smoother Sailing
In The Next Web Conference: A conference article about stylesheets and how to write organized and readable code.
We all know that we should write our CSS in a clean and well-organized way, right? Yet even the best of us have worked on projects that made us cringe at the sight of their stylesheets.
As developers, we’re always looking for ways to improve the products we build and ourselves as professionals. We want to be able to craft better user experiences, but also deliver higher quality code in less time. It turns out that good CSS is an essential part of both achieving those goals.
The Next Web Conference: A conference article about stylesheets and how to write organized and readable code.
TNW Conference, our tech conference in Amsterdam, is coming up fast. The event will feature a variety of talks about technology and its role in the future. One such talk is given by Max Böck, who works at contentful.com as a front-end developer and designer.
Max’s talk is called ‘Unminify Your CSS: Untangle Your CSS for Smoother Sailing’ and will focus on writing organized and readable code.
If you haven’t already bought your ticket, get one here!
In the meantime, we asked Max a few questions about his background, his thoughts on CSS and what he hopes to teach his audience at TNW Conference. Here’s what he said:
The Next Web is a two-day conference about technology and startups held annually in Amsterdam, The Netherlands. There was a session at the 2012 edition where Paul Irish spoke about how to unminify your CSS. The presentation of the article is pretty awesome and contains some nice examples.
But what does he mean by unminify? He talks about three types of CSS minification: strip whitespace, strip comments and replace variable names with shorter ones (which he refers to as obfuscation). And his advice for writing better CSS is to avoid each of these practices.
The whole article is worth reading, but here are some useful summary points:
• Write clean code
• Don’t write a style guide in your code, use a separate file instead
• Use readable selectors: they should be explicit and short (eg. .navigation instead of .nav)
• Avoid nesting rules too much: no more than three levels deep, otherwise you end up with overly specific selectors that will cause specificity conflicts later on
• Use consistent formatting within blocks of related properties (eg. margin-top, margin-bottom, margin-left and margin-right should always be listed in that order)
If you are a designer or developer who has ever had to write or maintain CSS, you know how annoying, frustrating and time consuming it can be. If you have ever inherited someone else’s CSS, then you know all too well why this is the case.
If the code is not organized in a specific way and/or is not written in a clean and consistent fashion, then it becomes increasingly difficult to maintain as your project grows. In some cases, you may even find yourself reverting back to the original ideas behind CSS – writing inline styles on each element by hand.
One of the things I found most important when I started working on my CSS was that I needed to take my time and ensure that I was following best practices and using standards-based coding techniques. This meant writing my CSS such that it was readable and easy to understand as well as flexible enough such that one property change would not have drastic effects elsewhere in my project.
In this article, I will share with you some of the tips and tricks I use when developing new stylesheets from scratch or when refactoring old ones. By applying these tips and tricks, you will be able to write better structured, more organized, more readable, more maintainable and more reusable CSS for all of
SASS and LESS are both CSS pre-processors which can be very helpful if you’re working on a non-trivial CSS project. They can help keep your stylesheets organized by allowing you to break them into smaller files. You can also use variables, mixins and functions to write more efficient code that’s easier to read and maintain.
Using a CSS pre-processor won’t “unminify” your code, but it will make it easier for other people to read it and contribute to it. SASS used to be my preferred pre-processor, but LESS is gaining in popularity. It has a syntax similar to CSS so it’s easier for people who already know CSS to pick up.
When you first start writing CSS, it can be a bit overwhelming. It’s hard to know what’s right and what’s wrong, and there are a lot of different ways to do everything.
Spacing, indentation, casing, shorthand—there are a lot of conventions you can use to make your CSS more readable and manageable.
In this article I’ll go over some of the techniques I use when writing CSS that help make it easier to read and maintain.