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:

"#header": {
... // general #header style properties
a: {
... // styles for links inside #header
"&:hover":{
... // what happens on mouse over in #header links?
img:{...}


},

"&.selected":{...}


},

img: {...}
}

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.

Sample:

background_image: JSS.linearGradient("white 40%", "gray 60%", "white")

will generate:

background-image: -moz-linear-gradient(white 40%, gray 60%, white);

background-image: -webkit-linear-gradient(white 40%, gray 60%, white);