In the previous article I gave an introduction to CSS preprocessors and explained the potential advantages of using this technology. One of the mentioned examples was the ability to break down your stylesheet into multiple files and join them together to create a single final CSS file. This method provides a clean hierarchy for managing stylesheets.

My preferred pattern for the architecture of a preprocessed stylesheet is as follows:

  • Settings
  • Libraries
  • Modules
  • Views

First include the settings for my project (colours, fonts etc. in variables).

Secondly library code you have, for example, reset.css should be included.

Next I include my global styles and separate them into manageable modules. e.g. Links, Forms, Tables.

Finally I include my view related code for specific web pages and any overrides that are required. For example, a "view" could be the website home page as it usually differs from the rest of the website.

Example LESS.js Stylesheet

# screen.less

// Import settings
@include "settings/global.less";

// Import libraries
@include "libs/reset.css"; // Notice the .CSS extension

// Import global modules
@include "modules/core.less";
@include "modules/links.less";
@include "modules/forms.less";
@include "modules/site_header.less";
@include "modules/site_footer.less";

// Import views
@include "views/home.less";
@include "views/contact.less";
@include "views/admin.less";

Although the syntax is in LESS, this will also work with SASS using the import command

Settings

In the settings file I list global variables that will be used throughout my included files. These variables contain font sizes, families and colours.

# settings/global.less

@font-s: 12px;
@font-m: 14px;
@font-l: 16px;
@font-xl: 21px

@font-family: Verdana, Arial, sans-serif;
@font-heading: "Trebuchet MS", @font-family;

@col-primary: #ed1c24;
@col-accent: #f7941d;
@col-bg: #fff;

Libraries

At this point, beyond including any smaller 3rd party libraries I would now include any custom mixins that are to be used globally, for example convenience methods for CSS3 functionality.

# mixins.less

// Apply a border radius 
.radius(@size: 5px) {
    -webkit-border-radius: @size;
    -moz-border-radius: @size;
    border-radius: @size;
}

// Rotate an element
.rotate(@deg: 180deg) {
    -webkit-transform: rotate(@deg);
    -moz-transform: rotate(@deg);
    transform: rotate(@deg);
}

Use of modules

The modules included in a stylesheet are always different depending on the requirements of the project. Commonly I find there is always a need for the following modules, feel free to edit as needed:

  • Core
    • <body> styles
    • Browser overrides
    • Commonly used classes, e.g. "clearfix"
  • Headings
  • Links
  • Forms
  • Tables
  • Notifications
    • e.g, "success" and "error" messages.
  • Buttons
  • Global site elements
    • header, footer etc.

Views

A view is defined as a specific page of the the web site with a specific style that cannot be described with global module definitions alone. For example, this can be the home page which normally has unique elements.

Creating a views/home.less provides a good place to put special style definitions. Often I target the special view by putting a classname on the <body> tag.

HTML:


LESS: