Concept

Named Cascading Style Sheets is a naming convention and guideline for semantic CSS.

Why

Massive CSS used to be a nightmare while working on projects with different kinds of developers. The lack of conventions and guidelines are going to lead to a unmaintainable ball of mud.

Goal

A predictable grammar for CSS that provides semantic information about the HTML template.

  • What tags, components and sections are affected
  • What is the relation of one class to another
Edit on GitHub

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
	letter-spacing: 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