Homepage Resume Book Recommendations Blog

On CSS coding style

The problem I've started noticing recently is that not many developers agree with the coding style I use for CSS, they get quite defensive and cannot articulate why they don't like it. And I myself, of course, can get quite religious about that, but, I believe, for good reasons, which I will list here. But first, let me show you the coding style I prefer to use (prepare to be offended):

.element      { font-size: 1em; margin: 0 0 0 0; padding: 1em; color: green; }
.otherElement { font-size: 1em; margin: 0 0 0 0; padding: 1em; color: green; }

You get the picture. Selectors are in (almost) camel case, all properties are on the same line. This enrages people. Because they prefer the following style:

.element {
  font-size: 1em;
  margin: 0 0 0 0;
  padding: 1em;
  color: green;
}
.other-element {
  font-size: 1em;
  margin: 0 0 0 0;
  padding: 1em;
  color: green;
}

Which is all fine while you have 10-12 selectors and your site is small. But as it grows, what you want to see in a .css file is some sort of structure, so that by mere glancing at it you get the whole picture. This becomes even more useful when you're using scss with nested selectors. And yet, if you keep writing properties each on a new line, it becomes fairly difficult to see the structure and navigate the file. And of course I understand you need to break files and I do usually have a well structured css directory with components and mixins and all sorts of partials. Even then I have .css files which are reasonably big and I have no intention whatsoever to have to scroll up and down like crazy to find what I need or understand the structure. That's not even talking about a huge screen real-estate on the right that's lost if I write each property on a new line.

Now the argument I usually hear is "But you can always enable folding in your text editor"! And indeed, yes I can. But I don't want to. It's not very convenient and why would I do it anyway if I can style the code in such a way that I don't need no damn folding! It is a mistake to rely on your text editor or IDE to do the code styling work for you.

The other thing is selector camel case naming. Why, do you ask? The reason is quite simple: much like classes in OOP, they need to be visually different from the rest of the code. It is much easier to perceive it that way, when you know that a selector name cannot be written like a css property.

So, those two simple rules are, for some reason, not very well accepted and my experience is, people generally dislike them. It almost feels like some religious tradition people keep following mindlessly. And I keep wondering why they do it, because up to this date, no one has provided me with convincing arguments against the coding style that I prefer.

Update. A friend of mine pointed out that if I'm so eager to write css properties on the same line then perhaps a function body and its statements in a programming language should also be written on the same line (and nobody does that, obviously). However, I think you can't compare a group of css properties for a selector to functions. Css properties are simple key-value pairs, while function body is a sequence of statements where order is important and where you can have a very complex logic.