Wednesday (09/19/07)
Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized 8:03 am
When developing large sites, stylesheets can get fairly messy and hard to keep track of. If you don’t stay organized, you can end up making them larger than they really need to be and doing more work than you should have to. Here’s just a few ways to can help avoid that.
Reusing Semantic Class Names
While in most cases semantic class names really don’t help achieve much, there are a few in which they can be quite helpful. One of these is when describing element states, such as .selected.
Oftentimes, people only use classes when there are multiple elements on a page that are to share the same styles–this isn’t the only way to use them, however. Say we have a tabbed horizontal navigation on the top of our page:
<ul id="tabs">
<li><a href="#">tab 1</a></li>
<li><a href="#">tab 2</a></li>
<li><a class="selected" href="#">current tab 3</a></li>
<li><a href="#">tab 4</a></li>
</ul>
We’re going to want to give the .selected link some extra styles. But now say we also have a form somewhere on the page and are using JavaScript to add some styles when a radio button has been selected. When the button is selected, our code would look something like this:
<form action="#" method="post">
<input type="radio" name="button" value="value">
<input class="selected" type="radio" name="button" value="value2">
<input type="radio" name="button" value="value3">
<input type="radio" name="button" value="value4">
</form>
Using selectors, we can give each of these different styles:
li .selected {
/* styles go here */
}
form .selected {
/* styles go here */
}
This makes our CSS easy to read and our classes easy to keep track of. When you have tons of elements with different styles, keeping track of all the IDs and classes can become difficult–this shortens that list and lets us use easy-to-remember names.
Name your <body>
When working with multiple pages, most of the time you’ll be re-using many of your styles but will need slight variations. Having the same code repeated several times in your stylesheet with minor variations wastes space, is hard to keep track of, and just isn’t necessary. For an example, let’s take our previous example and say that our navigation has these styles:
ul#tabs li {
float: left;
padding: 5px;
color: #000;
background: #fff;
font: 1em tahoma;
}
Now what if on all our subpages we want the same thing, but with less padding? We could create a new list, copy/paste all these styles, then modify the padding. But that’d be pointless. Instead, we add a class to the body on our subpages (say, subpage) and just add this into our stylesheet:
.subpage ul#tabs li {
padding: 2px;
}And that’s it.
Keeping IE Happy
One of the biggest time consumers in CSS development is, of course, IE debugging. With IE7 now on the loose, this can get even more complicated. However, using one IE-only stylesheet that can target both IE 6 and 7 as well as each individually, this can be made much simpler.
To do this, first we set up our conditional comment with included stylesheet:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
< ![endif]-->Within this stylesheet, we can then add any styling fixes that are needed for all versions of IE (just make sure that your styles will take priority over the ones in your main stylesheet–I usually add “html body” at the beginning of each selector). For fixes that don’t need to be done on IE7, we simply use the * html hack. For IE7-only fixes, add html > body before the selectors.
By doing this, we can target specific version of IE within one stylesheet and still keep it separate from our main stylesheet.
Go Forth and Write Code
Any other tricks you use to speed things up while staying organized? 
I eat food. I listen to music. I sleep. Sometimes. I drink lots of coffee. I make pretty pictures. I talk to people. I believe in things. I write stuff. I take photographs. I have a laughing addiction. I am human. 
For large stylesheets I begin with a comment which is a table of contents e.g.:
/*
Contents:
(1) Top Nav
(2) Left Nav
(3) Right Nav
(4) Footer
*/
And then each section begins with a comment e.g.:
/* ### (1) Top Nav ### */
That way everything is kept together and I can easily jump to a particular section by searching for the index number.
But I suspect there are many more things that could be done to keep things organised.
Keeping sections in a stylesheet is also a great way to keep things organized. I often keep my universal styles on the top, then style from top to bottom (which, like any other way, has it’s pros and cons).
A technique I use is to indent my CSS much like HTML. It automatically makes sense when coming back on a project after several weeks.
Maybe you need to tweak your css a bit, the comments overlap in Firefox. I did like the bit about naming the body which could be useful.
I love the idea of class-ifying the body tag, I should have thought of that years ago. My question is though wouldn’t it make more sense to ID the body tag? Just a thought.
One problem with this is ie specific css. One can and should generally avoid this. It is possible in almost any situation with enough practice and tweaking.
jesse,
in the case of the example, subpages are a class, since there will be numerous subpages. now, i would recommend going with “id” and naming each one individually, in the case that i need to change a style on only one exact page.
Anonymous - with so many bugs in IE, it’s not always possible to have standards-based HTML and CSS to work reliably cross-browser. While I try and keep the amount of hacks nessesary down ot a minimum, no amount of practice will allow you to overcome all IE problems without hacks. And since most hacks don’t validate, I prefer to put them inside conditional comments, instead of putting improper code into the files read by all browsers.
Joe - even though, as you say, there are multiple subpages, there is only 1 body on a page, so there is no problem using and ID on the body tag. IDs are unique only to the page, not the site. And since you won’t have 2 body tags that share the same styles on a single page, an ID is more semantic.
@Cerebral: I know a lot of people find that helpful, and it would definitely be a good thing to keep in mind if you’re planning on coming back to the code later to do editing.
@W00key: Huh, interesting…I’ve never seen or heard of that one before. What version/OS, and have a screenshot?
@Jesse Donat & Joe: In the example above, it really doesn’t matter (remember, IDs can be reused on separate pages). The only case in which it would really matter is if you are going to be applying multiple classes to the same body (say, “subpage” and “description” or something), since you can’t apply more than one class to an element.
@Anonymous: While I probably shouldn’t be responding to trollish comments from people who refuse to name themselves, I will anyway… Is it possible? Sometimes. Is it faster? Definitely not. This is three ways to “speed up CSS development while staying organized,” not “ways to give yourself headaches.”
@BillNZ: Well put.
this is shit!
These are really basic instructions…but still important for beginners to remember I guess.
[...] Cascading Style Sheets — CSS — is a great way of managing styles and layout throughout your website. A single style sheet can control your entire website, whether you have 5 pages, 5000 pages or 5 million pages. It also comes handy when you need to change the design of your website, and that’s why it is often advised to keep design and data separate. The following post tells you 3 Easy Ways To Speed Up CSS Development While Staying Organized. Staying "organized" here doesn’t mean you keep you desk tidy or you keep your files in different, tagged folders. It means using the CSS definitions in such a manner that in case you need to use the same class name for two different HTML elements you can make out which element the class affects when it is being used or when the CSS file is being modified. [...]
[...] read more | digg story [...]
[...] Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized | Elliot Swan (tags: css tips design coding) [...]
[...] Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized | Elliot Swan Trucs et astuces pour garder le contrôle de ses CSS pendant le dévelopement. (tags: css design howto tips) [...]
[...] Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized | Elliot Swan [...]
Gee, Bob, thanks for the insight. It’s hard to argue with wisdom like that.
Owww man, very good its tips. Thanks.
[...] Speed Up Your CSS [...]
I have used both ID and class on the body element before. Can come in handy for styling both main navigation and sub-navigation.
Something like this:
body#Company.Overview ul#mainNav li#CompanyOverview,
body#Company.ExecutiveTeam ul#mainNav li#ExecutiveTeam,
body#Company.Partners ul#mainNav li#Partners,
body#Company.Customers ul#mainNav li#Customers,
body#Company.Careers ul#mainNav li#Careers,
body#Company.ContactUs ul#mainNav li#ContactUs,
body#Products.Overview ul#mainNav li#ProductsOverview,
body#Products.MobileEducation ul#mainNav li#MobileEducation,
body#Products.Breeze ul#mainNav li#Breeze,
body#Products.BreezeDeliver ul#mainNav li#BreezeDeliver,
body#Products.Compatibility ul#mainNav li#Compatibility,
body#Products.Technology ul#mainNav li#Technology,
body#News.Overview ul#mainNav li#NewsOverview,
body#News.HighlightsAwards ul#mainNav li#HighlightsAwards,
body#News.NewsArticles ul#mainNav li#NewsArticles,
body#News.PressReleases ul#mainNav li#PressReleases,
body#News.Events ul#mainNav li#Events,
body#News.CorporateFaq ul#mainNav li#CorporateFaq,
body#Support.Overview ul#mainNav li#SupportOverview,
body#Support.DevSiteLink ul#mainNav li#DevSiteLink,
body#Support.CustomerPartnerLogin ul#mainNav li#CustomerPartnerLogin {background:url(/img/navSelectedBackground.png) no-repeat center}
[...] Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized [...]
[...] Howto: 3 Easy Ways To Speed Up CSS Development While Staying OrganizedKeeping your CSS development in check [...]
[...] CSS dosyalarımızı optimize etmenin bir kaç yolu. Bağlantı [...]
[...] 3 Easy Ways to Speed Up CSS Development While Staying Organized Posted by: admin in Web Design When developing large sites, stylesheets can get fairly messy and hard to keep track of. If you don ’t stay organized, you can end up making them larger than they really need to be and doing more work than you should have to. Here’s just a few ways to can help avoid that.read more | digg story Bookmark this Post: [...]
[...] Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized | Elliot Swan [...]
[...] read more | digg story [...]
[...] Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized | Elliot Swan [...]
I’m using your tips as well and I use sections defined by comments. If I have to use any hacks for ie, I’ll put them in a different sheet. Though I like to keep them to a bare minimum, usually working around the the problem.
And assigning an id of class to the body element is something I can’t live without, great for background image switching
For IE-specific CSS, I prefer using conditional comments to add a body class; that way I can keep all my CSS together but not depend on hacks that are by definition unreliable. It also makes the IE-specificity explicit.
See http://www.puidokas.com/updating-my-css-for-ie7/
So in my HTML:
<!--[if lt IE 7]>
<body class="IE IElt7">
<![endif]–>
<!– New Internet Explorer –>
<!–[if gte IE 7]>
<body class="IE ">
<![endif]–>
<!– Any other browser –>
<!–[if !IE]>–>
<body class="notIEc" >
<!–<![endif]–>
and in the stylesheet:
whatever { width: 10px; }
.IElt7 whatever {width: 20px; }
The HTML is somewhat ugly but is valid and with a coloring editor the conditional comments are all comment-looking and don’t bother your brain as much.
Danny
[...] When developing large sites, stylesheets can get fairly messy and hard to keep track of. If you don’t stay organized, you can end up making them larger than they really need to be and doing more work than you should have to. Here’s just a few ways to can help avoid that.read more | digg story [...]
“you can’t apply more than one class to an element”
The value of a
classattribute is syntactically a string, but it is better thought of as a whitespace-separated list of strings. This element<li class="whatever another">hello</li>would be matched by these CSS 1 selectorsli.whatever, li.another, li.whatever.another, and by this CSS 3 selectorli[class~=whatever], li[class~=another], li[class~=another][class~=whatever], if I recall correctly. Hope this helps, cheers from France.I came across you’re blog while searching for info about CSS frameworks. Your use of the “selected” class is a great idea.
Although I’ve certainly used some IE hacks in my style sheets, I’ve read that conditional statements are the better way to go. But using both almost seems contradictory… I’m not sure what I think about that.
As for multiple classes per element, you should check out this nifty use of the method if you haven’t seen it:
http://kematzy.com/blueprint-generator/
[...] Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized [...]
Hello
Thanks for the article. I’m mostly very messy with my coding, so great with some tips.
I do not believe this