RSS

Print

FC Member Blog

Cascading Style Sheets, Play-Doh and LEGOs

BY Jeffrey OlchovyFri Jul 18, 2008 at 4:30 PM
This blog is written by a member of our blogging community and expresses that member's views alone.

What do those three have in common?

Everything and nothing.

I recently wrote about my preferred way of organizing CSS (Cascading Style Sheets) and unlike the other articles on the topic, I'm not talking about organizing your code after you complete it - you know, like tidying up indents and sticking flags all around. I mean, yes, you do this as you write but to what extent?

See, I'm going for organization during the property and value declaration process. Now this is a topic I have yet to see get exposure.

I look at it from the following perspective - using a mass style reset or not.

So if you were to take a blob of play-doh from a container and begin to make a, say, flower. What do typically always do with your blob before anything else?

That's right, roll it out into a big, honking tube.

And that's what I'm saying we do when we transponse HTML code to CSS. We always go about designing our end product with a sequential, ordinate production sequence that largely relies on the display property.

So, when I write my code, I see the following design patterns occuring:

I declare my display property. If they inherit the correct style, I forego it. But after that I typically go for the larger and positioning and outerbounding properties that determine the ultimate on-screen placement.

Then we worry about font, color, and all the decorative hoop-la.

Enter our LEGO relation.

If I were to ask you what the best determinents were for deciding where any given LEGO block would best fit on a board what would you say?

And remember we are talking about fit, first and foremost.

Would it be the color? No. The decorative sticker label on its face? No. It's size? Getting warmer. It's shape? Bingo.

So, usually once we have the display, margin and padding, positioning, etc., down we can declare the other intricacies like color, font and background images.

While this philosophy doesn't apply to every line of code you'll be transforming, it's a great pattern that I noticed and the analogy I see with LEGOs and Play-Doh makes work fun again.

I orginally wrote about this philosophy of development for the blog entry entitled "A Better Way for Organizing CSS."



Sign in or register to comment.
or