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.

    
      /* A Mixpanel heading on homepage */
.home .case-studies h2 {
font-size: 40px;
font-weight: 300;
font-family: Stratum-1-web;
letter-spacing: -1px;
}

/* Another Mixpanel heading on homepage */
.home .lessons-learned .content h2 {
font-size: 40px;
font-weight: 300;
font-family: Stratum-1-web;
letter-spacing: -1px;
}

/* Another Mixpanel heading on homepage */
.home .testimonials h2 {
font-size: 40px;
font-weight: 300;
font-family: Stratum-1-web;
letter-spacing: -1px;
}

Three similar headings, sharing multiple styles, each coded individually. A CSS fail of epic proportions. Here's what Mixpanel should have done.

    
      /* All large Mixpanel headings */
.heading-l {
font-size: 40px;
font-weight: 300;
font-family: Stratum-1-web;
letter-spacing: -1px;
}

By contrast, let me show you how Facebook Home apply CSS to headings, the correct way.

    
      /* Reset all headings */
h1, h2, h3, h4, h5, h6 {
font-size: 13px;
margin: 0;
padding: 0;
}

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.

    
      /* A Mixpanel heading */
.section.visualize h1 {
margin-bottom: 30px;
}

/* Another Mixpanel heading */
.section.nitty_gritty h1 {
margin-bottom: 30px;
}

/* Yet another Mixpanel heading */
.section.feature h1 {
margin-bottom: 30px;
}

Is that three similar headings with the same bottom margin, each coded separately using ridiculously specific CSS selectors? Yup! Not the sexiest few lines of CSS I've ever seen in my life.

At the risk of sounding like a total fanboy, let's see how the guys at Facebook implement margins and padding.

    
      /* Small margins */
.mas { margin: 5px; }
.mts { margin-top: 5px; }
.mrs { margin-right: 5px; }
.mbs { margin-bottom: 5px; }
.mls { margin-left: 5px; }

/* Medium margins */
.mam { margin: 10px; }
.mtm { margin-top: 10px; }
.mrm { margin-right: 10px; }
.mbm { margin-bottom: 10px; }
.mlm { margin-left: 10px; }

/* Large margins */
.mal { margin: 20px; }
.mtl { margin-top: 20px; }
.mrl { margin-right: 20px; }
.mbl { margin-bottom: 20px; }
.mll { margin-left: 20px; }

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.


Have I gone absolutely nuts?! I'd love to hear your opinions on this. Shoot me an email or send me a tweet.