Hi
Can anyone give me some general advice on how to keep css style sheets more organised?
I bought a reputable book on css about 4 years ago and after a while found that my css would get totally unorganised. This mean’t that if I started a new web-site then I was afraid to use the same css style sheets in case I found it too difficult to alter the styling or layout.
I’ve now just picked a beginners book at my local library (published in 2009) on css which explains about how to use css style sheet and then use the @import directives in order to use multiple external style sheets.
Does anyone else use the @import directive to help organise their websites or is there an even better way now that I should know about?
Kind Regards
Matt.
p.s I’m going to experiment with the @import directive at the weekend but I’m feeling a lot more confident already about laying out a website now.
I don’t use @import. Seems like a waste of time to me, but maybe that’s just me. There’s no rule for how you should organize your styles. Just find a system that works for you. I prefer to have everything in one style sheet, and then it’s just one call to the server, but there are differing preferences.
Usually, a web page will have various sections, so you might consider grouping your styles by section. You might also decide to group color styles, font font styles etc.
Hi Ralph
Grouping elements together seems like a good way to organise but if you css style sheet becomes more than 20 screens long, I find that it can become tedious to find the bits you are looking for and even worse if you have to try and figure out how someone else has coded the css.
I’ve just seen this idea. What do you think to this idea :-
I’m not a fan of import either - personally, I’m not a fan of having multiple files to load - organizing one file into appropriate sections makes more sense to me as I only have to go to one place to work on css. Works better for me, but there are differing opinions.
There’s an interesting series running here at SP right now which you might be interested in. I don’t completely agree with all the recommendations, but for the most part it’s been and interesting reading.
IMNSHO, if your stylesheet is more than 20 screens long (assuming a decent window size, that’s roughly 1,000 lines), then you might need to re-look at how your styles are defined and see if you can simplify. Look at shorthand for styles, combining styles and/or look where you can apply classes to similar elements vs defined by id. Even if you can’t, the more files you have, the greater the chance for conflicting styles, and the more maintenance that’s going to be required.
I rarely search in the stylesheet anymore but instead just use Firebug to locate the exact line number to which the code you are altering refers and then just go straight to it in the stylesheet. Its so much quicker and you find the element instantly and doesn’t really matter how the stylesheet has been organised.
I try to group my styles logically from top to bottom (header to footer) and then page by page where differences apply. However on large sites and after the 1000th revision the styles can still end up in a mess when the client decides to change the logic of everything you have defined.
On a large site you may have to split the css files because you don’t want to hit the user with the css for all 1000 pages when they may only view one or two.
I don’t use @import either as I don’t see a need for it and because of the legacy issues and odd bugs.
Hi Paul
I’ll take a look at Firebug (http://getfirebug.com/). At the moment, I’m trying to learn using MS Web Matrix but have to do a Ctrl F to find various elements in any code
The styslesheet I’m working on at the moment is 8000 lines long so even if I knew roughly where the rules were it would take to long to scroll through and pinpoint them so i just point the mouse at the element and firebug tells me which file and which line number instantly.
Another useful tool for testing (not organising) is CSS terminal which allows you to try out new styles on a live (or local) site and saves the new rules in the browsers cookie so you don’t lose them like Firebug.
John’s TLS approach looks a lot like the ‘object oriented’ approach to CSS. I don’t really use that approach, except in small doses where there are lots of similarly styled elements.
In terms of Firebug, I’ve switched to Chrome and its native dev tools (right click on an element and Inspect Element). It’s just as good as, and often better than, Firebug. Anyhow, like Paul, using that tool I always just jump straight to the relevant spot in the style sheet.
I also like to write my CSS rules on one line, which I know a lot of people hate, but it works for me. The style sheet is much shorter, and I have no trouble finding my place in it. But it means far less scrolling—and often none at all, as I tend to work on one section at a time.
I developed a site and the style-sheet rapidly became like spaghetti so decided to reduce the repetition. My approach was similar to Database Normalization which only uses unique elements.
Thanks everyone - I picked up a lot of hints and tips here. However, I’m still confused - also I’m sorry as I should have informed you that I’m a beginner to css.
Is TLA the same as Object Orientated CSS?
Three letter accroynm usually means abbreviated something into just 3 letters which
a) I don’t know how to convert to three letters
b) Not sure if OOP CSS is the same thing as TLA
Further to @ralph’s post and to answer your queries:
>>> Is TLA the same as Object Orientated CSS?
No
>>> Three letter accroynm usually means abbreviated something into just 3 letters which
Yes because it is easier to remember and to prevent mis-spellings
>>> a) I don’t know how to convert to three letters
Make up your own and start using them, maybe in a separate style-tla.css file.
>>> b) Not sure if OOP CSS is the same thing as TLA
No it is not the same
The following script is an example of how you can use TLAs, notice how the CSS script is nearly half the size:
Hi John
I’m just trying to get all this in my head. I noticed that your 148 byte version does not include the min-height:8.8em; element or am I mis-understanding the example you’ve given to me. Thanks for helping me.
Just a comment. I know this is just an example, but I personally wouldn’t do it this way for this example because you’re only truly making savings if the css is defined inline like this (if it’s in a separate file, the file is cached), and the html ends up being longer. I would do it a slightly different way which still reduces the css, and reduces the html (which most likely will be repeated, and this have a bigger impact if the html isn’t optimized.
The original example body html is 202 bytes. This second version is 178. This version is actually one byte smaller (202 + 148 = 350, 178 - 171 = 349).
