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
Use a good text editor
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.
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.