A lot of the CSS rules here and below are more specific than is necessary. Also, direct descendants make the DOM brittle. There should be a compelling reason to use direct descendants, like when you need to style an unordered list inside another unordered list. Say in the future you need to wrap the <a> in a container (because the design changes), the CSS would mysteriously break and you would have to debug it. You usually want compound selectors to be relatively simple rather than complex:
.sidebar-links div.selected > a => .sidebar-links .selected a
.sidebar-links div.link-yellow > a => .sidebar-links .link-yellow a
.sidebar-links div .sub-links a => .sidebar-links a
A lot of the CSS rules here and below are more specific than is necessary. Also, direct descendants make the DOM brittle. There should be a compelling reason to use direct descendants, like when you need to style an unordered list inside another unordered list. Say in the future you need to wrap the
<a>in a container (because the design changes), the CSS would mysteriously break and you would have to debug it. You usually want compound selectors to be relatively simple rather than complex: