Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Patrick Metcalfe
Patrick Metcalfe
Courses Plus Student 7,563 Points

Grid Classes

So this is more of an opinion question rather than a correct answer question, so I'm interested to hear what people think.

So I've been thinking a lot about the structure of HTML and CSS lately and am struggling with the use of classes. And I'll break down my much larger internal debate into the idea of grid classes.

There are two approaches to grids.

  1. Classes ie. grid-50 tablet-grid-100 like on treehouse
  2. Scss mixins @include my-grid-system-mixin(12) with a media query that changes it at some size

I would say the latter is the best because the former is very rigid. "At tablet change the look of these classes site wide!" is what is being said but the idea of RWD is to change it when it starts to look ugly, which could be at different sizes for different elements. The problem I see with the latter however is that it leads to single class elements. Take a simple 50/50 section that is 100/100 on mobile. Because the children of this element change form at a different size then a 50/50 somewhere else, you cannot use the same class. You'll need a unique class specifically for elements of this section, and at that point why not just give the parent a class name and use a child selector css rule instead of a separate selector for the children. AND at that point why not just use an id!?! (excluding performance).

So how do you layout your pages? What approach do your take?

1 Answer

Have you checked this out?