We build web applications.
From business tools to social and educational media, we have the team that can turn your tech fantasies into reality.

Keeping Your CSS Organized

Posted in Articles by admin with No Comments

Jan2010 31

Cascading style sheets (CSS) define the design of your website (what it looks like).  Font choices, font sizes, background colors, page layouts … all are controlled by CSS files.  Every now and then I open up a CSS file that I wrote several years ago and ask myself, “What was I thinking?”  If you’re like me how you organize your CSS files has evolved over time.  Here is my best advice to keeping your CSS files organized.

Keep all CSS in external files

First and foremost, keep all your CSS code in external files.  Your individual HTML pages should have no CSS code in them other than the call to the stylesheet in the <head> portion of each page.  This ensures a clean separation of design (CSS) and content (HTML) and makes website maintenance exponentially easier.  Here is an example showing how to add a stylesheet to an HTML page:

<link rel=“stylesheet” type=“text/css” media=“screen” href=”/inc/style.css” />>

Keep your CSS files in one directory

I keep all my CSS files in a separate includes directory for good organization as well (typically a directory named “includes” or “inc”).  By keeping all your CSS code together in one location you have a central directory for all CSS code, which will also help with website maintenance in the future.

Never use inline styles

Inline styles are really no better than the old <font> tags.  I can tell you there is nothing more frustrating than making a global change to your main stylesheet only to find that the change is being overwritten by inline styles on certain pages.  (Inline styles overwrite global styles.)  Save yourself the headaches of going through individual pages to clean up inline styles.  Don’t use them.

Use a CSS reset

Browsers have a tendency to interpret default values differently for any given element, which can cause you cross-browser compatibility headaches.  A CSS reset file levels the playing field across all browsers by setting all default values to the same value.  Eric Meyer’s CSS reset file is an excellent example of a reset file.

Use Comments in your CSS files

Just as you can have comments in your HTML files, so to can you in your CSS files.  Comments are also great for delineating sections of your CSS file and for explaining (to future you or someone else working with your code) what a particular block of code does.  Comments in CSS files are defined by this syntax:

/* css comments here */

Organize your CSS logically

Within the CSS file itself it is best to have an organized structure.  For me I organize by the following order: global elements, sections (header, body, footer), forms, tables.  Keep in mind that CSS files inherit so defining global elements first makes sense and getting more specific as you move down can override global elements where needed.

Use IE conditionals

Inevitably you will come across CSS bugs, particularly in older browsers (yes, I’m looking at you IE6!).  Rather than include the fixes for these bugs within you main stylesheet, create a separate stylsheet for the particular version of Internet Explorer causing you the problem.  This ensures that your fix doesn’t cause issues in other browsers.

You can read more about IE conditional comments at quirksmode.org.

Be open to change

I can tell you that with experience you will find better ways to write and organize your CSS files.  Like I mentioned in the opening I’m constantly refining and improving my CSS files and you should be open to such changes.  The internet is constantly changing and staying on top of these changes by adapting your work methods will help keep you ahead of the curve.

Post dicussion

You must be logged in to post a comment.

  • Subscribe

    You can have new blog posts delivered to you as soon as they're published simply by subscribing to the RSS Feed below!

     

    Subscribe to RSS Feed | What is RSS?

     

    • “We are really happy with the way you understood our needs and are amazed by the speed and efficiency you have shown in customizing your Online Testing solution according to our needs. Thank you.”

      Gems Recruitment Consulting
    • “If you want original ideas, fast turn-around, lightening fast personal response and a top quality product at the end of it, its all in one place – Texel Graphics. Dont take my word for it, look at the quality of the work, look at the other testimonials in their website, and most importantly, BOOK NOW – before the prices go up!”

      Pushpak Tours and Travels
    • “I’m exceedingly happy with the work you have all done and fixing the major problems in the earlier version of the site – it has completely satisfied and exceeded my expectations. Many thanks to you.”

      www.visagenie.co.uk

      Visa Genie Ltd
    • “Texel Graphics worked hard to produce what was requested. First Empression counts. This is reflected at the massive increase in our web site traffic. The standard of work and customer care is second to none. I well recommend TexelGraphics.com.”

      www.jmfountain.com

      JMFountain
Downloads Web Designing Capabilities Presentation
Brochure on Internet Marketing
Brochure on Softwares for Education
Features of TestEzee Online Testing & Assessment Platform
Contact
General inquiries: contact@texelgraphics.com
Support: visit the FAQs
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 8
Updates

Our newsletter is awesome. Subscribe and get the latest updates.