What are the best practices of nesting html elements in order to keep things reusable, readable or easy to manage?

Question

For example, a typical navigation could look like this:

nav.main-nav
  ul.main-nav-list
    li
      a

But what if I want to limit the width