NCSS

Named Cascading Style Sheets are divided into:

• Namespaces
• Structural Classes
• Component Classes
• Type Classes
• Modifier Classes
• Functional Classes
• Exceptions

Edit on GitHub

Pick a namespace once you provide your library to a third party or need to prevent naming conflicts inside your project.

Syntax

.{namespace}-{context}

.{namespace}-{type}

Overview

Edit on GitHub

Structural classes provide a semantic context for the underlying elements and are preferably utilized to define a layout.

Syntax

.{context}

.{context}-{name}

Overview

Edit on GitHub

Component classes provide a group context for the underlying elements and are preferably utilized to define a working unit.

Syntax

.component

.component-{name}

.component-{context}

Overview

Edit on GitHub

Type classes are the foundation for reusable, modular and semantic CSS to provide the reader what elements, tags and sections are affected.

Syntax

.{type}

.{type}-{name}

.{type}-{context}

Overview

Edit on GitHub

There is no limitation to extend your type classes with individual state, size and position modifier. Proper handling of context and type should prevent the need of adjoining classes.

Syntax

State related syntax:

.{type}-{state}

.{type}-{context}-{state}

Size related syntax:

.{type}-{size}

.{type}-{context}-{size}

Position related syntax:

.{type}-{position}

.{type}-{context}-{position}

Overview

Edit on GitHub

Functional classes using pure CSS are marked with the is, no, has and fn prefix. JavaScript enhanced and therefore reusable classes on the other hand can be identified by the js prefix. Each of them should never have styles for painting.

Syntax

Pure CSS related syntax:

.is-{state}

.has-{context}

.no-{feature}

.fn-{action}

JavaScript related syntax:

.js-{action}

.js-{context}

Overview

Edit on GitHub

There are exceptions that are not following the specifications.

Syntax

.wrapper

.wrapper-{name}

.wrapper-{context}

.wrapper-{component}

.wrapper-{type}

Overview

Edit on GitHub