How to Organize your CSS code


  • Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.cssglobal.cssflash.css (if needed) andstructure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”
    1. h2 { }  
    2. #snapshot_box h2 {  
    3.     padding0 0 6px 0;  
    4.     fontbold 14px/14px “Verdana”sans-serif; }  
    5. #main_side h2 {  
    6.     color#444;  
    7.     fontbold 14px/14px “Verdana”sans-serif; }  
    8. .sidetagselection h2 {  
    9.     color#fff;  
    10.     fontbold 14px/14px “Verdana”sans-serif; }  
  • Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]
    1. /* ———————————–*/  
    2. /* ———->>> GLOBAL <<<———–*/  
    3. /* ———————————–*/  
  • Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. [5 Steps to CSS Heaven]
  • Organize your CSS-styles, ordering properties alphabetically. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.” [Christian Montoya]
    1. body {  
    2.     background#fdfdfd;  
    3.     color#333;  
    4.     font-size1em;  
    5.     line-height1.4;  
    6.     margin0;  
    7.     padding0;  
    8. }  
  • Separate code into blocks.. “This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples: /* Structure *//* Typography */ etc.” 
  • Hook, line, and sinker. Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.” [Ryan Parr]
  • Break your style sheet in separate blocks. “I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. […] After element declarations, I have my class declarations; things like classes for an error message or a callout would go here. [..] I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I’ll also declare containers even if they don’t have any rules.”

You may also like...