We all eat from the same bowl.

We are all unique individuals with unique capabilities. No two people have experienced the exact same set of challenges. This simple psychology explains why some kids don't like ice-cream. More importantly though, it explains why some companies like Mixpanel, Hubspot and far too many others, have no clue how to write CSS.

That's a pretty big statement. I better be able to back it up, right? Well, I'm going to outline where I think so many devs are going wrong and how I think we can all work together to fix the issue.

Let's start with an example.

Let me show you how to apply CSS to headings. First though, I'll let Mixpanel show you how NOT to apply CSS to headings.

The first step is to reset all headings. That way, we are free to wrap any piece of text in any h tag without affecting the way it looks.

/* Small heading */._52im {font-size: 28px;line-height: 36px;}

/* Medium heading */._52in {font-size: 32px;line-height: 40px;}

/* Large heading */._52ip {font-size: 40px;line-height: 48px;}

Now, like most other devs, you probably apply CSS directly to your h tags. Stop doing that. It doesn't make any sense. What if you want a h4 to look the same as a h3? What if you have two h3 tags that you want to style differently? With the method above, Facebook are free to apply any style to any h tag.

If everyone applied CSS to their headings the same way Facebook apply CSS to their headings, wouldn't it be the most semantic world you've ever dreamed of?

Another example? Why not.

Let me explain how margins and padding should be applied to UI elements. First though, I'll explain how margins and padding should NOT be applied to UI elements. Let's pick on Mixpanel again. Sorry guys.

Of course, this CSS can't be pasted into every site on the web. You would change the pixel/percentage values to suit your needs. You might need to add extra small and extra large margins. You might prefer to abstract it into mixins. You might even want to add a responsive version where margins hold different values on different screen sizes.

But again, if we all abstracted margins and padding into classes/mixins rather than applying them directly to HTML elements, wouldn't we all be much better off?

Maybe, what's your point?

It doesn't make sense that we're all working with the same web, designing and building very similar websites, yet we're constructing those websites in slightly different ways. We all use grids, we all like sexy buttons, we all use headings and paragraphs, yet we all implement those UI elements differently. It reminds me of browser prefixes. It's pretty clear that most of the differentiation comes not from specific needs but from a lack of understanding.

If we had some sort of open-source documentation, a universal set of guidelines for how to work with HTML and CSS, we could all benefit and learn together.

How might we benefit?

Imagine being able to walk into any job and already be familiar with how the interface is built.

Front-end devs could spend less time researching best practices and more time writing code.

Whenever new technologies like RWD, box models or responsive images came along, we could all benefit instantly.

Since there would be no more horrific CSS, our sites would perform better.

Rather than having the smartest minds working on closed projects, everyone would be exposed to the best practices and the web as a whole could advance quicker.