CSS code organizing

I like to keep my code organized, usually in several files. It is good for CSS.
For instance:

I have three files:

• First - layout.html, this is the main template.

• Second - grid.css is style sheet where I decribe position of all elements.

• Third - style.css is where I describe appearence of elements.

Listings:

    
    The best title ever
        
    
    
    
    
        Header
    

    
    
        
        
        
        Tab 1
        Tab 2
        Tab 3
        
        
        
        Content
        
    
    
    
        Footer.
    
   

grid.css

/*
  Rules for three base blocks.
  */
#header,#main,#footer{
    width:990px;
    margin: 0 auto;
    padding:0;
    }

/*
  Rules for tabs.
  */
#tabs{
    diplay:block;
    overflow:auto;
    padding:0;
    margin:0;
}
#tabs li{
    display:block;
    float:left;
    width:330px;
    height:50px;
    border: 1px solid silver;/*Uncomment it for debugging */
    box-sizing:border-box;
    -moz-box-sizing:border-box;

    padding-top:10px;
    text-align:center;
}
/*
  Rules for content block.
  */
#content{
    width:990px;
    height:700px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border:1px solid silver;/*Uncomment it for debugging */
}

style.css

body{
    background-color:silver;
    /*And all things like that, colors,fonts,etc..*/
}

What do you think of this code organization?

How do you organize your style sheets?

Here is my directory structure:

./
  app/
  theme/

Here is my CSS build script:

#!/bin/bash

# Directory to write the minified CSS files.
OUTPUT_DIR=../css

mkdir -p $OUTPUT_DIR/app

lessc -x ui.less > $OUTPUT_DIR/ui.css

# Create minified CSS files for the applications.
for i in app/*; do
  lessc -x $i > $OUTPUT_DIR/app/$(basename $i .less).css
done

Here are the main files I use (relatively located in ./):

colour.less
constant.less
fieldset.less
font.less
layout.less
sprite.less
master.less

Each .less file under the app/ directory contains overrides for any of the above styles. The theme/ directory contains constants for colour themes. For example:

@header-nav-search : #1abc9c;
@header-nav-book   : #e67e22;
@header-nav-account: #e74c3c;

The master.less file ropes them all together:

@import "constant.less";
@import "fieldset.less";
@import "layout.less";
@import "font.less";
@import "colour.less";

Each app-specific file starts with a reference to the theme:

@import "../theme/peaceful.less";

I welcome improvements. The short answer is: use LESSCSS or an equivalent language that compiles into CSS. Having variables and functions to use for generating CSS is extremely useful.

StackExchange Code Review Q#28616, answer score: 5