Authored by Primate

A rather awesome, informative
and witty blog about all things web

Get your styles in order

img{ color: rainbow; filter: blur(5px); }

ABCSS or property grouping? This wasn’t a question I’d asked myself before reading an article titled Ordering CSS for Everyone. I’ve been writing CSS for quite a long time, and during that time I’ve built up a preferences on how I like order and organise style properties. It had never occurred to me that there were named systems, but of course there are, it makes perfect sense.

If you currently don’t order style properties in your stylesheets, then I would recommend giving it a shot. There are two approaches you could take. You could either follow ABCSS, where each property is listed alphabetically, or you could order by property groups. So for example you would group all typography properties together, and you could list all positioning properties together.

I won’t talk about ABCSS or Grouping too much. It’s simple either group properties alphabetically or group related properties in whatever way you see fit. What I will go into however is why you might want to order at all. In short you probably should follow ABCSS or grouping because:

  • You won’t write duplicate style properties in one style block, which can actually be very common in unorganised stylesheets.
  • It makes your stylesheets more readable. If you are consistent with the ordering system you use, you know exactly if a property is declared or not when scanning a style block.
  • If you work as part of a team, structure makes it easier to pick up and modify styles written by a colleague.

As I see it, these are the three main reasons why it’s good to formalise the structure of the CSS you write. May seem basic, but really these are ‘biggies’.

The system I’ve come to use

The way I like to order CSS declarations is by grouping similar properties. I’m not a fan of having new lines for each CSS declaration as it just seems really inefficient to my eye. That being said, I’m not a fan of long lines either. If you have to horizontally scroll (or even worse use word wrap), that just makes my insides squirm! So the challenge then is to have groupings of properties on a single line, but groupings which are not so large that lines become too long.

The order I like to use is as follows (I use SASS by the way):

.identifier {
    // Extends (single line per each)
    // Includes (single line per each)
    // Display and positioning
    // Typographic properties
    // Decorative properties

    // Child styles (element selectors)
    // Child styles (class selectors)

    // Pseudo selectors

    // Modifications (combined selectors)
}

This structure works really well for me, and I enjoy using it. I find that it leads to readable code, and the groupings seem logical.

As for the inner order of groupings, I do have a structure I follow. At this point I have to try hard not to be too obsessive. There is a place for every selector, and using the ‘display’ grouping as an example, I would use the following order:

z-index, display, position (including top, bottom etc..), float, padding, margin, width, height, clear.

Here is an example of how this plays out (taken form a project):

.contact_cta {
  @extend %wrapper;
  padding-top: $bl; padding-bottom: $bl; clear: both;
  color: white;
  background: blue(2);

  a {
    color: white;

    &:hover { text-decoration: underline; }
  }
  ul {
    @include clearfix;
    position: relative; padding: 0 0 0 1.5em;
    font-size: 1.3em; line-height: 1.5em;

    & > li {
      @extend %small_para;
      position: relative; float: left; margin-right: 1em;
      color: white;

      span { display: none; }

      &:last-child { margin-left: 0; }
      &:before {
        @extend %icon_phone;
        display: block; position: absolute; top: 0; left: 0;
        font-size: 1.2em;
      }
      &.email:before { @extend %icon_envelope; }
    }
  }
}

Quite a lot to remember

There is an investment in learning the structure detailed above. It takes a little time to feel inherently comfortable with the structure, and to be able to intuitively write your CSS in this way. It’s natural for me to write my CSS in this way, but not so for my colleagues.

If you are interested

The original article which prompted me to share my CSS structure was Ordering CSS for Everyone, which was written by Scott Ohara. Scott advocates the use of ABCSS, and includes a link to the Google styleguide. Google also advocate the use of ABCSS.

Nicolas Gallagher has created a resource titled Principle of writing consistent, idiomatic CSS which can serve as a nice starter style guide. It shows an example of grouping selectors, similar but with differences to what I use.

CSS-Tricks performed a poll on ‘How do you order your CSS properties?’. The results were that 45% of the participants like to group by selector type, and 39% admitted to randomly entering selectors and following no structure.

There are tools out there such as CSScomb which will re-format your CSS based on rules.

In closing

I didn’t want to write too opinionated a blog article, but more of an introductory article. As I’ve progressed as a CSS/SASS developer, I have really come to look for repeatable structure where I can. When I open up a stylesheet and look at a declaration block, personally I really don’t wan’t to have to search for a property. Creating and following a structure whatever it may be stops this.

Whether it’s ABCSS or grouping properties, I would really recommend structuring the CSS you write. If you work alone, great you can really find what works for you. If you work as part of a team, search for the what works best for the team.

Image credit: Jenni Waterloo

If you liked this article then why not subscribe to our RSS feed.

Author: Chris Lamb

Chris is terrible at coming up with taglines.

Comments

Leave a Reply