I’ve been trying to write my CSS the wrong way round, and it’s taken me until now to realise.

My usual way has been to write the stylesheet, then write everything that goes in <body> and it was wrong because I would rush the body content so I could check the css, but when I filled the body content to what I wanted, I would sometimes get ‘interesting’ effects. And now I know why – I was doing it the wrong way round.
If I fill the body with the expected contents – such as with a static page here or a page at abody – paying due regard to the flow and tagging as I see the layout appearing, and then write the css, I will get 2 benefits:

  1. I can write the stylesheet sequentially according to how elements are used.
  2. I can more immediately see the full effect (my browser and screen size limitations aside).

Despite my constantly telling others that they should sketch out their plans on paper first, I never do – laziness rules on that one. I may not be a complete whizz on css, but I can do more than enough but I was, I now know, bogging myself down with the way things were. It dawned on me this morning while pondering the abody price list job that I could attack this better by doing it the other way around, so I will.

And here is a riddle (from the a.m.f ng):
I’m something you eat,
You might know my name,
Or else my description,
They’re one in the same.

14 thoughts on “Process

  1. As for the CSS, there’s a great tool in the firefox Web Developer’s Toolbar. With the EditCSS feature (and quick validation links, combined w/ the DOM inspector), you can have your unstyled html open, and start applying styles to it, watching the changes as they happen. It’s a lot of fun, and once I tried it, I’ve never gone back to doing it the old way. Then you just save your changed stylesheet, or cut/paste it, and you have your site. 🙂

    As for the riddle, I think I know what it doesn’t rhyme with…

  2. I am sure that half the CSS battle is to do with mental visualisation.
    No amount of web dev thingys can help us with that. My life became a lot easier when I developed a mental model that worked for me. That way I just about keep the markup and CSS in tandem. Just 🙂 And 5 col floats?
    Are you sure about this ? 🙂

Comments are closed.