10 Tipps on how to improve CSS efficiency

1. Don’t start at the computer. Take pen and paper and think ahead. Scribble, write down ideas, plan your layout and your markup. Try to spot and eliminate problematic sections beforehand.
2. Know HTML out of the pocket and use appropriate markup – it’s the skeleton of your layout, and you don’t want it to be weak or incomplete.
3. Forget Photoshop, it only limits and slows down. Mockup your layouts with your preferred layout program already using elements you’ll use on the page: Boxes, elements, defined styles, linked images.
4. Play. Try to get the most out of as little markup as possible, just for fun
5. Stick to your markup, speak: Don’t add extra markup for design purposes
6. Think weird. Browse the available CSS properties and find something you can abuse
7. Debug! Use backgrounds and borders to locate the root of the problem
8. Isolate problems: Move them to a new document and find different solutions, then bring it back and see which approach works best with the rest.
9. Don’t give up. Search the web. Ask. Discuss. Sleep over it. Try again. And again.
10. Keep your experiments – all of them. As little as they are, keep snippets as a reference and library

Sure, CSS styling is a pain. Sometimes it feels like trying to turn a sphere inside-out; You get one thing right and then struggle with another. The key to success is patience and a strict step-by-step workflow.

Apply one rule after the other, add one thing at a time. And then test it. Play around with it. Find various ways to archive what you want and keep in mind how those affect further decisions, surrounding/containing elements and cross-browser issues. Over time you will learn some of those things and you get faster. You start to think in variety rather than focused, in alternatives rather than the obvious solutions. The first attempt might sound like this:

I gave this element a 1em top & bottom padding. How else could i get what I want? Will a margin do? The line-height? Any other attributes to apply that might work? What if I changed it to display:block and apply a height? How about using the parent’s dimensions and fit this one in? Might another value for position can do some magic?

Try them. All of them. Play. Sure, it takes a lot of time, a lot of trial & error. But as you go on practicing this way of thinking you’ll end up thinking like that:

1em padding. Issues: box-model-bug IE. Alternatives: 1em margin (note collapsing), line-height +2em (will center type vert.), block + height (height will be fixed), block + getting containing element to desired height, …

You’ll automate this thinking, get faster and more efficient – at development & troubleshooting. The great thing about being a web designer is that you learn something new in every project. New tricks are found every day by thousands of people, who will gladly share those with the community, giving you more hints and hooks to come up with another thing by yourself.