Website Designer India: 5 Time-Saving CSS Tips

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 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

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 Mingle²'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

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:

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

Mingle² 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:

ctrl+shift+f = Display element information (hit ctrl+shift+f then left-click on an element)

ctrl+shift+h = Validate HTML (via validator.w3.org)

ctrl+shift+c = View CSS

ctrl+shift+y = View CSS information (hit ctrl+shift+y and then left-click on an element)