CSS – speeding things up

June 30, 2010

A bit of house-keeping (for wont of a better word) first, I’ll be moving this blog in the next couple of weeks to integrate with my website www.bigthingsandlittlethings.co.uk. When I first set this blog up I wasn’t entirely sure what form it was going to take but I’ve managed to keep it quite web-relevant (thus far) so it seems silly to keep two separate identities running when really they are parts of the same thing….

Now, boring stuff over, on with the blog.

This isn’t a hugely technical blog this time but covers a few CSS-related things that I have found make a big difference to workflow and just generally making things a bit easier to organise and manage.

I came across the notion of CSS ‘global resets’ a few years ago, to me they make a great deal of sense, especially with regards to white space (http://leftjustified.net/journal/2004/10/19/global-ws-reset/) – I find it far easier to start from nothing and completely build up my styling in the knowledge that I’ve specified every element rather than let some odd default browser setting trip things up. The notion here is that all browsers have default margin/padding/font-face/etc settings for elements that will be applied if you don’t specify an alternative, the annoying thing being that all of these browser defaults are slightly different. With a global reset you, as the name suggests, reset all instances of the specified attribute (whether its padding, margin, font-face, whatever) to zero, or Arial, or black depending on the attribute in question. This then gives you a specific base point to work from – which I find very useful.

Some good examples of CSS resets can be found here http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/ and a good one here http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/ http://warpspire.com/features/css-frameworks/

A further use of resets is detailed here, http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/ Smashing Magazine takes CSS resets as an element of their suite of recommendations for developing a CSS framework – on reading this article I realised that I already used my own framework to some extent (I just didn’t refer to it as such) as there were certain stylesheet practices and scripts that I use as a matter of course – the acknowledged disadvantages of frameworks – such as the time taken to familiarise yourself with them and the possibility of inheriting bad code if you use someone else’s – didn’t really come into play as all the code I use is hand-written by me, I’m not saying I’m perfect though!

I’d be interested to hear about people’s experiences using some of the external CSS frameworks out there – there is a handy list of some of them here http://www.webdesignbooth.com/10-promising-css-framework-that-worth-a-look/ – have they streamlined your workflow or do they cause more problems than they solve?

There are also a couple of great articles at Smashing Magazine (who I rate highly – as you can probably tell) regarding good CSS practice and tips for better coding here http://www.smashingmagazine.com/2009/07/20/50-new-css-techniques-for-your-next-web-design/ and here http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: