In the past, whenever I’ve done HTML, I’ve been bipolar. Either do whatever had to get done just to get the page rendered right, or stick to the lofty tenets of html5 and write semantic markup. Now that I’ve bounced between those two for a while now, I’ve learned a few things:
- Doing everything semantically ends up counter-productive. Nothing generates document outlines correctly, and writing the CSS for having many H1 and H2 tags is going to be a nightmare. You’re going to end up sticking random elements in your <header> tags, and <hgroup> might as well not exist.
- Likewise, surprise surprise, just hacking things together makes a mess.
- Try to arrange your markup in this basic pattern:
section > header + .content + footer. Making sure your footer doesclear: both;will also make your section act like it has a clearfix class. - You can never have too many container elements. They let you mimic box-sizing: border-box, do border tricks, and do z-index fixes.
- Your reset/normalize CSS should be designed to make body text look good, not the rest of the site.
- Use SCSS or LESS. Which one to use? I lean towards SCSS because it has Compass, but Bootstrap uses LESS. I really don’t care which one I end up with.
- Don’t rely on Compass. Treat it as a nice way to generate shortcuts for cross-browser compatibility and making sprites, nothing more.
- Margins should never be applied to the tops, only bottoms. Failure to follow this will result in random ragged top edges.
- When deciding if you should use margins or paddings, don’t consider if things collapse first, assume borders and paddings first. Cycle through debug css. As a general rule, structure tags will end up with paddings and tags inside structure will end up with margins.
- If you do a grid layout using floats, make sure it also works at browser zoom levels.
Hopefully I’ll come back and expand on each of those points in the future…