Design and Prototyping for Drupal

Working with LessCSS: Organizing Your Stylesheets

Confession: I’m hyper-organized when it comes to my CSS. Everything is ordered and numbered, with a table of contents. Call me OCD, but it works.

Whether I’m working in straight CSS or Less, every file starts about the same. Here, for example, is the table of contents for my Urban Homesteaders Unite theme:

/*
Custom styles for Urban Homesteaders Unite
Authors: Dani Nordin, tzk-design.com and Tricia Okin, papercutny.com

**Table of Contents**

1.0 Colors & Fonts
    1.1 Colors
    1.2 fonts
2.0 CSS3 Behaviors
3.0 Page Defaults
4.0 Navigation Menus
5.0 Drupal Defaults
6.0 Custom
7.0 Typography

*/

This way of organizing your CSS allows you to set up your page defaults near the top of the file, and put all your custom stuff at the bottom. This helps create a more natural flow as I’m theming; generally, I’ll start by theming the Big Stuff (fonts, color standards, etc.), and then move into page-level or template-level variables. Note that I do include the main page typography at the bottom of the file; this ensures that any of my custom typography shows up before my global page typography, and get overridden.

Setting Up Color Variables

Before I switched to using LessCSS, I would incorporate color values into my table of contents. For example:

**Table of Contents**

Color Values:
gray: #8D8D7D;
dkgray: #4D4545;
mdgray: #666;
ltgray: #999;
palegray: #ccc;

red: #D32F00;
orange: #D17103;
cyan: #47A7BF;
green: #89A155;
gold: #eeb200;

That way, if I was ...