I've said previously that JSS is a lot like CSS. What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language.

If that blurb were written about JSS, it'd sound a little like this:

JavaScript Style Sheets (JSS) is a style sheet language used to describe the presentation (that is, the look and formatting) and functionality of a document written in HTML.

In this article, we will look at the syntactic structure of a JSS stylesheet. We will also talk briefly about including JSS stylesheets in your HTML documents.

At this point, some people may be wondering: aren't we mucking up CSS by combining functionality and presentation in the same place? This is a valid concern. However, just because we can combine presentation and functionality in JSS, doesn't necessarily mean we should. A good JSS site will have two or more JSS stylesheets: one for JSS styles (if they are needed) and one for JSS event properties. JSS event properties will be covered in a future article.

Syntactic Structure

Let's get back to the CSS/JSS connection. What do people do with CSS? They write stylesheets. More specifically, they write rules. In JSS, we write rules too. In fact, we write them in a very similar format to CSS, although with some important differences owing to the fact that JSS stylesheets are actually JavaScript programs. Here's the basic format of a CSS stylesheet:

rule-selector-a
{
  property-a: value-a;
  property-b: value-b;
  ...
}

rule-selector-b
{
  property-a: value-a;
  property-b: value-b;
  ...
}

...

In JSS, we use pretty much the same format, with the differences being the addition of boilerplate code (1), quoted selectors with colons (2), underscores instead of dashes in property names (3), quoted values with commas (4) and commas between rules (5). The JSS format is shown below:

$.jss.declare({ // (1)

"rule-selector-a": // (2)
{
  property_a: "value-a", // (3) and (4)
  property_b: "value-b",
  ...
}, // (5)

"rule-selector-b":
{
  property_a: "value-a",
  property_b: "value-b",
  ...
},

...
}); // (1)

Let's talk a bit about each of these difference:

  1. Boilerplate code. This is an unfortunate side effect of having to use JavaScript to extend CSS. Fortunately, it's the same for each JSS stylesheet, so it's not too much of a hassle to remember.
  2. Quoted selectors with colons. Since the selector portion of a JSS rule is a string, it must be represented in JSS as a JavaScript string. All strings in JavaScript must be either single-quoted (as in 'Hello!') or double-quoted (as in "w00t w00t"). The colon following the selector is a necessity as internally, JSS selectors act as keys in a JavaScript object. A JSS selector may be any valid jQuery selector.
  3. Underscores instead of dashes in property names. This is not strictly true, although using underscores instead of dashes is the recommended way of representing JSS properties. Consider, for example, the font-family property from CSS. This can be represented in 3 ways in JSS:
    1. font_family
    2. "font_family"
    3. "font-family"
  4. Quoted values with commas. Unlike CSS, all values in JSS are quoted with either single or double quotes. Furthermore, between declarations, there must be a comma.

    // This is correct.
"rule-selector-a":
{
  property_a: "value-a",
  property_b: "value-b"
},

// This is incorrect.
"rule-selector-b":
{
  property_a: "value-a",
  property_b: "value-b", // This declaration should not 
                         // have a comma.
}
  5. Commas between rules. Like declarations, each rule must have a comma between it: 
    "rule-selector-a":
{ ... },

"rule-selector-b":
{ ... } // Make sure the last rule has no comma after it.

Loading JSS and JSS stylesheets

Now that we understand the syntactic structure of a JSS stylesheet, it's time to take look at how we include them in an HTML file. Every page that makes use of JSS will have the following structure:

<html>
  <head>
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.jss.js"></script>
    <script type="text/javascript" src="sheet-1.jss.js"></script>
    <script type="text/javascript" src="sheet-2.jss.js"></script>
    ...
    <script type="text/javascript" src="sheet-n.jss.js"></script>
  </head>
  <body>
    <!-- Your website here. -->
  </body>
</html>

Let's quickly go through the components here. The first script tag includes the jQuery library, which is required by JSS. The second script tag includes the JSS jQuery plugin, which is the brains of JSS, and is required for any JSS stylesheet to work. All the script tags after that are the JSS stylesheets that you wish to load.

As you can see, you can add an unlimited number of JSS stylesheets, and when the page loads, they'll be applied in the same order they are included in the page. Keep in mind, however, that if you're including many script tags on a single webpage, it is advisable to use some sort of JavaScript loader.