Ask HN: Your coolest, most useful web design/dev tip?

I've found that web design, and back end development, is surrounded by an amazing community of people. With so many people doing neat things it's no wonder that so many nifty tips and tricks come about. Many of these tips or tricks become part of many people's bag-o-tricks - their "go to" way of achieving neat effects, or awesome typography, or just anything that makes web development that much more appealing. Often times it could be a certain font that you use at a certain size, and it just looks amazing you think. Or, some CSS trick that you feel gives your pages that current, trendy look. Even could be some Photoshop trick that you like to do with images for your sites. Anything. Most people have a few.

So, I thought it'd be fun to share yours. If you had to pick one or two items from your arsenal of tips/tricks, which would they be?

One simple way to figure out the correct way to create a CSS hierarchy is to avoid using physical descriptions entirely in your tags, and focus on "content" descriptions. Your classes should not ever be called "green", "absolute", "underlined", "float-right" etc. They should be called "main-menu", "primary-container" etc. This carries over into using javascript to control the look of the page: your styles that will be swapped should be called the state of the object, not the physical change (ie: call it "active" not "enlarged").

This may seem trivial/obvious, but if you are working on a large site, or a front end intensive site, it's pretty important and there is a lot of this, even in otherwise clean codebases. If you create lots of subclasses (like "absolute", "red" etc.) you tend to couple the styling of the page with the content in a really messy way (if you go to update the styles of this page you will have to do a lot of html editing as well, which defeats the purpose of external CSS).

zoom:1;

Sensible includes/templating with PHP or whatever stack you're building on. This is so useful when done well, but I don't know how many times I've seen otherwise intelligent people sitting there copying the same markup/code into every file or banging their head off the wall when Dreamweaver or some other bloated suite tries to update a "template" on 4500 files and upload them to production.

The idea is simple: anything that you're going to put in more than a couple places/files, should be pulled out and put in a separate included file. Your doctype declaration? Your nav bar? Your generic site-wide footer? Put all these kinds of things in includes, update 1 file later and your changes take place everywhere.

This goes pretty much 100% against my tip. Absolutely DO use a grid system for your design, please DONT'T use a CSS grid framework.

Here's why:

Let's say you have a class "column-760" for a 760px wide column. Now let's say you want to re-design the page. Not only do you have to write new styles, you have to go in and remove all the places you've written "column-760" in the actual markup. This entirely defeats the purpose of external CSS, and incorrectly couples style with content. I can't tell you how frustrating it is to work on a page that says something like:

DO use content descriptive class names, DON'T use physically descriptive class names.