CSS Coding Standards

CSS can be implemented a variety of different ways.

Jojo CMS has a unique handling of CSS...
  • The source files are opened by Jojo
  • CSS is optimized by removing whitespace
  • CSS is optimized again by removing empty and repeated declarations
  • Multiple CSS files are squashed into one file to save on HTTP requests
  • The CSS is cached in the database so it can be retrieved faster for the next visitor
  • The CSS is GZipped before sending it to the browser


Often, this process results in a 90% saving from the original size.

Compatibility

While we make every effort to have this system work with all CSS, some coding styles do trip up our optimizer.

To ensure your CSS will work, we recommend the following coding standards for CSS...

Example

#content {
width: 600px;
border: 1px solid #999;
background: #fff;
}

CSS guidelines

  • CSS should be spaced across several lines for readability
  • CSS declarations should be indented with 2 spaces (not a tab). These will be removed by the optimizer at the output stage.
  • A space should be included after the colon. Once again, this will be removed automatically, but allows for greater readability.
  • Some browser hacks may cause problems with the optimizer. We recommend you place your browser hacks in "ie.css" and use conditional comments to prevent good browsers from reading them.

Other CSS guidelines

CSS can be used in many different ways, and some ways are more efficient than others. Our mission is to keep the HTML code as lightweight as possible, and transferring as much work as possible into the CSS file (which gets cached by the browser).
Some sites have code such as <p class="heading">Heading</p> which can usually be replaced with <h3>Heading</h3>.