Disclaimer: This is a technical post on html and css, intended for those who are very familiar with the languages.
The value of clean semantics
There are a lot of web activists that promote semantic markup, and very early in my journey into front end dev I got swept up in this. There’s something really beautiful about writing really clean html, with no extra elements or “utility classes” (classes that you put on your elements in order to recycle a css code block and not have to copy and paste).
The real defining characteristic of super semantic html in my mind is that nearly anything relating to the styling that can be pushed back into the css, is in the css and not the html. This is precisely the reason that css frameworks rub me the wrong way – they provide an advantage by saving you time writing generic ui and css boilerplate, but they also burn you big time when they ruin your otherwise shiny clean semantics with a bunch of garbage classes and ids like 'span-14 push-5 btn-large'. And don’t get me wrong, this is not the fault of the authors, it’s just the cost of writing a css framework so that it’s flexible. But it is still not ideal.
I would like to propose that we do this in an entirely different way. Now that we have been blessed with dynamic css supersets like sass and less that are very accessible even if you are terminal-phobic, we don’t need to dry up our css by wrapping reusable code in a class and applying it at the html level, we can push this back to the css level using mixins. And while we’re at it, we can take advantage of dynamic css languages’ other awesome additions to make our reusable modules even more flexible and customizable. Double win.
Rewriting the famous ‘media’ class
Let’s get an example. I’ll rewrite one of the most famous ‘css-drying’ classes of all time — Nicole Sullivan’s ‘media’ class — and push it back to the css level, saving hundreds more lines of ugly unnecessary html classes from Facebook’s news feed. And while I’m at it, I’ll make it way more flexible and user-friendly.
The following will make a lot more sense if you have read or review Nicole’s article, as I’m re-writing her code
Here’s the code (I’ll explain it in detail right after, promise)
=split($margin: 10px)
$left: $margin
$right: $margin
@if type-of($margin) == list
$left: nth($margin, 1)
$right: nth($margin, 2)
overflow: hidden
& > *
overflow: hidden
& > *:first-child
float: left
margin-right: $right
& > *:nth-child(3)
float: right
margin-left: $left
Usage is pretty straightforward. Whenever you have an element that would normally have class='media' on it, we can strip that right off the element (ahh, the freshness!), and move the style back where it belongs, in the stylesheet.
// html
<div class='comment media'> goes to <div class='comment'>
// sass
.comment
+split If that’s not enough for you, we can shave off even more code by declaring them all in once place. For example, if you have three elements that all require the ‘media’ class called “post”, “comment”, and “friend”, you could do something like this
.post, .comment, .friend
+split and whenever another element needs it, just add them right in to the list.
Now on to the flexibility. While using Nicole’s solution, you need to add 3 or 4 additional classes to the ‘media’ object in order to get it to behave correctly. With this mixin, you don’t need a single extra class. In addition, you can use any type of element you want, whether it’s an <a> or a <figcaption>. Completely clean html, written exactly the way you want.
In addition, although margins are set to 10px by default, you can optionally pass the mixin a parameter to customize the margin size.
.comment
+split(15px)
If you want to get really specific, you can pass two values, left and right, to have different margins on each side. This uses some of the more advanced aspects of sass, but the simplicity and flexibility it affords is amazing.
.comment
+split(10px 20px)
A brighter, easier future
This is just one small piece of the framework that we’re working on right now at Carrot. But unlike more popular frameworks like twitter’s bootstrap and zurb’s foundation, you can write clean html, just the way you like it. In addition, every piece is ultra flexible, so you can make it look like your own site, not someone else’s (although it will include well designed defaults for when you need them). And when you need it to get out of your way, you won’t have to spend hours hacking at someone else’s code or changing classes across your html, you can just swap out pieces where you need them.
This is the next evolution of front end development. Instead of utility classes, there will be utility mixins. If you aren’t using sass or less, I would highly recommend picking it up. And if you are still using frameworks that force classes and styles on you, start rethinking how you code. It can – and will – be better.
