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:
- Analyze the design that’s going to be produced: write down (yes, on paper) what issues may come up for that particular design
- 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.
Now you can start writing notes and drawing on your prints:
- Define the main blocks
- Note down measures for easier reference
- Analyze troublesome/delicate areas and think of how you will code them
- Write down a simple structure for your code and note down important measures for future reference
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!