Best Practices - CSS Stylesheet Formatting

Question

This may seem like a strange question...but here goes:

I'm currently working on creating a fairly large site using table-less design/css (obviously the best way to go). Unfortunately, I have a requirement that is completely out of my control that states I must have only one stylesheet for the site.

In some regards this is better because it forces me to think about style re-use pro-actively while designed the pages. On the other hand...the stylesheet is becoming monolithic and I'm quickly losing myself trying to find styles I know I've already defined.

I'd like to do myself (and anybody who has to work on the site in the future) a favor and make the CSS as readable and easy to update as possible. That's where you come in. I'm looking for formatting/organizational suggestions/best practices.

Somebody out there has to be better at it than I am.

Answer 1

Stylesheet Maintenance

CSS Standards and Best Practices

Create Maintainable Code With A CSS Styleguide

Answer 2

My site has a global.css which imports the other CSS in the order that they need to cascade.

example:

Global.cs file:
@import url('Directory/MainLayout.css');
@import url('Directory/Links.css')
@import url('Directory/Tables.css')

Doing it like this will help you organize your CSS.

Answer 3

The idea of "Modular CSS" as described here http://24ways.org/2008/making-modular-layout-systems helped me organise my CSS well.

The cost is having multiple classes on html elements but that is what they are for.

Answer 4

I've recently switched to using code indentation to format all my stylesheets. It gets rid of the wall-o-text that most CSS currently resembles and makes browsing for specific statements pretty easy.

#menu {
  asd:asda;
}
  #menu a {
    asda:asd;
  }

  #menu ul {
    asd:asda;
  }
    #menu ul li {
      qwe:qwerty;
    }

#content {
  asd:asdf;
}
/* etc...*/

Answer 5

You may find the Compass stylesheet framework useful. In Compass you can use Blueprint CSS, The Yahoo! User Interface Library or 960 Grid System.

Answer 6

Why not have multiple stylesheets on your development boxes, but have them merged into one in your deploy scripts.

Answer 7

If you're using Visual Studio 2008, the size and organization of your CSS files may not really matter. There's some tools built in that make styles SUPER manageable, even going so far as to give you a visual representation of each style for reference.

Scott Guthrie has a great blog post on this.

http://weblogs.asp.net/scottgu/archive/2007/07/25/vs-2008-web-designer-and-css-support.aspx

Answer 8

I like to keep all my stylesheets (relatively) small and broken out by section (about, products, contact, etc.).

When pushing to production, I run front-end blender to consolidate and minifiy all of the stylesheets into a single global.css file.

This minimizes the overall number of CSS calls in the production environment (1 instead of 20!), avoids the overhead of @import, and allows for better caching/cache-busting as needed.

Answer 9

Be careful using @import -- especially in a master css file. The @import stylesheets will not download in parallel and you cannot control the order in which they are imported (in IE). See the High Performance Web site blog for more information.

I organize my CSS file by putting the common elements (header, navigation) at the top and the more page specific elements at the bottom. It's not hard to find stuff because I usually debug/work in firebug which gives the line number of the element you are inspecting.

Answer 10

Great advice in all the responses above!

I always find myself doing the following:

• Ordering my selectors in order from generic Element (h1, em, a) selectors to more specific selectors (div#foo, a#bar) and winding up with generic (div.blah span.biz) at the end. No real reason other than I know that, after Elements, it follows along in decreasing specificity.

• Ordering attributes in alphabetical order within selectors. I've tried grouping them in meaningful ways (like position, left, and top always showing up together), but you'll find that things end up hard to read if attributes are missing. Alphabetical order is always nice and easy to skim. Example at the bottom as the editor's eating my code formatting.

• Finally, I always make sure to comment anything that's tricky. For example, I had a background image that was a 4x4 dot that I repeated and used as a horizontal rule. As it repeated as a 4x4 block, I made sure to comment that so any other developers would see just what the heck it was doing and why I used so many 4- and 2- based values for sizing that Element.

Just remember: someone else is going to be looking over this someday, so make it easy to read and skim!

Here's how my selectors generally look:

div{ 
   float:left; 
   margin:0 0 0 1em; 
   padding:0 1em; 
   position:relative; 
   z-index:999     
}

Answer 11

I put all my selectors on one line, with alphabetical attributes (like ajm):

#aside{ float:left; margin:0 0 0 1em; padding:0 1em; position:relative; z-index:999; }

I used to indent (like tj111), but since I use multiple editors on multiple platforms, the spacing quickly got out of whack, and I spent too much time fixing it.

The CSS file is ordered by major blocks: reset, typography and layout. Selectors are ordered by, roughly, their place in the HTML structure. Sprinkled throughout, I'll use "flags" so I can find major blocks of styles in a search:

/* =Header
Other comments can go here, too */
#header { key: value; nkey: value; }
#header h1 { key: value; }

Answer 12

Here's how I do it:

#container {
    font-size: 220%;
    margin-top: 15%;
    min-width: 600px;
    text-align: center; }

    #container p {
        font-size: 100%;
        line-height: 1.2em;
        margin-bottom: 15px; }

        #container .accepting { font-size: 16px; }

        #container .domain { font-weight: bold; }

        #container .smaller { font-size: 65%; }

        #container #ad {
            margin-top: 2em;
            margin:0; }

            #container #ad img {
                border: 1px solid #CCC;
                padding: 3px; }

