CSS is Designed for Browsers - not for Programmers.

Typical CSS files are totally unstructured and hard to maintain. Styles are seldom fully qualified leading to hard to debug conflicts between style definitions. Changing one value often brings the need to change numerous other definitions that are related (f. e. width and paddings).

JSS brings you

nested style definitions

automatically full qualified selectors

value calculations

cross browser properties and values

utility functions

Nesting Style Definitions

One of the main disadvantages of CSS is its flat structure. This makes it difficult to define all styles belonging to one HTML element at one place.

Defining styles for a header sections #header looks like this in CSS:

#header{

... /* general #header style properties */

}

#header a{...}

#header img{...}

#header a.selected{...}

#header a:hover{...}

#header a img{...}

#header a:hover img{...}

JSS makes it possible to nest style definitions. This is how the above style looks in JSS:

All link styles together with all its variants are defined in one place. If you need to change the hover effect of a link in the header section it's easy to find and change. And this change will not effect hover effects of links in other sections.

Full Qualified Selectors

JSS automatically leads to CSS where all selectors are fully qualified. This avoids conflicts with style definitions of other HTML sections. Never use !important anymore just because you got lost in your CSS-Code.

Calculation

Because JSS is "evaluated" as JavaScript you can use variables and calculate values:

"#header": {

padding: JSS.padding,

width: JSS.width - JSS.padding

}

Intelligent Property Processing

Each browser defines its own proprietary style properties. If you need to specify a border radius for example you typically write:

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

The JSS processor knows that this is a pain. So in JSS you simply write

border_radius: 5

The JSS processor knows that "border-radius" needs special treatment and generates the proper CSS definitions for you.

Utility Functions

The JSS processor provides utility functions you may use in your JSS code.