Ruleset

Don't mess around with global tags.

Bad, you are going to override global tags on pages and sections with a different layout:

h2
{
	color: red;
}

.content h2
{
	color: blue;
}

.sidebar h2
{
	color: green;
}

Good, you kept it clean and simple:

.title-content
{
	color: blue;
}

.title-sidebar
{
	color: green;
}
Don't mess around with global font-size and letter-spacing.

Bad, you are going to end up in a nightmare of resetting all kind of children elements:

body
{
	font: 1.5em/2em arial;
}

h2
{
	font-size: 0.75rem
	line-height: 0.5rem;
}

Good, you made it without a calculation:

.body
{
	font: 1em arial;
}

.title-content
{
	font-size: 1.125em;
}
Don't reset properties to it's default values.

Bad, you specified a selector that contains unwanted elements:

.list-menu li
{
	margin-bottom: 0.25em;
}

.list-menu li:last-child
{
	margin-bottom: 0;
}

Good, you kept it clean and simple:

.list-menu li:not(:last-child)
{
	margin-bottom: 0.25em;
}
Don't describe properties and values.

Bad, you are going to reset most helper classes once you use the same HTML template for a different layout:

.is-float-right
{
	float: right;
}

.is-layout-two .is-float-right
{
	float: none;
}

Good, you decoupled the layout from the HTML template:

.is-layout-one .link-back
{
	float: right
}
Don't mix namespaces and naming conventions.

Bad, you made it even worse:

.ui-accordion-header.foo-is-active
{
	color: red;
}

Good, you followed the standards of the third party library:

.ui-accordion-header.ui-state-active
{
	color: red;
}
Edit on GitHub