5 tips for better CSS organization
Organizing your CSS the right way can be a real time-saver, especially when you come back to work on a file that you didn’t touch for a while. These little tips are not an exhaustive list, but they should help you to get a better organization in your CSS files.
- Create a distinct CSS file for your hacks
In a perfect world we wouldn’t need hacks because all browsers would be standards compliant. Unfortunatly lots of people are still using Internet Explorer 6 out there, and depending on what you want to achieve you may be forced to use browser-specific hacks. If this happens, having those hacks in a separated CSS file (eg. ie6-hacks.css) will make your life easier once the browsers have evolved.
Some people take this technique one step further and use multiple CSS files to get organized. I would only do it when their is specific CSS for a website’s section (eg. styles for a complex event calendar). - Organize the stylesheet in sections
By creating sections, you’ll make it easier to scan through the stylesheet to find the properties that are situated in a particular region of your page.
You can create these sections separations by using CSS comments, as in the following.
/* HEADER */Personnaly, I also use capital letters to make these comments stand out. - Make the cascade more visual
One more time, this will help you to go through the stylesheet’s cascade faster by tabbing the children elements to get a visual understanding of the hierarchy. - Alphabetize selectors within the sections
Just as simple as it sound. Within the sections you’ve created in your file, organize your selectors going from A to Z. This will make the eye scanning of your file more logical and efficient. - Use shorthand properties
This won’t be long to learn, but really helpful to unclutter your CSS file. Shorthand properties will allow you to set multiple properties in one declaration.
For example:
margin-top: 5px;will become
margin-right: 10px;
margin-bottom: 8px;
margin-left: 3px;
margin: 5px 10px 8px 3px;CSS shorthand can be used for the following properties: font, margin/padding, border, list-style, background.
Advertisements
12 responses so far!
-
Possibly different stylesheets for different sections ie. layout, navigation, common etc…
-
you can go to http://www.codebeautifier.com to alphabetize selectors automatically (and many other things).
-
[...] CSS Orgy » Blog Archive » 5 tips for better CSS organization Quick tips for better CSS Organization (tags: CSS) [...]
-
[...] 5 tips for better CSS organization Advice on how to improve the organization of your CSS files. [...]
-
Nice tips! Thank you for sharing.
Although, I admit that I organize my CSS by color, typography, positioning etc.
-
Thank you for css tutorial, very usefull
-
Your point on capitalizing comments is a good one, I haven’t thought of it yet, thanks!
Please note that having multiple stylesheet files can also be a bad thing. Each visit requires several more http requests, slowing down the user experience. That said, using a separate stylesheet ie. for the homepage (as it tends to haver parts that are too different from other pages) can be a good thing.
In my case I tend to sort the selectors by what they do. I usually start with selectors that modify the looks of the object, then margins/paddings, then backgrounds and the like, then font-related items such as color, size, etc. This kinda goes naturally for me.
Thanks for the tips!
-Dave
-
check this out…
this is mine…
-
Joe…
Check out my domain sometime….
-
check this out…
this is mine…
-
food processorreviews reviews…
[...]CSS Orgy » Blog Archive » 5 tips for better CSS organization[...]…
-
Debian…
[...]CSS Orgy » Blog Archive » 5 tips for better CSS organization[...]…