Hacker News Reader

Comment by gazrogers | Hacker News Reader

Bootstrap - spreading DIVitis to the masses and placing layout into HTML everywhere. We might just as well go back to tables for layout.

View on HN

I've listened to the debate about this for ages, taking everything on faith. From what I've learned, you can't truly separate layout and HTML. The best you can do is make it so minor layout changes will require only changes to the CSS. Big layout changes always seem to require changes to the HTML. People cite ZenGarden as an example of major changes with just CSS, but their markup is full of more id's and classes than would be reasonable for an everyday site. And people spend a long time tweaking to get stuff to work across browsers.

So I completely agree that using this (and most other CSS frameworks) is going backwards a bit in mixing layout with HTML. But I actually always did that. I just wish writers on the subject would help me not be confused by starting out by admitting that they are not following the notion of layout done in CSS.

Some people posted on here that Bootstrap is just for getting quick prototypes done, and then when things are stabilized, you should switch over to semantic, properly separated CSS. But if so, is that the intentions for all grid based CSS frameworks?

The intention of CSS grid frameworks certainly was at one time limited to rapid prototyping, but I'm seeing more and more sites deployed with default grid classes and CSS intact.

Using divs with classes of row, column, span_X, grid_x, et al. is, from a semantic standpoint, no better than using tables. And Bootstrap's CSS file is nearly 2500 lines, unminified with a 47K minified file size. That's a lot of overhead if you only need grid, typography and pretty forms.

It makes a lot of sense to keep the full CSS file linked while iterating the design/layout, but once it's in production, the grid classes can be replaced with semantic names and the extraneous styles removed. Here's an article I found on the 960gs homepage that covers not only combining/renaming classes, but also minimizing the amount of extraneous container divs: http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-c...

No. It is incorrect to use tables used for layout, and this widespread practice has made it impossible for user agents to treat tables specially.

A div exists to have no meaning. Using it for layout doesn't hurt anything except page size (unless there was a more specific element that you could have used accurately instead).

I don't understand how we're in the year 2012 and people are still repeating these "rules" without any understanding of why they might matter.

You're confusing my reference to DIVitis with my comment about layout in the HTML. The examples providied by the Bootstrap page are stuffed with unnecessary DIVs. I'm a web developer, so I know that DIVs exists to provide containers which add no semantic meaning to the page. But putting classes into your HTML which say class='row' or class='leftcolumn' means that you can't just change the CSS in order to change the layout - which is the whole purpose of CSS in the first place. All grid systems suffer from this weakness.

Consider this example based on the Bootstrap examples - you have three boxes containing stuff within a DIV with a class of 'row'. At some point in the future you decide to turn this into a column. Easy to do in the CSS - just change the width to the with of one item, and they'll stack on top of each other. BUT, now you have a column labelled 'row' in your HTML. This is a fairly simple to rectify example, but this problem is pervasive in grid systems.

Reply on news.ycombinator.com