Example mapping of preprocessed CSS to semantic HTML

style.scss

nav#primary {
	ul {
		li {
			a {
				&:hover {
				}
			}

			// context
			&.home {
				a {
				}
			}
			&.news {
				a {
				}
			}
			&.contact {
				a {
				}
			}

			// states
			&.selected {
				// example code reuse using Sass @extend
				@extend .highlight;
			}
		}
	}
}

template.html

<nav id="primary">
	<ul>
		<li class="home selected">
			<a href="#">Home</a>
		</li>
		<li class="news">
			<a href="#">News</a>
		</li>
		<li class="contact">
			<a href="#">Contact</a>
		</li>
	</ul>
</nav>