Writing single-line CSS is not a matter of preference.
- Adding ending slashes in HTML5 because you’re switching from XHTML is a preference.
- Using MooTools over jQuery is a preference.
- Writing curly braces in new lines is a preference.
Single-line CSS is not your preference – it’s a shitty way to code, debug and optimize and I’m gonna prove it to you right now.
Your arguments go like this:
It’s syntactically valid!
Just because you can skip whitespace in CSS, doesn’t mean you should. Sure, you are a smart cookie and you can read it very quickly, breaking long chains of well-known properties and their values in real time. CSS is rather easy.
Let’s switch gears for a while. Look at this JavaScript:
for (var l,i=0;i<10;i++){l=(i % 2)?'even':'odd';}
It’s perfectly valid and passes JSLint too. Ok, you probably know JavaScript well. Let’s try something else.
(1..16).map { |x| (1..16).map { |y| (1..16).map { |z| [x,y,z] if x**2 + y**2 == z**2} } }.reduce(:+).reduce(:+).compact
I hope one day you will have to work with stuff like this so you can understand that unreadable code is always bad code, even if it executes.
It’s quicker to write!
Probably, but the quality suffers.
I have seen many stylesheets in countless projects and those with single-line rules are almost always full of redundant selectors and redeclared properties. I’m talking about this:
.footer li h3 { margin: 0 0 6px; font-weight: bold; display: inline; color: #e92e2e; }
.footer li h3 a { font-weight: normal; font-size: 1em; color: #e92e2e; }
Color property should be declared like this:
.footer li h3,
.footer li h3 a {
color: #e92e2e;
}
.footer li h3…
When you write CSS, you need to constantly optimize. You have to reorder selectors, move properties around and shrink rulesets while new functionality is being added. You can’t just move to the bottom of file, dump and overwrite.
Single-line CSS is quicker to write when you stop caring about stuff you already coded. If you don’t remember what you code, you will end up with repetitions and bloat.
I can see much more on the screen!
Only vertically. Horizontally you have many, many problems:
- Long rulesets are being wrapped – nice column of selectors stops being nice
- With wrapping disabled, you are limited by the viewport – code bloat increases, as you won’t remember about invisible code
- Even if you refactor and move code around, you end up decreasing readability.
All of this doesn’t really matter, though. Tell me: why on Earth would you force a coding style on your peers to compensate for your shitty editor?
There are many text editors and IDEs that will take care about screen estate. Editors that can collapse unused rules or sections. Editors with project inspectors, allowing you to jump to particular selector. Or those that have powerful, tweakable capabilities.
It has smaller size!
Really. You want to compress front-end code by hand, while developing the site / application. Do you omit spaces after periods in sentences too?
Learn what minimization means and how you can do it automatically in production environment. If you have no idea how to do it yourself, your back-end guy or sysadmin will help. And if you’re a one-man-army, just Google around and use some online tools at the very end. On a copy.
If you want, you can use a reformatter. You hipster.
It will probably be the first thing I do when I must edit your code. Make no mistake – it’s not a solution, this is me fixing your shit. You don’t ask people to use Tidy on your HTML before making back-end templates, do you?
I just like it.
First, you should read about lizard brain. Second, realize that your coding style will interfere with efficiency of your co-workers. Even if you end up with someone who also writes single-line CSS, her style might be different. She may be using OOCSS approach (however strange that would be for such a messy person) and she will curse you under her breath for your screen-long selectors.
You may indeed like it, but if you ever need to work with someone else and produce high-quality code, this is not how you do it. In team environment single-line CSS will be the first reason for pouring coffee on your new MacBook.
If you’re a lone hunter, do what you like. Browse 4chan, smoke, have 5 espressos a day, whatever. But don’t tell me I should not criticize you for writing single-line CSS. If I care enough to do this, you probably deserve to be better than you are right now.