Breaking [My] Good Habits

Recently, Harry Roberts of CSSWizardry fame gave a stellar talk on taking a long hard look at our previously and rightfully conceived notions of building standards-based websites.

Breaking Good Habits – Harry Roberts from Front-Trends on Vimeo.

He made some great points throughout the talk, and I highly recommend you give it a quick look. The main message was geared towards the maintanability, flexibility, extensibility, (and several additional bilities) of our code. While Harry introduces and reiterates some great examples of doing so (abstraction, using classes only, etc.), his highlights on the benefits of Grid Systems caught my attention.

I’ll admit, I used to heavily dislike Grid Systems for their lack of semantics. The thought of putting “twocol” or “grid_2” into my markup made my skin crawl. How dare they, in the name of web standards, devise such an unholy and unsemantic framework that riddles my pristine HTML. I even scoffed when my coworkers began implementing these frameworks for several client projects.

Well, one look at the markup on this site (and the footer) will reveal that I am in fact using the 1140 Grid System. So why the change?

Like Harry mentions, these systems allow for increased flexibility and extensibility. When sites change often (and they can and often do), you need a proper way of reusing components. Grid Systems allow us to abstract the layout layer of our CSS, and maintain these components separately from the rest of our presentation. Aside from allowing us to easily pinpoint structural issues, and rapidly develop websites, Grid Systems enable us to quickly provide a mobile instance of our site by using a simple CSS declaration.

@media (max-width: 480px) {
  .grid {
    float: none;
    clear: both;
    width: auto;
    margin: 0;
  }
}

Now I realize this is overly simplifying the mobile experience, especially the mobile first approach, but in reality, the alternative would be undoing widths, floats, etc. on multiple properties throughout your stylesheets. How maintainable is that?

I think Harry put it best:

“The old ways of thinking, hand-crafting our code, aren’t really powerful enough for today’s web. Things change a lot faster than they used to.”

In the past, I was heavily focused as Harry mention on hand-crafting my sites. While I still consider this true, I try not to take it to the extreme as I once had in the name of Web Standards. Instead, I and web designers/developers as a whole, must focus on what will be best for the future of our websites and applications.

6 Responses

Daniel Filler

@smurphy – Great catch! I wrote this late at night and this squeaked through. Fixed.

Dennis Johnsen

I have been stuck in my own ways as well. His talk about breaking habits really opened my eyes too.

I’m trying to incorporate all his good ideas every time i start a new project. This includes mobile first, the nav class and grids. I still can’t wrap my head around his .island class though.

About grids though – I would rather like to handcraft them to a design, so i don’t have unused CSS in my sheet. If i made a 3 column design, it comes with 3, 6 or 9 columns – correct me if this is the wrong way to do it (i find it good for the mobile first approach)

Daniel Filler

@Dennis – I don’t think there is anything wrong with crafting the grid on your own terms and minimizing unused styles. The principle of abstracting your layout to a separate layer and creating reusable component-based CSS properties is the goal.

Afterall, Harry has a great tool to create custom flexible grids, tailored to our specific project needs.

http://csswizardry.com/fluid-grids/

Matt Feisthammel

Starting from the largest supported width and working your way down is less efficient than starting from nothing and working your way up.

If you let no media query serve as your first breakpoint and you increment the widths upward from there, you don’t even need to strip those styles. Just add the grid layout properties at the narrowest possible media query where you want the grid to appear. Presto, the cascade saves you a step and potentially a lot of headaches.

Daniel Filler

@Matt – Excellent point and true to the Mobile First approach. I will certainly be implementing this in my next responsive site.

Comments are closed.