Question

I was wondering if something like this can be done in CSS. I want to be able to group css so that I can I don’t have to write it like this.

 .wrapper .header {do: something};
 .wrapper .nav .firstMenuItem {do: something};

[div id="wrapper"]
   [div class="header"]
      [div class="nav"]
         [ul]
            [li class="firstMenuItem">First Item</li]
         [/ul]
       [/div]
   [/div]
[/div]

Instead, I would like to do something like this but I’ve never seen it being used like this

 .wrapper
 {
      .header .nav {do:something;}
      .header .nav .firstMenuItem
      {
         do: something;
      }
  }

Answer 1

You can do this with LESS and SASS

However, before going too far down this road I recommend you read a little about Object Oriented CSS. (Some good tips from people who have experience with large projects)

LESS example:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

SASS example:

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}