I recently posted a rant about icon fonts. In the past, my strong opinions about such things have led people to call me opinionated and pedantic. The thing is, this isn’t just a hobby to me. It’s my craft.
This isn’t just any old career path. It’s something I believe in. It’s something I’m passionate about. Why wouldn’t I do it to the best of my ability?
There are a few topics in particular that I get really fired up about. When somebody just doesn’t get these—or worse, doesn’t care—that’s when I get upset. But it’s only because I care about the web.
If you love state-based UI, I get it! But there’s an ever-growing list of anti-frameworks that give you the same benefits without the overhead of a massive dependency:
Write semantic HTML
Semantic HTML, or the lack thereof, is something I get particularly upset about. The fact is, you must always use the right element for the right purpose. This isn’t me being pedantic. A website might look all right visually, but it can still be riddled with problems due to
<div> soup. It matters.
If you need a paragraph, then for fuck’s sake, use a
<p>, not a
<div>. The “p” literally stands for “paragraph”!
But why does it matter?
There are a number of reasons. I’d say the most important is accessibility, but there are others. Here’s a short list from the MDN Web Docs about the importance of semantic HTML:
- Search engines will consider its contents as important keywords to influence the page’s search rankings
- Screen readers can use it as a signpost to help visually impaired users navigate a page
- Finding blocks of meaningful code is significantly easier than searching though endless
- Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming
Here’s a shorst list to get you started.
Keep your CSS sane
To make your life much easier, and perhaps even learn to love CSS, I highly recommend learning a maintainable methodology. There are a bunch out there, but OOCSS and SMACSS are good places to start.
I also like the approach that the Tachyons library takes. I frequently rip helper classes out of their code, without needing to include the whole thing. It’s the methodology that matters.
My friend Chris Ferdinandi has a nice boilerplate called Kraken, too.
If you agree with the points I’ve made, and you crave a simpler web, my friend Chris gave a fantastic talk called The Lean Web. I highly recommend it to all my developer friends. 💯