Nested CSS classes are difficult to override

[ryanb]

I find it difficult to customize Wallaby CSS because of the deep nesting. One needs to mimic the nesting in order to add our own CSS.

If CSS is defined in a flat structure then it will be much easier to extend and override.

For example:

# Before
.foo {
  .bar {
  }
}

# After
.foo-bar {
}

Also only adding CSS to classes instead of direct HTML tags will be good too. For example:

# Before
.foo {
  a {
  }
}

# After
.foo-link {
}

[tian-im]

Yeah, that was the ideal structure. Need to spend some time to get it there now. Thanks for bringing this up!