My question rephrased in other words, is it bad to use <h1> with small font-size or <h6> with big font-size?
Example:
<div>
<h6 style="font-size:30px;">I am a big Header</h6>
<hr />
<p>Lorem ipsum...</p>
<h1 style="font-size:16px;">I am a small Header</h1>
</div>
Does anyone know if this will mess up with the search-engines?
Also, what are the real reasons for not doing this? (different than the obvious "if the CSS don't load for some reason, the page will look ugly")
You need to do everything you can to make your webpages as simple and standard as possible.
Anything you do outside of that rule will make it more difficult for anything or anyone to understand your code, and this will inevitably lead to problems.
Search engines, browser plugins, other developers, news services, etc. All will be confused by strange markup, whether it's a <h1> tag where <h3> would make more sense, or just <span style="font-size: 16px;"> is irrelevant. They're all the same thing.
The actual list of problems is unknown. And it's constantly changing anyway. There aren't two or three big problems, there are two or three million small problems.
When your webpage is read out loud by the new voice systems in Ford cars, what happens to the headings? Have you tested this? I bet you haven't. What about the equivalent system other manufacturers will release in a year or two?
The key is to understand your webpage will be viewed and processed by a vast and constantly changing list of software, and not just be rendered as pixels on a 21" screen by a web browser. You need to do everything you can to make your content available to everything, and that means <h1> should be used for the most significant headers on the page, and <h6> the least significant ones, though being the most significant header doesn't mean it has to be the biggest font size.