6
\$\begingroup\$

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: 

<!DOCTYPE html>
<!--layout.html-->
<html>
    <head>
    <title>The best title ever</title>
    <link rel="stylesheet" href="grid.css" type="text/css"/>    
    </head>
    <body>
    <!--The top part of site -->
    <div id="header">
        <h1>Header</h1>
    </div>

    <!--The main part of site, where al information is-->
    <div id="main">
        <!--Container with floating tabs. -->
        <ul id="tabs">
        <!--Floating tabs-->
        <li id="tab1">Tab 1</li>
        <li id="tab2">Tab 2</li>
        <li id="tab3">Tab 3</li>
        </ul>
        <!--Container where we see content of ACTIVE tab-->
        <div id="content">
        Content
        </div>
    </div>
    <!--The bottom part of site -->
    <div id="footer">
        Footer.
    </div>
   </body>
</html>

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?

Improve this question
\$\endgroup\$
1

2 Answers 2

Reset to default
5
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
2
\$\begingroup\$

Yes, using multiple CSS files is a common practice. And since they're CSS files, the files don't take long for the browser to render.

You can use the @import CSS rule to 'sew' them all together, if you wish, but I tend to just leave them.

Often, I use four CSS files together;

  • reset.css - reset all user agents
  • default.css - modern browsers
  • ui.css - I personally like to keep the user interface aesthetics separate
  • mobile.css - an easy way to alter the page for mobile devices, without having to maintain two versions of your website. This is inserted in via CSS @media queries.

And if older versions of Internet Explorer need separate CSS, they can be given using IE conditional comments. For example;

If you want to target stale browsers like IE8 and below, you can use this:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="ie8.css">
<![endif]-->

And for more modern browsers that include decent HTML5 and CSS3 support, you can target IE9 and above, plus browsers that are not IE, with this:

<!--[if gte IE 9|!IE]><!-->
    <link rel="stylesheet" href="default.css">
<!--<![endif]-->

That's my usual setup.

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.