mysociety/alavetelitheme — pull request #23 by zarino (2014-08-08 14:58:34+00:00)
Title: Reduce potential confusion by using placeholder selectors for menu item styles

I'm working on a slightly customised version of this theme for a customer. I spent a while trying to work out where `.menu-item`, `.menu-item-hover`, and `.sub-menu-item` appeared in the Alaveteli source code, since the selectors' presence in the [sass file](https://github.com/mysociety/alavetelitheme/blob/7b290c301aad8bb078b7e95b492d9a2936a6c58e/assets/stylesheets/responsive/custom.scss#L56) suggested elements with those classes actually exist somewhere on the site.

```
/* General styling of nav menu items */
.menu-item {
text-decoration: none;
…
}

/* Selected menu item */
.selected-menu-item {
font-weight: bold;
…
}

/* Styling if not part of the main menu on larger screens */
.sub-menu-item {
@include respond-min( $main_menu-mobile_menu_cutoff ){
…
}
}
```

As it turns out, there are no elements with those classes – they're only defined to be extended later on in the file.

Since Sass 3.2, it's become best practice to [define such styles as "placeholders"](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders), with a selector beginning with a `%`. Styles defined this way won't be compiled into the stylesheet unless they're extended. But more usefully, the `%` at the beginning is a clear sign to developers that the style is made to be *extended* rather than used in HTML directly.