Classnames and depth #27

The selectors are pretty unreasonable, slow, too specific, and when coupled with the nesting of a preprossor . I'd say that instead of having to do ul > li > ul > li > a there could be classnames with depth to help with this along the lines of .menu > .menu-item > .menu.submenu-1 > .menu-item.submenu-item-1 > .menu-item-link.sub-menu-item-link-1. What that would mean is that to style that menu item link, you could go from

ul > li > a { 
  color: aquamarine; 
}

ul > li > ul > li > a {
  color: firebrick; 
}

to

.menu .menu-item-link { 
  color: aquamarine;
}

.menu .sub-menu-item-link-1 { 
  color: firebrick; 
}

or

ul {
  > li {
    > a { 
      color: aquamarine; 
    }

   // assuming you'd have more style in here for the sub menu stuff
    ul {
      > li {
        > a {
          color: firebrick; 
        }
      }
    }
  }
}

to a flatter

.menu {
  .menu-item-link { 
    color: aquamarine;
  }

  .sub-menu-item-link-1 { 
    color: firebrick; 
  }
}

Even better would be allowing that menu word to be a configurable string so others can resolve their own naming conventions.