Join Now!

Free App Dating has merged with Free Dating App

For more information, please read this post about the merger.

FreeAppDating2 Blog

A blog about dating, meeting people, being social and everything in between.
(and occasionally some geek stuff)

5 Time-Saving CSS Tips

Posted on 04/02/07 in Webdev & Design by Matt

What you probably already know

Remove default padding and margins.  Write semantic markup and use HTML elements for what they were intended.  Float this, clear that.  Use easyclearing if you like.  Tables are for tabular data.  Avoid excessive DIVs.  Validate.  Use hacks but don't rely on them.  Install the Web Developer Toolbar.  Understand the box border model.  Validate some more.

What you probably don't know

1. You should indent your CSS

#staff { border: 1px solid #ccc; }

    #staff li { background-color: #333; }

        #staff li a { color: #fff; }

#footer { background-color: #fff; }

        #footer a { color: #333; }

Notice how readable that is?  You can clearly see the hierarchy of elements that you're styling.  If you were to come back to this CSS later you'd know exactly what elements you're working with without even examining the HTML.

 

2. Create swatch CSS classes

Think of a swatch as a color from your palette.  I usually define two swatches that contain colors that are prominent in the site.  In Free App Dating's case, these are green and orange and they are defined as .swatch1 and .swatch2.   These save me time because I don't have to constantly look up hex codes to apply to elements when I want them to be a different color.   There's probably a bit of contention here:  one could argue that colors should be applied globally and creating swatch classes is paramount to defining the colors inline.  For instance, an

tag nested inside the container should always be green and tags should always be orange.  This could easily be achieved with:

#container h1 { color: #999900;}

a { color: #CC9900;  }

I completely agree with this method of applying style to elements, however I've found that in addition to defining color this way there's always a need for swatch classes when you're writing markup whose only inherited CSS properties are those defined as a base.  In other words, you're writing HTML and it doesn't have a CSS specifically assigned to it, instead it's simply using the CSS that is used site-wide.  This blog entry is a good example, I want to add green and orange to some text but I don't want to have to write extra CSS specifically for that purpose.

 

3. Create a class for copy or create a vacuum class

Many CSS tutorials advocate adding this to the top of your CSS file:

* { margin: 0; padding: 0; }

 This removes all the default padding from elements so you don't have to keep removing default spacing from elements to achieve pixel-perfect positioning.  I agree with this, but you'll soon discover that written copy (and I mean copy in the sense of sentences, paragraphs, lists, etc) looks pretty awful without any formatting.  I do one of two things:  I either apply spacing and other formatting to my container element where copy typically falls, or I create a CSS class specifically for copy that I apply when necessary.  If you do end applying spacing and formatting to your container class, make sure you create a "vacuum class" that strips out default margins and padding.  This is useful when you have a mixture of written copy with elements that need to be positioned where margins and padding would create a headache.

 

4. Create a base .CSS file and add additional .CSS files when needed

Free App Dating uses a file called default.css that contains CSS properties that apply globally or are shared across every page.  If a page or section of the website has additional needs, I create a link to another CSS file that contains properties for that particular section.   Viewing a blog entry on this site, for example, requires default.css as well as blog.css.

 

5. Assert Ctrl

The Web developer toolbar has several keyboard shortcuts that can speed development up quite a bit.  The four that I use the most frequently are:

  1. ctrl+shift+f  = Display element information (hit ctrl+shift+f then left-click on an element)
  2. ctrl+shift+h = Validate HTML (via validator.w3.org)
  3. ctrl+shift+c = View CSS
  4. ctrl+shift+y = View CSS information (hit ctrl+shift+y and then left-click on an element)

Meet Singles Near You!

Sign Up for Free App Dating (It's free) and meet someone into the same awesome stuff as you.

2 Comments

Add Comment
  • antonio wrote on 3/4/07:
    hey, nice little article here. I also read your how to build a website in 60 something hours. That was pretty informative. I'm not interested in the dating part of your site, but I like the name and design and blog. keep it real.
  • Elvendil wrote on 4/4/07:
    Nice article, though I disagree with a few points.

    1. is entirely counter to the spirit of CSS - we're supposed to be separating content from presentation. Indenting the CSS in this way means that mark-up changes will cause confusion later on. I have found that grouping by selector, and using flags, is the best way for me to organise my own CSS.

    2. I hadn't thought of swatches being applied that way. Seems useful, but again - a little redundant and somewhat counter-principle. Perhaps worth it though. On a side note - your colour selection there isn't all that great for those of us that are red/green colour blind. :-)

    4. I used to use this approach, but have since dropped it in favour of a one style-sheet approach, reliant on a class on the body tag. The overheads with file management and http requests on large sites made the multi-file method laborious and inefficient. When one big file is served thats it - cached client side, and it also compresses very well if you have your server do this.



    I wrote my own techniques up some time ago, if you are curious and have some time to kill, they are here: http://mattwilcox.net/archive/entry/id/642/