If you build campaign sites, you’ll want them to have a branded look consistent with the campaign design. And that means you (or someone else) has to design the site and create the Cascading Style Sheets (CSS) files. If you know some CSS and you want to do it, but you are not a front-end developer, this article is for you. If you don’t know how to write any CSS, then you might want to come back latter. Good front-end developers generally use an effective CSS workflow and people who hack CSS generally just edit the files, publish and move on. If you want your website’s design to be fast, compatible with most browsers and easy to maintain, you should adopt some of the tools and techniques used by professional front-end developers. In this article, I’ll give some tips and link to some free CSS tools. Generally I prefer free tools, because some do the job very well and your campaign will save money to spend where it’s necessary.

Start from a framework or base theme

Today is not very smart to start coding CSS from scratch. Most of the times It’s much more effective to start by modifying a CSS framework or basic theme. There are excellent free and open source frameworks to chose from. At the moment I prefer to use this: – If I’m working on a WordPress theme I start either from Hybrid or Skeleton themes. Skeleton is a responsive design wordpress theme, ready to work well in desktops, tablets and mobile phones. – If I have to do a site/app just in html5, css and javascript my first thought goes to Skeleton or Gridless. If you prefer to do all the CSS and avoid this themes, you should at least start from normalize.css and use Modernizr. Using them will help you to achieve a consistent look across browsers and detect unsupported browser’s features.

Use a good text editor

Although there’s some IDE’s to develop CSS, I prefer to use a simpler text editor with colored code, autocomplete and error warnings. I’ve switched from Aptana Studio 2 to Komodo Edit.

Use a version control system

To be able to go back to a previous version or see my progress I use a version control system. The most popular VCS is Git, and it’s probably the best. But I’ve got used to Bazaar and I think it’s a lot simpler to use and does everything I need. On the other hand If I just need to compare or merge two files I use jMeld.

Develop and debug on the browser

It’s fundamental to use a browser developer tool. My main one is still Firebug, because of it’s extensions but I’m using Chrome Developer Tools more and more. Fortunately we don’t have to choose just one, as both are free.

Use CSS generators

Certain advanced CSS3 proprieties are not easy to get right and we can achieve better results with a CSS generator. I use CSS3 Please, and css3maker. Prefix free is also very nice, as it adds browser prefixes to your CSS code, and we can write CSS faster.

Validate your CSS

Validating your CSS will reduce the chances that certain browsers display your page incorrectly. Valid CSS is also easier to maintain. Use the W3C Validator to check your CSS code and fix the errors.

Test your CSS in different browsers

Test your pages in different browsers and different screen sizes. There’s some free tools to test browsers but I still prefer to do it the “hard” way, because I want to use the sites with other browsers, not just see the screenshots that this tools give me. For me the best is to install recent versions of each browser in your computer and use Virtual Box and virtual machines for older versions of the browsers and other operating systems.

Concatenate and compress your CSS

To make your site faster you should create a production copy of your code where you concatenate and compress it. I use YUI compressor to compress and concatenate with the text editor. The process is not very automated and it’s slow if you have to concatenate and compress very often. But if you don’t work with CSS daily you don’t need to spend time learning other specific and complex tools like Ant.

Conclusion

If you have learned some basic CSS in the past and now you want to improve your skill as a front-end developer, you can start by following the recommendations above. There’s also many places online where you can learn CSS from the masters, and some of the best are listed on the website “Move the Web Forward“. Go ahead and good luck.