Comment by 3oheme | Hacker News Reader

Comment by 3oheme | Hacker News Reader

I feel that most of the answers in this thread are wrong.

Design patterns, as the wikipedia says, is "a formal way of documenting a solution to a design problem in a particular field of expertise".

So, it's a solution for a specific problem.

The main issue with HTML/CSS is that people tend to think that there's a best approach than can work with every website. But different websites require different HTML/CSS architectures, because they offer different design problems! It's not the same to create a corporate website than an application website (just to name two different problems).

I'll use the layout as an example:

There are different ways to define the layout of a website (call it grid if you want). If I want to create a secondary column, there's the "explicit" way, where I specify that my div will take 1/3rds of the main layout with a ".col-md-4" class (like http://getbootstrap.com/css/#grid does). And there's the "semantic" way, where I create a div with the "sidebar" class, and my CSS will make the div to take 1/3rds (like http://neat.bourbon.io/ does)

None of this two approaches is the best. Each one is a design pattern. And each one will be a better solution for a different problem.

In the visual classes example, your appearance logic in now in two places: your HTML with the visual classes, and your CSS. Using only CSS or SASS or whatever else for appearance allows you to have a single place to modify the appearance of .sidebar items, which is objectively better.

Hi Nailer!

Good call, although I would disagree with the "objectively better" :-)

I'd recommend using a semantic layout when you have an "application website", like gmail, github or twitter. The layout is strong, and the content needs to lay within each layout block. For this specific design problem, I think that the semantic layout is a good design pattern.

But sometimes the problem is different. Sometimes you have a more "editorial" approach, where you need some specific layout (this is a good example: http://stackoverflow.com/questions/24060704/achieving-a-comp...). Trying to define that grid semantically is nearly impossible! And the problem get worse when that grid doesn't repeat anymore, and the next one is slightly different :-(. In this circumstances, I'd suggest using an explicit grid system.

There's a myth in web development that says: "If you have a good semantic markup, you can achieve any design layout with CSS". This is absolutely false! This kind of myth usually comes from backend developers after seeing csszengarden. Sometimes you need to add some html tags like divs (that are harmless, as they don't have any semantic weight). Don't touching the html will mean going under a CSS hell with hacks and cross browser issues.

Does this sound like bullshit? What are your thoughts?

Cheers!

It doesn't necessarily have to be semantic, but your visual styling should be in your style sheet. I'd do the following to achieve http://i.stack.imgur.com/cuCY0.png (assuming box model border box):

.story-large { width: 50%; @include scut-ratio-box; }

.story-small { width: 25%; @include scut-ratio-box; }

etc. I actually did something similar in production creating the Microsoft Surface 2 launch site in 2013: http://mikemaccana.com/images/work/screenshots/uncompromise-...

Reply on news.ycombinator.com