Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Patrick Metcalfe
PLUS
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?