I keep the selectors one line long if there is 2 or less settings in it.

Also use comments to seperate the sections, such as /* header */ & /* main */.

Edit: Take a look at minify for combining & compressing css (and js if you wish).

Answer 13

I use http://styleneat.com/ to consolidate all my .css into one nice and neat file.

d.

Answer 14

first i work on how i'd like the general page elements to look, for instance my p, a, h1, etc tags at the top.

then i work on on section of code at a time, like #header for instance, and include everything relevant to the #header element. i separate sections with a comment, for instance:

/*---------------------HEADER----------------*/

so that it's nice and big when i'm looking for it later. i then create generic reusable classes near the bottom, like .disclaimer or something that can be put in a random p tag.

of course it's not so great if you want to keep file size down, but i find that a couple extra bytes in your css file to prevent you from going crazy when trying to find things later is absolutely worth it.

of course you can also minify :)

Answer 15

Download and read Natalie Downe's PDF CSS Systems. (The PDF includes tons of notes not in the slides, so read the PDF!). Take note of her suggestions for organization.

If on a Mac, Use CSSEdit

Organize the properties within each selector block. Many people suggest alphabetization. Here's my approach. Pick the one that feels right to you.

Make sure you're taking advantage of CSS shorthand as much as reasonably possible. (remember that 'line-height' is unitless, so 'line-height: 1.5;' is the same as 'line-height: 1.5em;'... Also a unit does not need to be specified for zero values, so 'padding: 0px 0px 1em;' can be written as 'padding: 0 0 1em;'... the 'background' shorthand property defaults to a 'background-color' of 'transparent', a 'background-repeat' of 'no-repeat' and a 'background-position' of '0 0' so sometimes you can skip setting some or all these depending on the situation ... 'normal' and 'bold' font-weights can be written as '400' and '700' respectively). These may seem quite minor, but in a huge CSS file, they can add up and they're good habits to develop anyway.

As others have mentioned, use server side scripting if possible to minify your css file before serving it up to browsers so you can maintain a human-readable version.

Answer 16

Here's how I do it:

/* HEADER ------------------------------------------------- */

#screen-reader {position: absolute; left: -99999px; top: -99999px;}
#header        {background: url(../images/header-bg.jpg) no-repeat; width: 960px; height: 209px;}

/* NAVIGATION ------------------------------------------------- */

#main-nav      {float: right; margin: -194px 110px 0 0;}

I break up my CSS into sections with comments and make sure everything is in line. I just think it's a cleaner approach.

Answer 17

Using something like minify can work wonders. You can have several stylesheets that upon delivery, merges all into one http request. It also removes any whitespace from the Css allowing it to load faster.

In regards to managing a huge file, you might refer to alistapart's article on separating structure, type and color. With clearly defined comments to separate these sections of css, you'll find it much simpler to refer back and edit.

My preference is to separate all base HTML styles into one clearly defined (through comments) area of the style sheet. From there I have a structure section where all containers are defined. After that I separate using comments based on any unique templates. And sometimes I even separate any link styles on their own.

Hope that helps!

Answer 18

Here is one useful link from CSS Tricks

Answer 19

When a stylesheet gets really long I tend to favor readability of selectors much higher than the properties themselves. An example was given above where a whole rule is compressed on to one line. That is my default format no matter how many properties:

#container {width: 900px; margin: 0 auto; font-size: 1.2em; }

#header {width: 100%; }
#header .nav {margin: 0; }
#header .nav li {list-style-type: none; }
#header .nav li a {font-size: 1.4em; color: #0f0; }
#header .nav li a:hover {color: #3f3; text-decoration: underline; }

I'm not a huge fan of indenting, but it may help you visualize your HTML within the stylesheet. Either way you have a compact, scannable CSS file.

As for long sets of properties, I try to organize them so I can skip to the end or middle if I know what I'm wanting to tweak. Generally, put display/position/z-index first, then width/height/margin/border/padding/background, then any typographic properties like font-size or color, and finally throw all the browser-specific tweaks at the very end (-moz-box-shadow).

Answer 20

Make the most of inheritance, write scalable, reusable code and stack classes where appropriate.

I use a similar format to Nick Satkovich up there ^ and rarely feel the need to use more than one stylesheet.

I find that css indentation makes code less readable than an inline format. Well structured stylesheets with well named ID's and classes shouldn't need indentation.

Answer 21

What @tj111 mentioned above, can be achieved using an online tool - styleneat.com. Works quite well for organizing huge stylesheet(s) without breaking anything.

Answer 22

Perhaps you can use the alphabetising features offered here, for making each css file's elements easier to reference by eye.