Staying ontop of CSS

Cascading Style Sheet, or CSS for short, is a tool which we developers can utilise in order to quickly and effectively control the appearance of our websites. For this article I shall make the assumption that you know at least the basics of CSS and have some experience of using it in practice. What I will demonstrate here are a few small but perhaps very useful methods you can employ in your CSS in future. Primarily they are intended to help you manage the style sheets of larger, more demanding projects, and will also help in circumstances where more than one developer is involved in the work.

  1. Document your style sheet - basics - Documenting your work in any programming language is recommended. In CSS documentation can be achieved using inline comments. Take a look at the following paragraph:
    /* The main body of the website */
    BODY {
    	padding:0;
    }
    
    The text preceding the BODY commands is a comment. A comment is opened with the two character string /* and closed with */. Particularly in larger style sheets or when multiple developers are involved, comments can significantly improve the readability of a sheet.
  2. Divide your sheet into sections - Knowing where to look in your style sheet will save both you and others a large amount of time, as a large part of working with CSS is searching for commands you have already written. I find the most effective method for reducing the time you spend searching is to clearly define and group elements by section. You may have a section based on layout, one specifically for page titles, or a section dedicated to a certain division of content in your markup, such as a column. To further help you, use clear and descriptive titles to mark the beginning of a new section. I use the following pattern:
    /*---------------------------------------*/
    /*	--> L A Y O U T
    /*---------------------------------------*/
    
    BODY {
    	padding:0;
    }
    
    No matter how large my style sheet is, when scrolling even at a fast pace these titles still clearly stand out. However there is another thing you can do to ease the pain of finding sections of CSS. I have just demonstrated it.
  3. Create your own handle - You may have noticed in the latter example the characters '-->' before the title text. This is what I call a handle; an individual piece of code whose sole purpose is to identify a title. You can use whatever handle you wish, so long as you are sure it will never appear anywhere else in the sheet, other than as a handle. If you now perform a standard text search on the term '-->', using notepad, Dreamweaver, or whatever text editor you prefer, you will instantly be taken to each and every page title in your document. Magic.
  4. Indent your commands - A very simple but effective method of making your CSS more readable is to indent the commands you place within curly braces. Take a look at the following two piece of CSS code:
    1. BODY {
      	padding:5px 0 0 0;
      	font-family:Arial,Veranda;
      	font-size:12px;
      	line-height:14px;
      }
      
    2. BODY {
      padding:5px 0 0 0;
      font-family:Arial,Veranda;
      font-size:12px;
      line-height:14px;
      }
      
    I think you will agree that the first snippet is more clear than the second. This will be especially evident in a larger, more complex documents.
  5. Capitalise tag names - A simple but invaluable method I use to distinguish tag names from CSS commands is simply to capitalise all tag names, such as BODY, P, DIV, etc. At a glace you will much more clearly be able to see what elements are markup tags, and which are class or id attributes.
  6. Importing style sheets - Whilst some designers such as myself prefer to sectionise their cascading style sheets using clearly marked titles, others prefer to place their sections in entirely different files altogether! This can be achieved using the @import command, like so:
    @import "layout.css";
    
    I feel that having to juggle multiple sheets increases the amount of time it takes me to find what I am looking for, and prefer all my commands in a single sheet. However this is only a personal preference so feel free to use whatever method suits you. There are also some compatability issues with the @import command you should be aware of. However these primarily only occur with very old browsers such as Netscape Navigator 4.
  7. Backtrack - Backtracking (an unofficial phrase I have coined for this article) is the method of identifying not only elements such as id and class handles, but also their respective markup parents and containers. Take a look at the following two code snippets:
    1. DIV#container P.comment {
      	font-size:12px;
      }
      
    2. .comment {
      	font-size:12px;
      }
      
    Both identify exactly the same element - a paragraph tag with the class attribute comment. Whilst at first glance snippet 1 may appear to mean much unnecessary work, in the long run it will save you a large amount of time and hassle from having to delve right back into your XHTML markup every time you want to see in what context the comment class appears. It also provides you with greater flexibility and control over the markup. For example if you identify two instances of the class comment but within two different containing elements you can then individually style them however you wish.

Dated: 21/04/2006. Filed under: Web Design.


Comments

On 23rd April 2006 Oliver Zheng said:
Gravatar image
"Capitalise tag names" - I have never thought about that, but it sure makes code a lot clearer. Great tips.
On 23rd April 2006 Steve Tucker said:
Gravatar image
Hey, thanks Oliver. Maybe I should be putting some of these tips in the "area51" section of this site?
On 24th April 2006 clive said:
Gravatar image
what is the font veranda?
On 24th April 2006 Steve Tucker said:
Gravatar image
Veranda's an imaginary font I dreamt up when I couldnt be arsed to find the correct spelling of Verdana - I finished the article at about 2am, as may be evident! :)
On 27th April 2006 Stephen G Tucker said:
Gravatar image
Craziness. Just thought I'd stop in and say hi. It's almost eerie how many Stephen Tucker's out there are in the artistic / computer world. There's a heavy metal guitarist, a conductor, and several computer related people such as yourself. Almost makes you wonder if you'd be doing something else had you been given a different name!
On 27th April 2006 Stephen J Tucker said:
Gravatar image
Thanks for replying mate, but you forgot about the Stephen Tucker who works at Oxford University too. Maybe be should set up an official annual "Stephen Tucker" get-together...
On 14th August 2006 Stephen G Tucker said:
Gravatar image
Yes, there seems to be quite a few Stephen Tuckers around. I'm an Information Technology Manager for the State of South Carolina (USA) and have been in the computer business for 40 years.
On 25th November 2006 Ted Pack said:
Gravatar image
Steven G - is this you? It is from Yahoo! Answers.
=================================
Please, I need help locating my father, Stephen Gwynn Tucker, of GA.?
I'm 36 and have never met my father. I realized, after the sudden death of my mother, that I needed to get serious about locating him. I don't know where to begin, though.

Could anyone share some tips on successful methods of finding relatives? Any info, please?

Or...does anyone know a Stephen Gwynn Tucker, born in Georgia around 1946-47? He was a systems analyst in the US Air Force stationed at either Offutt AFB in Nebraska or in Lackland AFB in Texas in 1970. He may have had some connection to White Plains NY, or to IBM.
I'd really appreciate any help you could give me! Thanks!

On 7th December 2006 Stephen D. Tucker said:
Gravatar image
Hi there,

I'm no one's father, but I AM in I.T. like the rest of you! I'm a web designer from Australia but based in London at the moment. It's freaky how many ST's there are in this field!
On 13th February 2007 Steven F Tucker said:
Gravatar image
Im a building surveyor from Detroit, MI. Big hello to all the other Steven Tuckers here!
On 27th June 2008 paris hilton said:
Gravatar image
css Font examples , Properties , Attribute - - //
http://www.css-lessons.ucoz.com/font-css-examples.htm
On 5th July 2008 Html Lesson said:
Gravatar image
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

Journal Archive

Search the archives of this website for design and web-related articles.

Search Archive:

Miscellaneous

Other fluff that doesn't fit within any other category.

XHTML | CSS | 508