How do you organise your CSS?
See update at bottom of post.
Given the nature of HTML and similar formats like XML etc, it makes sense to indent child elements (tags, for non X- coding) under parents, siblings at same indent etc. It’s fairly easy to read properly indented HTML code because of this formatting, although the format does often fall down when involving a CMS or dynamically rendered HTML; I don’t see many developers doing this sort of thing:
Response.Write(" <span>"+var+"</span>\r\n");
… which means that in portions of pages that are dynamic, you end up with code with no indents and no line breaks. However generally the rest of the page source will be nicely formatted.
Then with your server side scripting, that’s generally fairly neat - indenting plus comments and if you’re using an IDE then colour coding too.
But what about CSS? How do you organise your CSS?
Specificity isn’t the same as parent-child, plus a declaration and it’s rules is a single block - you can’t nest more specific declarations inside another block. I used to indent, until someone pointed out to me it really didn’t make sense because of this very reason. So I don’t do that anymore.
I rarely comment because the comment is more than likely just going to repeat what the declaration (or selectors rather) states except a little expanded. I know a “ul” is a list, as will any other developer looking at the CSS - so no point spelling it out. Perhaps I might do this sort of thing:
/**************************** MENU ***************************/
which can help partition off various collections of selectors and rules, but it’s not the best formatting system.
I usually have no trouble when I’m writing a stylesheet - even if it has a hundred selectors - because I can remember where the various sections are, and what all the IDs mean. But if I or anyone else ever has to revisit that stylesheet, it’s not quite as easy as it is to parse a HTML document or a C#/ASP.NET class library.
How do other people organise their CSS? Separate files for each section of the screen? Comments on each selector? Perhaps you don’t use stylesheets at all and use exclusively inline CSS? I can understand why some people might do that; I use inline CSS a bit when creating a new variation of a selector with one tweak to a rule just for one instance in a template is messier than a quick style=”margin-top: 10px” or something.
Please post your methods and systems - if there’s a better way it’s done, then I’d be interested to hear about it!
UPDATE 31/01/07:
Good idea Jordan; in fact I found a CSS merging script by Edward Eliot (thanks to Vitamin for the link from the article Enhance your (page) performance!) that I’m going to have to look into …
January 28th, 2007 at 11:47 pm
Hi Nathanael - nice site,
We seem to have a very similar style to organising our CSS. I generally use a section at the top of the file to provide a brief description of its purpose (for my sake more than anyone else’s!).
I will then split the styles into smaller sections like headings, tables, lists etc.
Another method I have started using lately is “stitching”. I split my CSS into smaller documents, and use PHP’s include function and some caching trickery to put it back together on the server.
January 31st, 2007 at 9:35 pm
Hey Nathanael,
I use 3 stylesheets when im cutting designs, 1 for standard elements, like straight h1-h6, p tags, ul, li etc, then 1 for the nav and 1 for id’s and classes with a comment here and there saying ‘layout stuff here’ and ‘classes here’. Its easier for me cos i know where things are and the chances are the common and stylesheets can be re-used just making small changes.
Ive explained it to people I work with, some love it, some hate it.
January 31st, 2007 at 9:46 pm
Yeah - when I worked on a MySource Matrix CMS implementation last year I had a layout stylesheet, then three layout customisation stylesheets for 2, 3 and 4 columns depending on the template and then a content stylesheet for just the content text (oh and a print stylesheet) … but that approach was selected specifically because of the CMS.
So probably other things like skins/themes and personalisation would also influence how you might break up your CSS …
August 25th, 2007 at 5:56 pm
Programming Tutorials
I couldn’t understand some parts of this article, but it sounds interesting