February 19th, 2006

Write Better CSS

Writing an effective stylesheet is a very important aspect of developing any particular Web site. Developing good habits in your coding style will really make life easier down the road as you learn more involved CSS techniques. The ability to become lost in your own code becomes a bigger reality with each line you write – unless you’re writing effectively.

Comments

If you’ve ever taken any sort of programming class, you’re forced to learn the concept of ‘good comments make great code’. At first it seems like a hassle to spend your time writing out comments explaining what blatantly obvious code will do, after all, you’re writing it. You quickly learn that the point of code is not only for your benefit, but for the benefit of others who want to read it.

Coding CSS works in the same way — kind of. Comments in CSS shouldn’t be as comprehensive as programming source, but they should serve the same purpose. If someone wants to check out a stylesheet you have written, they should be able to follow along and find exactly which section they’re looking for.

A few tips

Firstly, using a commented header is always a good idea. Dating the code and providing some insight as to who wrote it is a good start. If you’re writing the stylesheet for the company you work for, throw that URL in too. Be proud of the code you write — and if you’re anything like me, you just have a curiosity to see more work done by the author of a particular stylesheet.

Another good commenting habit to get into is commenting blocks of code. If you have a group of selectors that relate closely to one another, give them a commented header such as:

/* LINKS */
a { text-decoration:none; color:#00f; }
a:hover { text-decoration:underline; }
a:active { color:#f00; }
a:visited { color:#ccc; }

Getting into this habit will really come in handy as your stylesheet grows. If you’re testing the site, and need to make a quick fix, this is a great way to quickly find the area in which you need to make the edit.

As with all documentation, you don’t want to go overboard. After all, putting in excessive comments will do nothing but increase the file size of your stylesheet and more often than not confuse your reader.

Maintaining Your Technique

The way you structure your CSS document should also follow your own convention. Once you start with a method of writing, stick with it, don’t go back and forth. For example, if you are in the habit of giving each property it’s own line, stick with that method throughout your document.

Once you become more comfortable with writing CSS, you may find it more effective to put all the properties of a particular selector on a single line. I’ve adopted this method and simply find a stylesheet easier to maintain and look at if it is coded in this manner. Using this method makes it easer to skim the document and find the specific selector you need to modify.

Using a Top Down Approach

One of the great things about CSS is one of the C’s – cascading. Keep this idea when writing your styles. If you have a table that needs styling, keep yourself organized and do something like this:

table.grades { }
table.grades thead { }
table.grades thead tr { }
table.grades thead tr td { }
table.grades tbody { }
table.grades tbody tr { }
table.grades tbody tr td { }

Notice how as you progress down the code, what is affected becomes more detailed. If you were to be an outsider reading the style, it would be quite easy for you to follow as opposed to a random order. This technique can be applied to many situations, such as lists and content within div’s.

How Many Stylesheets Should I Use?

There are many developers that like to separate their style into different sheets that effect different parts of the site. Some like to have a sheet for layout structure alone, another for typography, and a third for site colors. Personally I don’t agree with this method. I prefer to have separate stylesheets based on what media the code is dictating. For example, this site is using one stylesheet to control presentation on screen, another sheet to control what the site should look like should you want to print it, and yet another stylesheet for any handheld devices. For me, it is much easier to make edits to the site based on what media you are presenting to. If I want to change the margins, font-family, and color of a header, I don’t want to have to open up three separate stylesheets and make edits to each. I would rather make the edit on a single line of a single stylesheet and be done with it.

Some Finishing Thoughts

It’s very easy to find yourself writing redundant CSS. Try to take a step back and look at your site as a whole, find out which elements are similar and share similar traits. For example:

/* HEADERS */
h1, h2, h3, h4 { font-family:Arial, Verdana, sans-serif; }
h1 { font-size:24px; font-weight:normal; }
h2 { font-size:19px; color#000; padding-left:15px;  }
h3 { font-size:17px; color:#f00; }
h4 { font-size:14px; letter-spacing:2px; }

Notice how the font-family was declared only once. Writing it for each header level wouldn’t be necessary, using this technique allows you to only write code for what should set each header apart from the others. You should only use this technique for similar elements, however. Setting a padding level for a header and a form simply because they’re the same value doesn’t make much sense. If you went back to change the padding on the form, you would be inadvertently changing the padding on the header also, which you probably wouldn’t mean to do.

Hopefully you’ll be able to incorporate some of these techniques into your style writing and it will make your life a bit easier when a site is acting strange or changes need to be made.

24 Comments

Tagla February 20th, 2006

Nice useful article … it says simple advices but it’s very easy to overlook these points!
Jon February 20th, 2006

Author

Thanks for the feedback. I know that some of the points are pretty basic, this article was written in aim to help out those just starting out with CSS. Hopefully to help them develop good habits from the start. Again, thanks for posting.
Michael Chase February 20th, 2006

Nice work, this’ll be a good archive to point CSS beginners towards.

I would like to point out however that one of the good points of using multiple stylesheets is that the page will load quicker if it only has to load the CSS it’s using; otherwise it makes a lot of sense only to use a single one.
Christopher Murphy February 22nd, 2006

Very nice site. As a beginning web-designer with only eleven days of experience, I am finding your site very informative and I am quite excited about seeing this web site develop. I’ll be back!
Prime February 23rd, 2006

Useful article, definitely going to use your tips from now on. Wish you good luck with this site, looks good so far!
Jon February 23rd, 2006

Author

Thanks for taking the time to comment. Remember to sign up for email updates or subscribe to the RSS to keep an eye out for updates. I’m going to try and put out a couple extra articles over the next month or two so keep checking back. Thanks again for checking out the site and I hope you find yourself back soon.
astridas February 23rd, 2006

The CSS methodology used here is the one I have recently adopted. Some of the benefits over my original style include: smaller file sizes, faster productivity, and easy addition or modification of styles.

Comments are a must in all programming. The comment block is a great way to keep your CSS organized well. It definately helps on finding the style you are looking for; especially on very large sites with many styles.
Monico February 24th, 2006

It’s very easy to get repetitive and lost within your own code as well without the commenting, as it used to happen to me pretty often when I was a beginner. Very useful tips, I’ll keep these in mind.
Mike February 26th, 2006

I don’t often comment on articles, but I’ve got to say this is a great one in my opinion.

Coming from a programming background, your points are all too familiar to me. To me the hardest part has been actually putting all these principles to use when dealing with complex (to me) layouts. I often find myself getting into the habit of adding redundant rules, unnecessary selectors, class names, etc… trying to get the look I want/need, or when fixing browser issues, especially IE.

I think alot of my problems though, were the result of a lack of good planning and direction. I have been designing a few sites for friends, and was given basically no structure, guidelines, or content to begin with. It becomes difficult to write quality CSS, without any type of vision.

I have began working on a site for myself lately, and am finding it alot easier to stick to your points. I have been putting alot of effort into planning, structure, and content for the site. Sketching out page layouts and marking it up with class and id names, semantic tags, etc… really helps when you go to write the CSS.

As for keeping all the properties on a single line, I still don’t get it, but to each his own! lol

Very nice site here. Simplistic and easy to read, cool layout. Rare to see the green check from Tidy shining in my statusbar too, great job!
Jon February 28th, 2006

Author

@astridas: I’m glad that this article was helpful for you and I hope that you find yourself styling more effectively from adopting these techniques

@Monico: When I first began writing CSS I would find myself repeating styles over and over in the same sheet. I would also find myself becoming very frustrated because I couldn’t figure out why a particular element was behaving in such a way. These techniques have really helped my code improve greatly.

@Mike: Thanks so much for the wonderful comment. It is great to read writing such as this and find that people are really embracing some of the techniques. Having a good plan from the start can really help over the course of a project. I’m glad you appreciate that little green icon, even in this new era of standardized Web development, it remains a rarity for the most part.

I hope that comments like the ones found here continue throughout the site, and hopefully down the road commenters will begin to even comment to one another. Thanks again to everyone for taking the time to write.
Drew March 14th, 2006

I wanted to subscribe to the RSS (as posted by Jon) but could not find it… so I gave up… ?
Drew March 14th, 2006

Moral of the story is that some people (such as myself) rely on the actual word rss or feed being in a document so I can do a quick search.. I found the link but just thought it would be worth mentioning..
Jon March 14th, 2006

Author

@Drew: You bring up a good point. This site was developed using ‘the Feed Icon‘ image to describe RSS feeds — perhaps this isnt enough?

There are two feeds for Monday By Noon, an articles feed and a latest comments feed.

The article feed can be found at http://www.mondaybynoon.com/feed/ in case you find yourself checking back — I’ll try to shoot you an email to let you know also.
trovster March 20th, 2006

The feed icon doesn’t really standout, but I found it when I was looking for it…

About writing better CSS - I’ve started using Douglas Bowman’s trick for setting flags.
Jon March 20th, 2006

Author

@trovster: Thanks for the link! I’ve seen multiple developers using a technique such as this and it does seem to help when searching for a certain section of your sheet. One thing that I have found to help even more with streamlining the development of your stylesheet is keeping all of the properties related to a specific selector on the same line. Personally it keeps the stylesheet from looking cluttered for me. I know many developers feel differently about this subject and I suppose it just comes down to personal preference. Thanks for stopping by.
Calvin September 14th, 2006

I’m a beginner developer too,
I also use Windows and Linux - the development is done on Linux.
I Like your site and articles, and i was happy to learn that others like Bluefish too…
Thanks for the CSS tips.
stephen October 14th, 2006

Although not a beginner, I am self-taught from books and cough code-ripping cough.
This post confirms that much of what I have learnt and continue to do is also performed by those I revere.
Your last comment about redundant statements / duplicity is an area I always look out for.
I also find that using / * * / to wrap areas of CSS is a great way to find out if its necessary - or working at all!
Thankfully the journey of a web-designer’s work is just as fun as the end result.
NerdStarGamer » Blog Archive » CSS Programming Style October 24th, 2006

[...] Take this example of some links (code example from Monday by Noon): [...]
My Development and Design Process - Monday By Noon January 29th, 2007

[...] have been writing CSS in the same style for quite some time now, but I’m always open for new tips on writing better CSS. It is at this time markup elements are given their class and id names, and the markup is styled [...]
Improving Your Process: 9 Ways to Improve Yourself - Monday By Noon July 30th, 2007

[...] it a try if the a budget or time frame allows. There are many articles on such things as how to Write Better CSS or articles which provide someone’s Bare Bones Style Sheet. I’ll always keep watch for [...]
۹ روش برای بهبود پیشرفت « Martians August 20th, 2007

[...] مقالات بسیاری وجود دارد در مورد چیزهایی مثل چگونه سی اس اس بهتری بنویسیم یا مقالاتی که شِمای کلی استایل‌شیت یک نفر را توضیح [...]
Mega Awesome CSS Resource List! | WebDevLounge | design, development, SEO and wordpress | articles, discussion and community August 3rd, 2008

[...] Write Better CSS Writing an effective stylesheet is a very important aspect of developing any particular Web site. [...]
ejohansson.se » Blog Archive » Presenting the site’s “spring” layout August 23rd, 2008

[...] to restructure the contents in my css file, applying some tips from Monday by noon’s write better css article. Don’t know yet if I like having all properties for one selector on the same row. The [...]
Improving Your Process: Thinking More About Your CSS - Monday By Noon June 1st, 2009

[...] Write Better CSS [...]