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

HTML

Posted by Esteban Poll
Esteban Poll
2,931 Points

Presentation in the markup?

Maybe I'm missing something here. In looking at the basic html tutorials they introduce a grid system for laying out your page in a grid. But in order to use this you are forced to use things like <div class="grid_5"> and <div class="grid_3 omega>. These classes explicitly indicate the number of columns to span across the grid, and whether or not it is the last element in the grid.

My issue is that these are basically instructions on how to lay out the content, right there in the html. I thought that the whole idea behind html and css was to separate the web page structure (html) from the presentation (css), so that you could easily make styling changes later by just changing the CSS.

3 Answers

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

Hey Esteban,

I tend to agree with you. I prefer not to use grid systems that require you to put the presentation instructions in the markup.

However, I would add a couple of points:

  • The "whole idea" of HTML and CSS is to make web pages. Separating content and presentation isn't strictly required, but it's a really good idea to do it when you can. Grid systems like this one (and larger style frameworks like Twitter Bootstrap) that mix style and presentation do still offer two real benefits:
    1. They can speed up development time considerably.
    2. They can make it easier for teams of developers working on larger sites to build pages with consistent styles.
  • A grid system that keeps all the presentation in the CSS requires some advanced techniques. I personally prefer something like semantic.gs, but that requires using a CSS preprocessor like SASS or LESS.

Even with those two points, though, I completely agree with you that it's a good idea to separate out content and presentation more than most grid systems do.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I'd add to @Randy's already excellent answer that, CSS frameworks tend to create very unsemantic markup and often making hard to understand how that markup is working, thus making it harder to maintaince the code in the future. Using a CSS preprocessor, however can help alleivate some of the these issues.

I'm not sure that using a CSS framework outside of prototype stage is ever a best practice. Views differ on the matter, some people (particularly those leaning toward the development-side) are quite passionate about using CSS Frameworks.

Esteban Poll
Esteban Poll
2,931 Points
Esteban Poll
Esteban Poll
2,931 Points

Thanks for the awesome replies, fellas. I'm glad it wasn't just me misunderstanding something.

I do have some experience working with html and css. I did some web development in the mid 2000s, so I'm not a complete newbie, but I have been away for several years. I'm taking the treehouse courses to get caught up with the latest developments and techniques in web dev/design. So it confused me to see all of that presentation-specific code in the markup, in a class that I assumed to be teaching the modern, up-to-the-minute best practice on how to do web pages today.