nscss

NSCSS

CSS for Components

What is it?

How it works?

• Static styles by source order

Features

• Scoping for component
• Override with scoped selector
• Override by component
• Override public scoped parts
• Custom states
• Theme - Global Theme / Per StyleSheet Theme (TODO)
• Framework Agnostic
• Easy debugging - readable CSS Class Names
• Great Feedback

Native css support

• @media query
• @font-face
• Animations (TODO)
• Pseudo Classes / native states
• Child & Attribute selectors

Syntax

• Styles As Object Literals
• As Template Literals?
• Typescript

React integration

• SSR
• Component definition

Plugins

• Vendor Prefixing hook
• Extract CSS File
• IDE Plugins

Concepts

Stylesheet defines semantic scope parts:

Single deceleration:

• root - ?
• class - ?
• component - ?
• scoped class - ?

Composition:

• selector - composed from defined parts

Usage

{NSCSS}
{
    "component" : StyleShh
}