NCSS is a naming convention for semantic CSS. Get rid of reading your HTML again and again to find out what elements, tags and sections are affected.

Massive CSS on larger projects used to cause issues:

• Teamwork without uniform conventions
• Missing context to the project's layout and structure
• Big ball of mud instead of modularization
• Lack of inline documentation
• No possibility for automated validation

There is no specification the use hyphen, underscore or camelcase for your classnames - it is upon your personal preference, but we recommended to use the language's native hyphen style.

Named Cascading Style Sheets are divided into:

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

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

Syntax: .{context} and .{context}-{name}

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

Syntax: .component-{name}

Type classes are the foundation to write re-usable, modular and semantic CSS - tell the reader what kind of elements, tags and sections are affected. Keep in mind that structural tags are rather unsuitable to contain a type prefix.

Syntax: .{type} and .{type}-{context}

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: .{type}-{state} and .{type}-{context}-{state}

Syntax: .{type}-{size} and .{type}-{context}-{size}

Syntax: .{type}-{position} and .{type}-{context}-{position}

Functional classes using pure CSS are marked with the is, no, has and fn prefix. Javascript enhanced and therefore re-usable classes on the other hand can be identified by the js prefix. Each of them should never have styles for painting, use an additional type class for this purpose.

Syntax: .is-{state}, .has-{context}, .no-{feature} and .fn-{action}

Syntax: .js-{action} and .js-{context}

Consider to pick a unique namespace once you provide a framework to third party applications or generally want to prevent naming conflicts inside your project. Never mix up namespaces and follow the pretended naming of third party components.

Syntax: .{namespace}-{type} and .{namespace}-{context}

Syntax: .wrapper-{type}

The goal of NCSS is to provide semantic information while reading CSS:

• What kind of elements, tags and sections are affected
• What is the relation and inheritance of one class to another
• Where is the most accurate place to add new declarations

• Bookmarklet
• Examples
• Variables