How to start a CSS file

30 January 2009, in CSS | 5 comments »

If you’re just taking your first steps into learning CSS, the moment where you need to actually start writing some code may be a bit daunting. You’ll probably end up asking yourself:

  • Where do I start?
  • What should be the first thing on my stylesheet?
  • How should I organize my code?
  • Are there any conventions?

Where do I start?

Let’s begin with the first one, “Where do I start?”. I have a simple method which I try to follow whenever I start a new CSS file:

  1. Analyze the design that’s going to be produced: write down (yes, on paper) what issues may come up for that particular design
  2. Start coding!

Analyze

The easiest way to accomplish these first steps is to print your design out. I sometimes print it several times so I can cut more complex bits of the design separately and glue them onto another piece of paper.

2547778790_4a2a76a6bd

Now you can start writing notes and drawing on your prints:

  1. Define the main blocks
    Define the main blocks
  2. Note down measures for easier reference
    Note down measures
  3. Analyze troublesome/delicate areas and think of how you will code them
    Analyzing delicate areas
  4. Write down a simple structure for your code and note down important measures for future reference
    Note down important measures for future referece

I like to think of all this beforehand because it makes the actual coding a bit more of an enlightened process. If you’ve done all this crucial preparation you’ll already know exactly what you have to do and this will prepare you for most issues that will crop up during the coding process, which is where something always comes up out of the blue to keep you up until daybreak.

Start coding

It’s good to always have your stylesheets organized in the same way i.e. a template, unless you’re working on someone else’s code or have to follow company convention.

I like to include a comment at the top of the page about who created the stylesheet, when and what for, as well as when it was last modified (and by whom). See below:

/* --------------------------------------------------------
Style Sheet for Website's Name

version: 2.2
last modified: 13.11.2008 by Someone Else
author: Author's Name
email: author@domain.com
website: http://yourwebsite.com
----------------------------------------------------------*/

If any of these details change (especially the version number!) later on, you should be sure to change them.

After creating the comments section, I tend to include a simple overhaul table of contents for that stylesheet, so it’s easy to, at a glance, know its contents and what is where.

/* -----------------------------------------------------------
CONTENTS:
=Resets & General
=Links
=Header
=Wrapper
=Main Content
=Lists
=Navigation
=Comments
=Aside
=Footer
------------------------------------------------------------*/

I always place an = before the title of the section (following Andy Budd’s advice), because it’s easier to find =Nav than Nav (which is probably all over the place). That way you’ll always jump to the right line.

CSS formatting

To keep my files smaller (and because I can actually read them more easily like that – after some months of practice) I write one-liners. This can also save precious bandwidth for high traffic websites. Other ways of doing this include eliminating the last “;”, spaces and paragraphs; or by using one of the several CSS condensers from the web (for example, Clean CSS).

I try indenting my code as much as possible so I know if a selector is located inside of the other or is only relevant in that context.

#topNav li { float:left; margin-right:24px; }
	#topNav li:last-child { margin-right:0; }

It’s also nice to note which selectors have IE 6 and/or 7 specific styles applied to them, so that when you make changes to them you know you probably have to change it somewhere else.

.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; } /* ie.css */

Comment

If the code is going to be handed to someone, try commenting on it as much as possible (try commenting always – when you come back to a CSS file one or two years later you’ll wish you’d done it!). Remember: be as descriptive, as possible, and explain why you did things, and what may happen if they change some properties. Here’s an example of what a good comment can look like:

#downloadBtn a#pc { display:block; position:absolute; width:172px; height:81px; top:285px; z-index:100; background:none no-repeat left top; cursor:pointer; } /* change top property according to height of video */

Also go into more detail about what is what – besides the table of contents, in the code, write things like:

#page-wrapper { width:800px; margin:auto; text-align:left; position:relative; padding-bottom:15px; } /* wrapps all the content */

This is how I start most of my CSS files. It isn’t a perfect method, but it works for me and I found it helped me when I was starting with CSS, so feel free to use it. I sometimes skip a step or 2, or add a couple more: it really depends on the project and my mood!

Further reading:

There are 5 comments:

  1. I really was expecting for this answer, this blog will be useful to me.
    Keep the good work Inayaili.

  2. Egami says:

    This is a very good and helpful article. I wonder Inayaili, how would your start a CSS file today? As this article is about three years old, have you changed your approach to starting a CSS file?

    Thanks again for the helpful article!

    • inayaili says:

      Hi Egami,

      Interesting question, I definitely have evolved my approach to starting a CSS file since back then, and even CSS itself has changed.

      I have explained the process extensively on my book http://procssforhightrafficwebsites.com/ and there’s also an example site there to have a look at.

      Although, the same problem presents: the book is over 1 year old, and things change very quickly :)

  3. LW says:

    Dude, organized coders like you are so rare, but it is so important. You are fantastic!

  4. CASSANDRA says:

    Beautiful. I love the idea of opening with creation info and a table of contents. I think I’m going to start using them. My OCD thanks you and your brilliance.

Leave a comment: