Here’s a problem I’ve seen in a couple of projects that I’ve worked on that use SASS (although it can happen with plain ‘ol CSS or SCSS).

1
2
3
4
5
6
7
8
9
10
11
12
13

// ...imports and such

body.bp
  +blueprint(true)

  #header
    // styles
  #content
    // styles
    h1
      // styles
  
  // and so on...

In fact, everything was scoped underneath body.bp!

This is a smell. You’re more likely to write something like this is you happen to be using SASS instead of CSS because it’s so convenient to nest things. Think about the styles you write and remember to be a clean coder by writing for maintainability and reuse.

You should not nest IDs under another selector - unless it’s actually important that the style change based on what the element is contained in, but in that case you should probably using a class to style the element anyway.

Too much specificity makes using the cascade more difficult. In the example above, in order to override the styles for the a first level heading in the content, you need to write a selector for body.bp #content h1. If that body.bp never changes you’re just making life more dificult for anyone you work with (including your future self).

If I can’t see the root of the nesting of a style without scrolling in my editor, it’s nested too deep. This gives me a feeling similar to the callback hell that you can get in JavaScript. Don’t do it.

I just setup this blog with Octopress. Real content forthcoming.