CSS code organizing

Question 1

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?

Question 2

This question seems a little off topic for CR: your answer is provided along with the question, and you expect more answers: "I use ______ for ______, what do you use?". Proper code organization always makes sense, but how I organize code might not make sense for you.

Question 3

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.

Question 4

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.

Dave Jarvis 1,9271 gold badge12 silver badges29 bronze badges · Accepted Answer · 2013-07-17 22:47:08Z

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.

Stack Exchange Network

CSS code organizing

2 Answers 2

You must log in to answer this question.

Hot Network Questions

CSS code organizing

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions