VisezTrance

  • April 6, 2009 11:13 PM

    Divide et impera - using IDs to define code sections

    By Daniel
    This happened to everyone at least once when working on a large application - a minor change to a stylesheet can break the layout on one or more pages. What's worse is that this usually goes unnoticed until the website hits production.
    I think this is happening mostly because the bug affects only a seldom accessed page or a specific browser, the page is different from what the frontend developer envisioned (zero length text, variable picture width, etc) or a mixture of these issues.
    You can easily avoid this situation by using inline styles as they affect just the current page, but then again it really defeats the advantage of an external stylesheet. Some CSS frameworks can ease the use of styling markup, but what would be really nice is not to touch the html at all if possible.
    Since CSS doesn't have namespaces you can use an id as a point of reference.

    For example in order to target the fieldsets and legend tags only on the contact page, you have something like this:

      #contact-page-wrapper fieldset {
      ..
      }
     
      #contact-page-wrapper fieldset legend {
      ..
      }
     
    Every class name is similar to a global variable. When you have thousands and thousands of lines of css, name clashes occur but cascaded selectors with a parent id can easily prevent this.
    Placing an id on the container of the page (ex. the body tag) is a reliable method to target a specific page. For extra points, move that code into its own stylesheet and have a function dynamically load it.

    While I'm sure you dear reader are thinking "I'm master over my own code", it's always nice to allow others add a line or two, while you're enjoying your much earned vacation without worrying about them breaking anything :-)

    Tags:

    • css,
    • html
  • Monthly Archives

    • October 2013 (2)
    • May 2012 (1)
    • October 2011 (1)
    • September 2011 (2)
    • March 2011 (3)
    • February 2011 (1)
    • January 2011 (1)
    • September 2010 (1)
    • August 2010 (1)
    • June 2010 (1)
    • April 2010 (1)
    • December 2009 (1)
    • October 2009 (1)
    • September 2009 (1)
    • August 2009 (1)
    • July 2009 (2)
    • April 2009 (2)
    • February 2009 (1)
    • January 2009 (2)
    • December 2008 (1)
    • October 2008 (1)
  • Pages

    • About / Contact

2008, © Daniel Mircea