I was doing some styling in CSS for a project recently and had an idea for changing the way I write CSS. I have been learning and using CSS for about 2 years. Up until now, I have written CSS in a very straightforward way, only indenting declarations, but never selectors. The end result looks something like this:

p {
  attribute: value;
  attribute: value;
  ...
}

p span {
  attribute: value;
  attribute: value;
  ...
}

Very plain and simple CSS. But I noticed that as my projects become larger and larger, it becomes hard to determine which elements are at the top level and which elements are descendants and if so, what elements they are descendants of. Well-structured HTML (as well as Java, Python, PHP and pretty much every other language) makes use of indenting to easily identify the order of elements.

I wondered if applying these indenting rules to CSS would make it any easier to read. The new CSS file would read like this:

p {
  attribute: value;
  attribute: value;
  ...
}
  p img {
      attribute: value;
      attribute: value;
      ...
  }

  p span {
    attribute: value;
    attribute: value;
    ...
  }

    p span em{
      attribute: value;
      attribute: value;
      ...
    }

Applied to a large file, I think this method makes reading CSS much easier, especially for an outside person looking at the code for the first time.

What about you? What methods, if any, do you use while writing CSS (or other code)?