More thoughts by Harry Roberts
Every time you hard code a width or height you're making a commitment you might not necessarily want to be making. Keep things fluid and make sure a component can be picked up and dropped anywhere else on the site without having to change a thing.
Pragmatism and power > perfectionism and prettiness. Code is there to do a job, the only person who cares how pretty it is is usually, 99% of the time, you.
If you can look at code you wrote 6 months ago and shudder it means you're doing something right. To learn that much in that little time is great!
It's not always about reducing lines of code, it's often about reducing lines of repeated code...
The pixel is no longer relevant in web design in 2012. It's all about ems, percentages and proportions. A two column layout is no longer a content and sidebar 'div' that are 600 and 200 pixels wide; it's now a two column layout where the content area is three times wider than the sidebar.
Always be explicit in your code. Don’t use
margin:0if you really mean
margin-bottom:0. Every time you use shorthand you need to check that it’s not inadvertently setting (or unsetting) another value at the same time.
With the exception of STDs, things are better when shared. Get making, sharing and contributing to things; it’s the best way to learn and the best way to get yourself out there!
Arbitrary design changes lead to arbitrary code changes; this is how code, notably CSS, becomes heavily sprawled and messy. Make sure everything is designed for a reason and in a structured, non-arbitrary manner to ensure your code follows suit.
I tend to bug fix solely in Firebug and then port any changes over to my actual CSS file once I deem a bug fixed. Quite often, however, I get so far into the work that I totally forget I actually need to move the Firebug code over. I’ve actually marked bugs as complete and committed code without realising my ‘fixes’ were not actually in there. Firebug is a gift and a curse for me…
Classes are not semantic or unsemantic, merely sensible or insensible.
A PSD/PNG should be nothing more than an idea of a website. It should give clues and a direction to the build, but ultimately should not be treated as a final design. Following PSDs to the pixel will lead to ill-considered code, and code is your final product, not an image. For example, if your PSD uses three shades of very similar blue, the build should pick and honour just one. There is no point repeating similar declarations in your CSS when a happy middle-ground is more efficient, easier and quicker. A PSD is a clue, not a contract.
Get a jsFiddle account, seriously. Since getting that ability to try things out instantly I have tinkered way, way more and built so many more cool things. If you want to get better, always tinker; if you want to tinker, make it easy to do. jsfiddle is to a front-end developer what a sketchbook is to an artist.