At this point, we have laid out all our views according to how we want them to appear on the page and so, we can begin to look at styling them appropriately. There are three properties on SC.View that are useful for styling: classNames, tagName, and layerId.

First, we use the classNames property of the view to name one or more CSS class names that the view element will include. For example, to have the classes title-view and blue included as class names, we would add the following code lines:

titleView: SC.View.extend({
  // <div class="title-view blue …
  classNames: ['title-view', 'blue']
}),

It is a bit surprising though if you inspected the class attribute of the resulting element. You would find it doesn't just contain only the title-view and blue class names. Here is what it would be for an application called MyApp:

class="ace my-app sc-view title-view blue"

The first two classes ace and my-app are the result of themes applied by default at the application level. The application's themes add class names to every view and are used to create sets of reusable styles that can be shared across applications. Creating themes is an advanced topic beyond the scope of this book and we will simply override the default SproutCore theme as necessary to style our elements.

The sc-view class is included because the classNames property is a concatenated property of SC.View. Since SC.View's classNames array is already sc-view, calling extend on SC.View in this case results in a concatenated classNames array of sc-view, title-view, and blue.

The second property that we can modify for styling is the tagName property. This is the name of the HTML tag that will be used for the view's element and its default value is div. We can set this property to a different HTML tag in order to generate more semantic tags for our view elements.

For example:

contentView: SC.View.extend({
  // <section class="body faded …
  classNames: ['body', 'faded'],
  tagName: 'section'
})

Finally, you may also specify the ID attribute of your view's element by setting the layerId property. I have mentioned this last because it was historically frowned upon to use layerId at all. What happens is when layerId is undefined, SproutCore generates a unique value for each view, which it uses to map between the view object and its DOM element. If you were careless and created two views with the same layerId value, SproutCore would be unable to properly manage the elements for both these views, possibly leading to leftover elements in the DOM and a strange behavior.

However, as of SproutCore 1.10, I've added a warning message that will notify the developer when multiple views use the same layerId value, which should make it quite easy to avoid this mistake in the future. Therefore, I see no reason not to set the layerId value for your singleton views if you want to style by ID (which is faster than by class). Just be sure that you never have two instances of a class with the same layerId value.

For example:

headerView: SC.View.extend({
  // <header id="main-header" class="page-header …
  classNames: ['page-header'],
  layerId: 'main-header',
  tagName: 'header'
}),

So to wrap up, we have a few options with regards to how to identify the view's layer so that we can style it through CSS. You will most likely already have a CSS approach that works for you, so I will just give you these additional tips that I find useful. The first thing to know is that Sass (http://sass-lang.com) and Compass framework (http://compass-style.org) are built into the SproutCore build tools, allowing you to use SCSS syntax and all the Compass mixins to write clean and cross-browser compatible CSS. Using these tools will make your style sheets much more compact and readable and so, you should definitely research on how to use them, if you don't already know.

The second tip is to not be afraid of creating multiple style sheet files. In fact, each page file should likely have a matching style sheet file in the resources directory (for example, main_page.js and main_page.css) and a view file as well (for example, custom_label_view.js and custom_label_view.css). Since SproutCore's build tools will concatenate these files into a single style sheet for optimal loading, it doesn't matter how many files we use.

You can also use the sc_require pre-processor command inside the style sheets to alter their load order. So, you may want to create a single style sheet with SCSS mixins and variables and require it before your other style sheets.

Let's look at a full example of how we may style a simple heading view. The following examples are the relevant contents of the files we would use.

In my_app/resources/main_page.js:

// This page describes the main user interface for your application.
MyApp.mainPage = SC.Page.create({

  mainPane: SC.MainPane.extend({
    childViews: ['headingView'],

    headingView: SC.View.extend({
      // <header ...
      tagName: 'header',

      // … id="heading-view" ...  (This must be unique!)
      layerId: 'heading-view',

      // … class="sc-view white-text shadowed" ...
      classNames: ['white-text', 'shadowed'],

      // … style="height: 55px; top: 0px; right: 0px; left: 0px;">
      layout: { height: 55 }

    })
  })

});

In my_app/resources/style_guide.css:

// Include the Compass CSS3 mixins.
@import "compass/css3";

// Common shadowing for divs.
.sc-view.shadowed {
  // Compass has powerful mixins to save us time.
  @include box-shadow(rgba(0,0,0,0.5) 2px 2px 5px);
  overflow: visible;        // .sc-view hides overflow by default
}

// Common white text for dark backgrounds.
.white-text {
  color: white;
  text-shadow: rgba(0,0,0,0.3) 0 1px 2px;
}

And in my_app/resources/main_page.css:

// We can use sc_require inside of stylesheets to determine the load order.
// Requiring style_guide.css means that the Compass mixins are available here now too.
sc_require('resources/style_guide.css'),

// SCSS variables makes it easy to quickly tweak styles.
$heading-height: 55px;

// The heading view.
#heading-view {  
  @include background-image(linear-gradient(top, #c13400, #982900));
  line-height: $heading-height;
}