Once again I found an awesome, extremely useful article on Web Designer Depot. Its about 10 awesome practices to improve your CSS code. Most of these Ive used, seen @SebastianJT, or are learning.
1. Stay Organized
Just like anything else, it pays to keep yourself organized. Rather than haphazardly dropping in id’s and classes in the order in which they come to mind, use a coherent structure.It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance.Declare your most generic items first, then the not-so-generic and so on. This lets your CSS properly inherit attributes and makes it much easier for you to override a specific style when you need to. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure.Use a structure that works best for you while keeping future edits and other developers in mind.Resets and overridesLinks and typeMain layoutSecondary layout structuresForm elementsMiscellaneous--- WDD
2. Title, Date and Sign
Let others know who wrote your CSS, when it was written and who to contact if they have questions about it. This is especially useful when designing templates or themes.
3. Keep a Template Library
Once you’ve settled on a structure to use, strip out everything that isn’t generic and save the file as a CSS template for later use.You can save multiple versions for multiple uses: a two-column layout, a blog layout, print, mobile and so on. Coda (the editor for OSX) has an awesome Clips feature that lets you do this easily. Many other editors have a similar feature, but even a simple batch of text files will work nicely.
4. Use Useful Naming Conventions
You’ll notice above where I declared a couple of column id’s and I called them col-alpha and col-beta. Why not just call them col-left and col-right? Think of future edits, always.Next year you may need to redesign your site and move that left column to the right. You shouldn’t have to rename the element in your HTML and rename the id in your style sheet just to change its position.
5. Hyphens Instead of Underscores
Older browsers like to get glitchy with underscores in CSS, or don’t support them at all. For better backward compatibility, get into the habit of using hyphens instead. Use #col-alpha rather than #col_alpha.This I have never heard of. Im an underscore guy, due to my habits in coding with AS3. Most of all my HTML is either a combination of camelCasing or under_scores.
6. Don’t Repeat Yourself
Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.
7. Optimize for Lightweight Style Sheets
Using the above tips, you can really cut down the size of your style sheets. Smaller loads faster, and smaller is easier to maintain and update.
8. Write Your Base for Gecko, Then Tweak for Webkit and IE
Save yourself troubleshooting headaches and write CSS first for Gecko browsers (Firefox, Mozilla, Netscape, Flock, Camino). If your CSS works properly with Gecko, it’s much more likely to be problem free in Webkit (Safari, Chrome) and Internet Explorer.
9. Validate
Make use of W3C’s free CSS validator. If you’re stuck and your layout isn’t doing what you want it to do, the CSS validator will be a big help in pointing out errors.
10. Keep a tidy house
Separate browser-specific CSS to its own individual style sheet, and include as needed with Javascript, server-side code or conditional comments. Use this method to avoid dirty CSS hacks in your main style sheets. This will keep your base CSS clean and manageable.
-->
http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/
<--
AWESOME VIDEO Another Thing I found was a RT from @SebastianJT about Object Oriented CSS. Check out this video, its pretty interesting.It talks about coding for re usability for building modules with in web pages. Very Interesting.
