I’ve never been a fan of modifier words when it comes to work – small, simple, easy, just, etc. Unless you’re also an subject-area expert, your modifier may be wrong, at best, or offensive, at worst. They’re more than just words.

I recently found myself committing this faux pas outside of tech.

Magically two nuts from my motorcycle’s manifold clamp came off, causing rides to be loud(er), hot(ter), and exhaust-y. It was a small annoyance until I noticed it really affecting performance, so I finally decided to do something about it. However, after trying for an hour by myself, and another hour with my father, I realized replacing two small nuts was more than my keyboard-laden fingers could handle, so I took her* to a motorcycle mechanic.

I’ve taken two other bikes to this mechanic, and he did some serious work to get a rusted GSX-R 750 up and running, so I feel comfortable with him. As I was describing the problem, I found the words inadvertently (because when you do something hypocritical it’s inadvertent, whereas others are callous monsters) pouring out of my mouth.

“It should be an easy fix.”

“An easy fix? Then why didn’t you do it?”

(Slightly fictionalized quotes due to memory and storytelling ease.)

I couldn’t believe I did that. With one simple word I trivialized his effort.

What I meant to say was, “It should be an easy fix with a skillset like yours, and the tools at your disposal.” Even so, trivialization. I apologized, told him I was often on the receiving end as a web developer, we laughed about it, and forgot.

It wasn’t an easy fix.

As it turns out there was a gasket behind the clamp that needed to be adjusted, which could only be done by removing the entire exhaust system.

With my limited knowledge and perceived scope of the fix, I incorrectly labeled it as easy. I believe this is where the root of the problem lies – assumptions based on limited knowledge.

How do we solve this? Don’t modify the scope or degree of effort required for somebody’s work. Let them do it. (If you’re also an subject-area expert and somebody over inflates, that’s another issue.)

Last year, Brad Frost wrote about the inverse of this problem where “just” makes the presumption that the other person has full knowledge to complete the task at hand. This presumption can make it harder or impossible for them.

“Just” is a dangerous word.

We approach problems equipped with our own set of experiences, perspective, and skills. It’s extremely challenging to step outside of our own perspective when communicating with others, but it’s increasingly essential to do so.

Brad Frost – “Just”

When I retweeted Brad’s article, my co-worker Mark shared his vimrc file, in which he highlights words to avoid. Coincidentally, the CSS Tricks article linked in his commit relates very closely to Brad’s post.

We need to be careful with our words. Clichés about their might are justified.

And for the love of kittens, stop saying the website is “broken.”

*My motorcycle is a female. Her name is Holly.

The synopsis of the project is simple; I’m going to send handwritten postcards to important people in my life outside of Manhattan (sorry Manhattan friends.)

Why? I guess the retort of why not might be too snarky here. I had the idea originally when I received a handwritten postcard of NYC from SassConf. It was pretty cool to receive such a personal touch from a conference, and of course they were quite unaware that Manhattan, Kansas, was an actual place. I planned on sending them a postcard of the lesser-known Manhattan, but that never actually materialized…until now.

I’ve also been increasingly more interested in sending personal, handwritten notes to people, which is odd considering I fucking hate cards. I guess I’m tired of the more impersonal texts, Facebook messages and their ilk. Fuck, does that make me a hipster? I have been wearing a lot of plaid lately.

I used to love having pen pals as a kid, and my handwriting has become almost unreadable in its obsoleteness.

So friends, if I happen to ask you for your mailing address, despite our lack of recent contact, feel special, that means you’re important to me. Everybody else will just have to wait by the mailbox to find out if they’re included.

I originally started writing this article when I was in the midst of the problem (despair might sound a bit dramatic here, albeit not completely untrue), and quit writing it halfway through. I don’t know if the underlying problem still exists (I imagine it does) but it’s not something I think about too often. I wasn’t sure if I’d ever share this, but I kind of liked the writing and it could possibly help somebody. We all have our problems, this is one of mine.

What are they feeding you?

I need to get something off my, umm, feet.

I would warn this post could possibly be too much information (TMI), but to warn of something being TMI on a personal website is a bit ridiculous. It’s certainly personal and informational, whether or not it’s too much is up to you. With that being said, I have a problem, a rather embarrassing problem, a body image problem – my feet stink (or at least I think they do)!

I don’t particularly know when, why or how it started, but I don’t like it and now it’s all I can think about. It’s all consuming. It’s not just in the back of my mind, it’s in the forefront and everything else is secondary.

Perhaps you’ve experienced a personal problem that completely overtook your thoughts, or perhaps not, but it shouldn’t be too hard to imagine how mentally exhausting it is to think about something all the time.

For what could possibly be the first time ever, I saw a very relevant post on Facebook recently.

A psychologist walked around a room while teaching stress management to an audience. As she raised a glass of water, everyone expected they’d be asked the “half empty or half full” question. Instead, with a smile on her face, she inquired: “How heavy is this glass of water?”

Answers called out ranged from 8 oz. to 20 oz.

She replied, “The absolute weight doesn’t matter. It depends on how long I hold it. If I hold it for a minute, it’s not a problem. If I hold it for an hour, I’ll have an ache in my arm. If I hold it for a day, my arm will feel numb and paralyzed. In each case, the weight of the glass doesn’t change, but the longer I hold it, the heavier it becomes.” She continued, “The stresses and worries in life are like that glass of water. Think about them for a while and nothing happens. Think about them a bit longer and they begin to hurt. And if you think about them all day long, you will feel paralyzed – incapable of doing anything.”

Not only does this problem affect me, but it affects everybody around me – and I feel bad. Anybody who’s ever had a body image issue can relate to the feeling of everybody focusing in on your problem, imaginary audience or not.

The problem with odor is that it doesn’t stay confined. It blows, it wafts, it floats, or as I imagine it in my case, it forms a thick slow-moving cloud of funk waiting for another unsuspecting nose to assault.

If I hear another sniff – that goddamn sharp sniff, that tell-tell sign of nostril-offending contact, oh that motherfucking sniff – as I pass somebody, or vice versa, I might actually crumble into a million tiny pieces. A million tiny pieces that surely will not smell pleasant.

Honestly, I want to punch that person directly in their nose; trickling blood ought to stop some smell from penetrating. But it’s not their fault, it’s my fault, or rather it’s my body’s fault.

At this point, I know what you’re thinking: ‘Why don’t you just shower and wash your clothes? You know, personal hygiene and stuff.’

Well that is a great fucking idea. I would have never thought about that, thank you for that fine suggestion. I salute you, sir.

If only it were that easy.

People blaming hygiene is simultaneously understandable and funny – ridiculously funny. It’s certainly understandable because a wide range of offending odors are culprits of poor hygiene and easily solvable. It’s funny because I wonder if people honestly think I just gave up on personal hygiene. Like I woke up one day and said, fuck it – that’s just not for me.

Since you’re now wondering; I shower everyday – twice on most days (with antibacterial soap), I only wear clean clothes – jeans and shoes being the only exceptions (it’s not great for denim to be washed too often, although I don’t wear the same jeans or the same shoes two days in a row), I use antiperspirant/deodorant, and cologne.

I’m not taking hygiene lightly here folks. Oh yeah, I wipe my own butt too (although I’m not completely unconvinced that’s not a problem as well.)

In fact, preventative measures are just increasing the amount of time I spend incorporating personal hygiene. I’ve tried countless home remedies, various foot soaks, shoe insoles, powders and supplements, their effect is unclear at best, detrimental at worst.

Here’s the kicker, I can’t smell it.

Every once in a while I get a stiff whiff, but other than that it’s based solely on the reactions of other people, and believe me, there are a lot of reactions.

The same brain that’s causing me think about this problem endlessly has decided there’s no reason to keep smelling it.

Scumbag brain.

I can’t count the times I’ve smelled my socks, shoes, and clothes after wearing them. I can smell normal body odor mixed with ineffective deodorant, 8-hour-old cologne, and leather mixed with the remedy du jour.

No wretched sour cheese or month-old gym socks of a giant, which I imagine everybody else experiences.

I’ve enlisted my sister on an aggressive sniffing campaign, but her usually observant olfactory system is failing to provide any evidence.

That’s good, right? Oh silly you, you’re forgetting about those others’ reactions. The gym, tumbling, Taekwondo, work, stores, the location doesn’t matter, there will be reactions.

You may not be a bed of roses

Here’s the problem with relying solely on the reactions of others – it might not be about you. They could have a cold; sniffles sound exactly like that soul-crushing sniff you’ve become accustomed to hearing. They could have smelled something funky, but completely unrelated to you. Or here’s a thought, they could just be going about their daily lives unbeknownst to any problem you might be having. Who knows, maybe they think they smell.

Although I spent countless hours (countless being only a slight exaggeration) Googling my “problem,” I couldn’t get the nerve to talk to anybody else about it.

From here on out, I’m going to refer to it as my “problem.” And while the underlying issue may or may not actually exist, I certainly had a problem – although it was more mental than physical. And just because something isn’t “real” to others, doesn’t make it devastatingly real to that person.

My oldest sister and I are pretty close and she lives in the same town, so she was easiest to broach about it. Once I brought it up, I continued to bring it up…nearly every time I saw her. Her opinion remained the same – either I was imagining it or had something wrong with my nose. My ever-honest niece said I smelled like I normally do, which to her meant my cologne.

At the time those answers sounded like a brushoff. A consolation prize for losing at life.

Unbeknownst to me, my sisters talked about my “problem,” so when I brought it up with my other sister she didn’t seem too surprised. However, she lives two hours away and was unable to confirm or deny its existence. She did urge me to go see a doctor, which for most physical ills I’m more than willing to do, but imagining making an appointment because “I smell” seemed utterly ridiculous. That sister, who happens to be a RN assured me that she hears more ridiculous things on a daily basis.

Still unconvinced to make an appointment, I happened to have a yearly physical coming up, which seemed like the perfect time to approach the subject with my doctor.

I had my list of questions and concerns; I was prepared. When appointment time came, I completely glossed over the issue. I briefly mentioned it and moved on.

Scumbag brain.

However, when the nurse called to follow up, I gathered enough nerve to be like “yeah, that problem I briefly mentioned…it’s completely consuming my life.”

The nurse assured me that she didn’t smell anything in the small examination room, and my doctor “who usually had a strong sense of smell” didn’t make note of any malodor. Slightly relieved. I made a follow-up appointment to further investigate.

I would say long story short, but at this point it’s long story longer. The underlying issue is that in the past year I started sweating more than normal. Apparently this is rather common – it’s called hyperhydrosis…and it’s fucking annoying.

Several doctor visits (including a specialist) confirmed I had nothing physically wrong which caused me to start sweating more, it’s just something that happened. Great. However, every doctor’s appointment made me feel slightly relieved about my odor concerns as each time it was refuted.

Once I started opening to one person, it became easier to talk about it with other people. As it turns out, a lot of my friends and family have problems with excessive sweating as well. And not a single person I had the nerve to ask, said that I smelled bad.

Now it’s just something I deal with instead of obsessing over.

So as to not seem even crazier, I won’t go into detail of how depressing this time was; I’ll just say that an already introverted person beginning to completely fear social interaction is not a good thing. It’s a bad thing. Very bad.

It’s not your fault

Consider this the section where an ex-addict gives you advice they wish they had received before giving a homeless man a handjob for a delicious hit of crack.

If you’re having a problem talk to somebody. No matter how embarrassing you think it is, there’s surely something worse. Don’t bottle it inside.

If the problem is physical go see a doctor. Again, even if you think it’s embarrassing it’s worth getting checked out. Something embarrassing could be a sign of something major, or it could be nothing at all.

Don’t blindly Google symptoms; don’t self-diagnose. All those hours of Googling led me to diagnose myself several times. So much available information is both a blessing and a curse. Trust the experts, not anonymous sources of information.

Relax, don’t over think things. I am a notorious over thinker, so it’s not surprising my brain took it to obsessive mode. Thinking about something relentlessly doesn’t help, it often hurts.

If you’re more than an acquaintance with somebody and they are having odor issues – tell them. In a nice way. Privately. “You smell like shit, bro.” isn’t going to help anybody. Don’t talk about them behind their backs. Don’t make passive-aggressive statements around them. You never know the fragility of somebody’s mental state. If I ever have a problem, I hope somebody would afford me that courtesy.

(I once saw Morgan Spurlock at SXSWi in Austin, Texas. It was nearly as fleeting as this comment.)

The premise is simple, I’m going to do (or not do) something for 30 consecutive days.

This year-long experiment started after the 30th anniversary of the much longer experiment I call life. I hadn’t planned on doing this; I was simply punishing myself for missing three months of the gym by forcing myself to go every day for the next 30 days. (See, I told you it was a blatant ripoff.)

Of course it sucked at first, my body became too adjusted to the low-level of activity that I had become accustomed. My muscles were sore, but I love that feeling…it reassures me that I’ve been doing something productive. More annoyingly though, my 30-year-old joints were sore. This getting old shit is for the birds.

Surprisingly the streak became a motivational factor in itself. As I began to approach day 30 (now going strong at day 38), I started wondering what else I could do for 30 days straight. Unfortunately, I’m not a smart man so I decided to try vegetarianism (meatless really)…again.

Halfway through already, and it’s not horrible. It’s not great, but it’s not horrible. However, I find myself eating out a lot more – specifically at Chipotle and Taco Bell – and I’m tired of both. In fact, I’m kind of tired of Mexican food and cheese…see what madness this has driven me to?

I haven’t completely mapped out the rest of the year. I know it will include 30 days of documentaries, reading, development, and perhaps no shaving and no alcohol. Baking and cooking might make their way in there as well, as long as I can find people to pawn the goods onto.

I don’t want to pick anything that I won’t or can’t continue. I really don’t want to set myself up to fail; I like succeeding, it’s pretty cool.

There will be times that I might have to stack days due to life happening. New Orleans and possibly New York City (Sass Conf!) are looming on the horizon, but I can do it. 30 days isn’t that long. Maybe I’ll learn something, or maybe I’ll just get gout.

While the idea of a similar namespace was good in theory, it fell short in practice – and really probably shouldn’t have been done across several packages. (Thanks to my coworkers for pointing that out.) They all work well together, until you update one and not the rest. In that case you’ll end up missing something, and unfortunately that might be the base template. You can get around this problem by force upgrading during install --upgrade but that’s a work around, not a solution.

And the solution is…

Django Frontend.

Yes, yet another open source package with a nearly identical name. It’s basically (and by basically I mean that’s actually what it is) Django Frontend Template and Django Frontend Static combined into one package.

• Source
• Package
• Docs

Including

Django Frontend includes:

• famfamfam’s Silk icons
• Google Analytics
• HTML5 Boilerplate’s CSS
• iOS-Orientationchange-Fix
• jQuery
• jQuery UI
• jQuery DataTables (CSS and JavaScript)
• jQuery Dynamic Formset
• jQuery Smooth Scroll
• Modernizr
• Normalize
• Twitter Bootstrap (CSS and JavaScript)
• a Django template built on HTML5 Bootstrap

The initial release (0.1.0) was just a combination of the original two packages, the next release will include updated static files including Twitter Bootstrap 3.0.0 RC1. If TWBS releases more release candidates then I’ll update the package as a bug fix (0.2.1, etc.)

Sunsetting

Since Django Frontend contains the same functionality of both Django Frontend Template and Django Frontend Static, those two projects will be discontinued after a couple more releases. If you’re using them now, I suggest switching to Django Frontend soon. If you do continue to use these two while they are being updated, be sure to force upgrade!

While Django Frontend contains all the functionality of Django Frontend Skeleton, skeleton is more focused on using HTML5 Boilerplate and Twitter Bootstrap together, so it will continue on its own for now.

I’m also considering dropping the Google Analytics pieces as they continue to get more complicated, and could be better served by a more focused package like django-analytical.

My three-part tweet could pretty well sum up how this is going to go.

Google’s HTML/CSS style guide (http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml) is solid and pretty consistent with my personal style. – ¹

Although I’m not a fan of omitting optional tags, while hypocritically omitting other optional items (attributes, self-closing, etc.) – ²

And more closely using BEM might violate shortest class/ID naming scheme. Although their application-specific prefix follows the same idea. – ³

Jon Faustman, Twitter ^{2 3}

Tabs or spaces?

The correct answer is soft tabs. Four spaces to a tab, to be exact.

I have invisibles turned on, and I hate seeing that damn tab. Two spaces is just too small for my liking, it’s less discernible.

Of course this (and the majority of this article) comes down to personal preference. Just don’t mix and match. If you’re collaborating and somebody is already using one style, stick to it…unless you’re willing to convert the entire project.

HTML

I’m a big fan of whitespace in code, it’s much more readable. To achieve that, I indent child elements and tend to have a line break (or rather two) after inherently block elements. Although I’m picky about this.

I don’t use a new line on the first child of an element; in that case I’ll put the opening tag directly under its parent. In the same vein, I stack closing tags together. That makes it easier for me to distinguish hierarchy. Here’s an example from this site:

<a href="<?php the_permalink(); ?>" class="article">
    <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <h1 class="article__title"><?php the_title(); ?></h1>
        
        <time class="article__date" pubdate datetime="<?php the_time('Y-m-d H:i'); ?>"><?php the_time('M') ?><i class="article__date--day"><?php the_time('j') ?></i><i class="article__date--year"><?php the_time('Y'); ?></i></time>

        <div class="article__content lead">
            <?php the_excerpt(); ?>
        </div><!-- /article__content -->
    </article>
</a>

If I wasn’t selectively adding new lines on inherent block elements, the code would look like this:

<a href="<?php the_permalink(); ?>" class="article">
    <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    
        <h1 class="article__title"><?php the_title(); ?></h1>
        
        <time class="article__date" pubdate datetime="<?php the_time('Y-m-d H:i'); ?>"><?php the_time('M') ?><i class="article__date--day"><?php the_time('j') ?></i><i class="article__date--year"><?php the_time('Y'); ?></i></time>

        <div class="article__content lead">
            <?php the_excerpt(); ?>
        </div><!-- /article__content -->
        
    </article>
</a>

It’s still perfectly readable (maybe even moreso) but the first example is easier for me to visually parse hierarchy.

Speaking of visually parsing, perhaps you noticed <!-- /article__content -->. I use a HTML comment to denote the closing tag on divs and spans (although it might be time to include HTML5 elements as well). It’s something I picked up (from Dan Cederholm, I believe) a long time ago and it’s stuck with me.

Sure, most text editors can fold blocks, but what about when you’re viewing live source code? That’s also why I use a HTML comment as opposed to a server side comment. I find them super helpful for collaboration or debugging.

One thing I miss about XHTML is its structure. It had a very defined structure: lowercase everything, close all elements (in the order they were opened), quote all attribute values, do not minimize attributes; if you don’t follow the structure do not pass go, do not collect $200.

Of course in HTML5 you can use XHTML’s structure, but it’s not forced upon you…and since it’s not, I don’t. I do; however, lowercase everything, quote all attribute values and close all elements except for self-closing tags.

Not quoting attributes seems like a recipe for disaster, especially in collaboration. Say somebody adds another class name in an unquoted class attribute – boom, problems. I do have a debate with a co-worker whether to use single or double quotes, I prefer double but again that’s just preference.

There is a whole host of optional tags that can be omitted, and a whole host of rules when it’s allowed. For simplicity and readability I do not omit tags.

<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>

Is more preferable to me than:

<ol>
    <li>One
    <li>Two
    <li>Three
</ol>

There are some things I do omit. I already mentioned that I omit self-closing tags, e.g. <img src="" />. I also omit type attributes for styles sheets and scripts, as well as attribute boolean values (minimizing) – selected="selected" always just seemed silly to me.

CSS

/* Links */
a {
    color: #00f;
    font-weight: bold;
}

a:visited {
    color: #800080;
}

a:active,
a:focus,
a:hover {
    background-color: #fff;
    color: #f00;
    -moz-text-shadow: 1px 0 1px rgba(0,0,0,.5);
    -webkit-text-shadow: 1px 0 1px rgba(0,0,0,.5);
    text-shadow: 1px 0 1px rgba(0,0,0,.5);
}

This fake code snippet should pretty accurately reflect my CSS style. I used to prefer one-line CSS, but that eventually faded in favor of more readability.

I alphabetize declarations (and vendor prefixes by its standard property), using a single space after the property, always include a semi-colon directly after the value, and use the same indentation (four space soft tabs for each level) that I do for HTML.

I include a space after a selector and before the declaration block. Each selector and declaration go on their own lines.

I group related rules together in sections, denoted with a comment. I leave a blank line between each ruleset, but separate sections by two blank lines.

I omit units for 0 values.

I use the most appropriate color format for the job (preferring hex shorthand), although I’m not a huge fan of color keywords. Although I prefer hex color shorthand, I only use shorthand when it’s appropriate; otherwise you may add additional properties to override later.

Naming

I am a huge fan of BEM. It’s certainly changed my opinion towards using classes and OOCSS. I won’t get too much into BEM right now, but the naming scheme goes like .block__element--modifier. This can produce longer selector names than you might normally use, but it’s definitely worth the tradeoff.

I also like to prepend classes with the project or app name. For a project foo, a class name could end up being .foo-block__element--modifier. Long, but worth it. The project name will stop it from conflicting with other stylesheets, while BEM will quickly identify how it’s used inside the project.

If I’m not using BEM, then I like to keep my class names short but descriptive. Class names don’t have to be semantic, but they should be useful.

One thing you won’t see me do is over qualify a selector. That’s one thing that bothers me. Why would you purposefully write ul.foo instead of just .foo? It’s more fragile and has more specificity. Of course you might need to do that to override specificity, but it shouldn’t be the norm.

Sass

// Links
a
    color: #00f
    font-weight: bold
    &:visited
        color: #800080
    &:active,
    &:focus,
    &:hover
        +text-shadow(1px 0 1px rgba(0,0,0,.5)
        background-color: #fff
        color: #f00

For the most part, I write my Sass similar to my CSS. Other than the format itself, the big difference is in the declaration order. Since @include and @extend may contain several different properties, I like to put them first. This is also helpful if I need to override a property from a mixin.

You might also notice the lack of line breaks between selectors, but that’s because I like to use nesting to reference the parent selector. Unrelated selectors are treated the same as I would treat them in CSS.

Since I do use Sass’s indented syntax, I used to go nesting crazy. I’ve since got that under control and prefer not to nest more than two layers deep. Any more than that and it’s a good candidate to be rewritten.

Sass’s CSS output used to be less than optimal to me, as it did’t produce my preferred format exactly, but in the end it doesn’t matter. Most likely the code will be minified for production anyway (which Sass’s output style can easily do for you).

Be pragmatic not dogmatic

Whether it’s a branding style guide or a coding style guide (and perhaps moreso the coding style guide) it’s much better to be pragmatic than dogmatic. Having defined rules will only get you so far, eventually you have to ship code.

If you have disagreements or optimizations on an established style guide, talk it out – there should always be room for change.

Much like Sass’s output, Django’s HTML output used to drive me crazy, but it’s just not worth worrying about. You control what you can, and you let other things slide. You’ll be hard pressed to find frameworks that comply with your style guide, but in the end harnessing their power is completely worth it.

I love seeing company’s style guides and comparing my personal style against them. I’m planning on making a small style guide for this site as well.

(Edit 2013-07-31): I’ve added a style guide for the site.

When I start a new project, I generally copy this gist into a Sass partial named _base.sass. Combined with importing Compass, I’m pretty much ready to go.

Defaults

Just some default variables for the arguments within the mixins and functions, they also happen to be what I use most often.

The base font size is set to 16px. Since I generally build mobile first, I set the “mobile” max-width to 767px, tablet’s portrait orientation (pretty much iPad) to a min-width of 768px, and finally “desktop” to a min-width of 769px.

// Defaults
$base-font-size: 16px !default
$base-respond-to-mobile: 767px !default
$base-respond-to-tablet: 768px !default
$base-respond-to-desktop: 769px !default

Relative units

I love using relative units, and without sounding too dogmatic, you should too. Check out Harry Robert‘s article on Measuring and Sizing UIs.

His key points sums it up perfectly, although I would definitely use unitless line-heights as recommended by Eric Meyer in 2006.

• Set structure in percentages. This includes content areas, sidebars etc.
• Set type in rems with a pixel fallback for older browsers. This gives us a great amount of control with added scalability.
• Set type-related items in ems so that paddings et al scale with the font-size.
• Set line-heights in relative units. Or, even better, with no units at all.
• Don’t set measurements on components at all. They should remain fully fluid and ‘just work’ wherever you drop them.

Harry Robert, Measuring and sizing UIs, 2011-style (and beyond)

The problem is the real world. Designers typically send me font sizes and line-heights in pixels, not to mention it’s much easier to distinguish a pixel size (say 20px) versus a relative size (1.42857em). Thus I like to use pixels throughout and let Sass translate them into the appropriate relative unit. It’s also much less painful if you want to adjust font sizes but not layout.

// Function for calculating rem.
// Ensure both numbers use the same unit.
@function rem($size, $base: $base-font-size)
    @return #{$size/$base}rem

Since it’s a function you’d call it inline, like so:

p
    font-size: rem(20px)

With the default left at 16px, it would return:

p {
    font-size: 1.25rem;
}

// Function for calculating em.
// Ensure both numbers use the same unit.
@function em($size, $base: $base-font-size)
    @return #{$size/$base}em

The em function works exactly the same.

p
    font-size: em(20px)

p {
    font-size: 1.25em;
}

Unlike rems, ems are set relative to the parent instead of relative to the root. So if you wanted a paragraph with 20 pixels that’s inside of a parent with say 30 pixels, you’d have to use the $base argument to get the appropriate ems. Remember target / context = result.

p
    font-size: em(20px, $base: 30px)

p {
    font-size: 0.66667em;
}

I need to update these two a little bit to account for different units, since right now you need to ensure the units are matching so they cancel out.

Fonts

I hardly ever use the rem function on its own, the real power with it comes in the font mixin. (Although I don’t really know why I’m not using it for some margins and sizes.) It’s a little daunting when you first look at it, but only because of the conditional checks.

This mixin will let you use all of the font properties as well as line-height and letter-spacing, so you can put the majority of your typographic styles in one little place. If you’re using at least the size and family, then you can set the $shorthand argument to true and you’ll get your fonts in CSS shorthand. The variable $font-initial-value is set to normal to avoid errors, and output less CSS (excluding shorthand) than you might need.

// Font mixin
$font-intial-value: normal !default
@mixin font($family: false, $size: false, $style: $font-intial-value, $weight: $font-intial-value, $variant: $font-intial-value, $spacing: false, $height: false, $shorthand: false)
    @if $shorthand == true
        @if $height
            font: $style $variant $weight $size/#{$height} $family
            font-size: rem($size)
        @else
            font: $style $variant $weight $size $family
            font-size: rem($size)
        @if $spacing
            letter-spacing: $spacing   
    @else
        @if $family
            font-family: $family
        @if $size
            font-size: $size
            font-size: rem($size)
        @if $style != $font-intial-value
            font-style: $style
        @if $weight != $font-intial-value
            font-weight: $weight
        @if $variant != $font-intial-value
            font-variant: $variant
        @if $spacing
            letter-spacing: $spacing
        @if $height
            line-height: $height

Using the same example as earlier, if you wanted to get a 20 pixel paragraph you’d now include the font mixin.

p
    +font($size: 20px)

But this time it would also return a pixel fallback:

p {
    font-size: 20px;
    font-size: 1.25rem;
}

Now this time you might want to change more about the font, like the family, the line-height and the size. You could do this (and yes, I really should do something with the unquote in the function):

p
        +font($family: unquote("Arial, sans-serif"), $size: 20px, $height: 1.5)

Which would return:

p {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.5;
}

But since you have enough properties, why not use shorthand? All you’d have to do is set the $shorthand argument to true.

p
    +font($family: unquote("Arial, sans-serif"), $size: 20px, $height: 1.5, $shorthand: true)

And this time you’d get:

p {
    font: normal normal normal 20px/1.5 Arial, sans-serif;
    font-size: 1.25rem;
}

Voilà. The initial properties are somewhat annoying, but they really won’t hurt anything…unless of course you want to change them, then you can do that when you include the mixin.

Web fonts

The web fonts mixin works in exactly the same manner, but is for including web fonts like Google Web Fonts or Typekit using the WebFont Loader. If you want to hide FOUT then you can set the $wf-hide argument to true. Other than that, everything else is the same…that is until it outputs to CSS.

// Web font mixin
@mixin wf-font($wf-family: false, $wf-size: false, $wf-style: $font-intial-value, $wf-weight: $font-intial-value, $wf-variant: $font-intial-value, $wf-spacing: false, $wf-height: false, $shorthand: false, $wf-hide: false)
    @if $wf-hide == true
        .wf-loading &
            visibility: hidden
    .wf-active &
        @if $shorthand == true
            @if $wf-height
                font: $wf-style $wf-variant $wf-weight $wf-size/#{$wf-height} $wf-family
                font-size: rem($wf-size)
            @else
                font: $wf-style $wf-variant $wf-weight $wf-size $wf-family
                font-size: rem($wf-size)
            @if $wf-spacing
                letter-spacing: $wf-spacing   
        @else
            @if $wf-family
                font-family: $wf-family
            @if $wf-size
                font-size: $wf-size
                font-size: rem($wf-size)
            @if $wf-style != $font-intial-value
                font-style: $wf-style
            @if $wf-weight != $font-intial-value
                font-weight: $wf-weight
            @if $wf-variant != $font-intial-value
                font-variant: $wf-variant
            @if $wf-spacing
                letter-spacing: $wf-spacing
            @if $wf-height
                line-height: $wf-height

Maybe this time you want to use Open Sans as your font family.

p
    +font($family: unquote("Arial, sans-serif"), $size: 20px, $height: 1.5, $shorthand: true)
    +font($wf-family: "Open Sans", $wf-size: 20px, $wf-height: 1.5, $shorthand: true, $wf-hide: true)

You’d get:

p {
    font: normal normal normal 20px/1.5 Arial, sans-serif;
    font-size: 1.25rem;
}

.wf-loading p {
    visibility: hidden;
}

.wf-active p {
    font: normal normal normal 20px/1.5 "Open Sans";
    font-size: 1.25rem;
}

I’ll probably go into webfonts at another time; however, that time is not now.

Mobile first media query

As I mentioned previously, I tend to build mobile first so that’s what this mixin is geared towards. I often only include three breakpoints unless otherwise needed. For most instances I think mobile, tablet portrait, and desktop should cover your bases. (For mobile first, having a “mobile” media query isn’t that useful but the need might arise.

// Mobile first media query mixin
@mixin respond-to($device)
    @if $device == mobile
        @media only screen and (max-width: $base-respond-to-mobile)
            @content
    @if $device == tablet
        @media only screen and (min-width: $base-respond-to-tablet)
            @content
    @if $device == desktop
        @media only screen and (min-width: $base-respond-to-desktop)
            @content

In this instance let’s say you want your paragraph to float in tablet and above for some reason. So you’d include the mixin like so:

p
    +respond-to(tablet)
        float: left

Which will net you this sweet little media query for tablet portrait sizes and larger.

@media only screen and (min-width: 768px) {
  p {
    float: left;
  }
}

Hopefully these are somewhat useful for your projects. Feel free to fork, copy, modify, or otherwise do what you please with them. If you see something that I could improve upon then please let me know.

Actually writing this group of selectors made me really reconsider my decision, yet I forged ahead.

.nav__link:active,
.nav__link:hover,
.nav__link:focus,
.wp-pagenavi > .page:active,
.wp-pagenavi > .page:focus,
.wp-pagenavi > .page:hover,
.wp-pagenavi > .previouspostslink:active,
.wp-pagenavi > .previouspostslink:focus,
.wp-pagenavi > .previouspostslink:hover,
.wp-pagenavi > .first:active,
.wp-pagenavi > .first:focus,
.wp-pagenavi > .first:hover,
.wp-pagenavi > .nextpostslink:active,
.wp-pagenavi > .nextpostslink:focus,
.wp-pagenavi > .nextpostslink:hover,
.wp-pagenavi > .last:active,
.wp-pagenavi > .last:focus,
.wp-pagenavi > .last:hover {
    background-color: #fff;
}

So like two separate religions colliding into the sanctimony of marriage, it was time to convert.

Setup Compass

At this point Sass and Compass are synonymous to me; if I’m using Sass then I’m using Compass. There are just so many useful features included in Compass. In fact, Compass is the main reason I never really consider going back to Less.

I use Compass so often that I have a handy dandy bash alias for it.

alias compass_new='compass create --bare --syntax sass --sass-dir "src/sass" --css-dir "static/css" --javascripts-dir "static/js" --images-dir "static/img"'

This creates a new Compass project using the original Sass syntax, which is kept in ‘src/sass’ (in the directory you created the project) and converts it in the ‘static/css’ directory. I’m not using the javascripts-dir or images-dir right now, so those are just changed to my usual preference of a ‘static/*’ directory.

This creates a config.rb file, which you can easily adjust later. I actually changed the css-dir to be in the root of the theme in order to play nicely with WordPress.

In another terminal tab (I use iTerm) I type ‘compass watch’ and boom, Compass is effectively running.

@import Compass

You can import as much or as little of Compass as you’d like. In this case I just want to import the CSS3 and reset modules. So I add this to my partial file (I’ll get there):

@import compass/reset
@import compass/css3

By importing Compass’s built in reset module I can remove Eric Meyer’s reset from my code. The CSS3 module will just make including cross-browser CSS3 styles that much easier.

For instance, instead of writing:

    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;

I can just write:

    +border-top-left-radius(10px)

When converted to CSS is:

    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;

Well, that looks familiar. Do I need the vendor pre-fixes at this point? Probably not, but why not include them when it's that simple?

Sass partials

Sass partials are Sass files beginning with an underscore in their name. Unlike regular Sass files these don't get converted to CSS when a directory is being watched.

Sass partials are the bee's knees, although I use them a lot more sparingly than some people. However, I do usually create a '_base.sass' file for each project. This is where I put most of my @imports and include useful, but not overly specific variables, functions or mixins.

I use some functions and mixins so often that I put together some that I wrote in a gist (although I need to add my responsive mixin in there.)

I'm not using any webfonts on this site, so there's no need to keep that part. That results in this Sass partial.

Converting

While all valid CSS is valid SCSS, I prefer the concise indented syntax, not to mention CSS is inherently missing the benefits of Sass.

Thankfully Sass has a built in sass-convert option.

sass-convert styles.css src/sass/styles.sass

Running that would have converted my styles to the indented syntax; however, I just did it myself in TextMate...it really didn't take too long.

Once my CSS was converted to Sass, I started going through and updating Sass to make it better and more efficient. I updated the CSS3 declarations to use includes from Compass, as demonstrated earlier.

I went through used some of my custom functions. For instance, this:

h1 {
    font-size: 26px;
    font-size: 2rem;
    margin-bottom: .769em;
}

Was updated to this:

h1
    +font($size: 26px)
    margin-bottom: em(20px, $base: 26px)

That's using my custom mixin for fonts ('+' is conciser way of @import) and my custom function to turn pixels into ems. This outputs:

h1 {
  font-size: 26px;
  font-size: 2rem;
  margin-bottom: 0.76923em;
}

And of course there's the power of nesting.

table {
    border-collapse: collapse;
    margin-bottom: 1.5em;
    width: 100%;
}

table tr {
    vertical-align: top;
}

table tr th {
    background-color: #eee;
    color: #111;
    font-weight: bold;
    padding: .25em;
}

table tr td {
    padding: .25em;
}

Which is updated in indented syntax to:

table
    border-collapse: collapse
    @extend %base-vertical-rhythm
    @extend %col-1
    tr
        vertical-align: top
        th
            background-color: $base-color-invert
            @extend %base-color
            +font($weight: bold)
            padding: .25em
        td
            padding: .25em

And that snippet brings me to variables ($base-color-invert) and silent classes (@extend %base-vertical-rhythm).

Variables

One of the things that first piqued my interest in CSS pre-processors was variables.

// Project variables
// Colors
$base-color: #111
$base-color-invert: invert($base-color)
$base-color-invert-darken-6: darken($base-color-invert, 6.5deg)
$base-color-invert-lighten-6: lighten($base-color-invert, 6.5deg)
$base-color-lighten-13: lighten($base-color, 13.3deg)
$base-color-lighten-33: lighten($base-color, 33.3deg)
$base-color-link: rgb(110, 155, 220)
$base-color-link-hue-49: adjust-hue($base-color-link, 49deg)
$base-color-link-hue-120: adjust-hue($base-color-link, 120deg)
$base-color-link-hue-neg-71: adjust-hue($base-color-link, -71deg)

// Fonts
$base-font-size: 13px
$base-font-family-sans-serif: Arial, sans-serif
$base-font-family-serif: Georgia, 'Times New Roman', Times, serif
$base-line-height: 1.5

The color variables are kind of crazy, but since I already had my colors selected, I decided to use Sass' color math for funsies. I'll have to get into color math at another time, but the power of variables is self evident.

Silent classes

If Sass partials are the bee's knees than silent classes are the cat's fucking pajamas. Like partials, silent classes aren't output into CSS...that is until they are extended.

Remember that ridiculous ruleset from the beginning of this article, well I can easily achieve the same effective ruleset much easier.

%prominent-link
    background-color: $base-color-invert-darken-6
    border: 3px solid $base-color-lighten-13
    +box-sizing(border-box)
    @extend %base-color
    display: inline-block
    +font($weight: bold)
    line-height: 39px
    text-align: center
    +transition(background-color .2s linear)
    &:active,
    &:focus,
    &:hover
        background-color: $base-color-invert-lighten-6

.nav__link,
.wp-pagenavi > .current,
.wp-pagenavi > .page,
.wp-pagenavi > .previouspostslink,
.wp-pagenavi > .first,
.wp-pagenavi > .nextpostslink,
.wp-pagenavi > .last
    @extend %prominent-link

%prominent-link is the silent class, which is extended with @extend. And since I have active, focus and hover nested underneath they are included as well.

If you're curious, this is the CSS output:

.nav__link,
.wp-pagenavi > .current,
.wp-pagenavi > .page,
.wp-pagenavi > .previouspostslink,
.wp-pagenavi > .first,
.wp-pagenavi > .nextpostslink,
.wp-pagenavi > .last {
  background-color: #dddddd;
  border: 3px solid #333333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-weight: bold;
  line-height: 39px;
  text-align: center;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
.nav__link:active,
.wp-pagenavi > .current:active,
.wp-pagenavi > .page:active,
.wp-pagenavi > .previouspostslink:active,
.wp-pagenavi > .first:active,
.wp-pagenavi > .nextpostslink:active,
.wp-pagenavi > .last:active, .nav__link:focus,
.wp-pagenavi > .current:focus,
.wp-pagenavi > .page:focus,
.wp-pagenavi > .previouspostslink:focus,
.wp-pagenavi > .first:focus,
.wp-pagenavi > .nextpostslink:focus,
.wp-pagenavi > .last:focus, .nav__link:hover,
.wp-pagenavi > .current:hover,
.wp-pagenavi > .page:hover,
.wp-pagenavi > .previouspostslink:hover,
.wp-pagenavi > .first:hover,
.wp-pagenavi > .nextpostslink:hover,
.wp-pagenavi > .last:hover {
  background-color: white;
}

One problem with silent classes is that you can't use them inside a mixin, which is usually how responsive is handled. But I believe this is being worked on, and they're still fairly new.

Speaking of responsive, I'll quickly go over those changes.

Responsive

With the combined power of mixins and nesting, Sass makes responsive development that much easier. In my partial I have a responsive mixin:

// Mixin for media queries
@mixin respond-to($device)
    @if $device == mobile
        @media only screen and (max-width: 767px)
            @content
    @if $device == tablet
        @media only screen and (min-width: 768px)
            @content
    @if $device == desktop
        @media only screen and (min-width: 769px)
            @content

On this site I'm only developing for mobile and then responding to "desktop." So I could delete the tablet part but it's not doing any harm. One thing I do need to optimize is change the sizes to a variable to be set later.

By using this mixin I can add the responsive style right along with the others - no more forgetting the original styles, or separate stylesheets or segregated media queries. For instance I no longer have to do this:

/* Main layout **/
#wrapper {
    margin: 0 auto;
}

@media only screen and (min-width: 769px) {
    #wrapper {
        min-width: 59.154em; /* 769px */
        max-width: 73.846em; /* 960px */
    }
}

That same selector was referenced 331 lines later. Now I can just do this:

// Main layout
#wrapper
    margin: 0 auto
    +respond-to(desktop)
        min-width: em(769px)
        max-width: em(960px)

However, the output is something I'm less than thrilled about. It adds the media query where the selector is referenced, which means the media query is repeated several times in the CSS. This is something that's actively being worked on, and I'm sure it will eventually be much cleaner.

#wrapper {
  margin: 0 auto;
}
@media only screen and (min-width: 769px) {
  #wrapper {
    min-width: 59.15385em;
    max-width: 73.84615em;
  }
}

La fin

And with your powers combined, I am Captain Planet...err wait, I mean and with that my CSS is converted to Sass, which is, um, converted back to CSS. But hey, it's worth it, especially when I can quickly change the Sass output style to compressed and instantly have a minified CSS file.

As always, the full code is available on GitHub if you're interested, and after reading this far, I hope you are.

Without further explanation or citations (I’ll most likely add these later, in addition to making it an actual quiz format) here are the first few quizzes I put together. Due to time constraints, the answers are already marked (makes it a pretty easy quiz, no?)

CSS 101

    p { color: blue; }
    p { color: red; }

CSS Selectors

    <p class="one" id="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis augue, sollicitudin vel dapibus sit amet, mollis condimentum est. Etiam et suscipit massa. Praesent at lacus elit, vitae lobortis ligula. In ac convallis diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros sapien, interdum sit amet sollicitudin nec, consectetur ornare tellus. Nam fermentum mollis aliquam. Nullam ut sem in lacus feugiat commodo. Maecenas fermentum, felis luctus vulputate vehicula, magna ligula sollicitudin justo, at ornare est nulla vitae quam. Mauris nec diam metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tincidunt purus ac ipsum porttitor adipiscing.</p>

    <p class="two" id="blue">Aliquam laoreet eleifend semper. Nulla faucibus orci sit amet tellus feugiat id elementum libero mollis. Proin diam mauris, iaculis in sodales id, vestibulum accumsan enim. Sed eu leo est, sit amet sodales nulla. Ut facilisis massa non turpis ornare luctus. Sed vestibulum adipiscing pellentesque. Pellentesque porttitor placerat mattis. Donec felis leo, semper elementum mollis a, volutpat in dolor. Sed nec ante ac arcu vulputate pretium. Nunc egestas leo non neque fringilla non scelerisque lacus sodales. Aenean sit amet laoreet velit. Donec elementum, libero quis eleifend consequat, erat arcu interdum augue, vitae dapibus lacus est imperdiet mi.</p>

CSS Specificity Pt. 1

Specificity, besides being the hardest word to say, is how the browser determines which matching CSS rule is used. A selector receives a point in the corresponding column for each matching element (ID, class and pseduo-class, element and pseudo-element).

Here specificity is shown highest from left to right. Since ul > li > a { color: red; } contains three elements, it results with:

For simplicity, this can be read as 0, 0, 0, 3.

However, matters become more complicated because it’s not a 10 base system so the values aren’t simply added; depending on the browser it’s at least a 256 base.

    p#foo a#bar { color: red; }
        
    <p id="foo">Lorem ipsum dolor <a href="foo.html" id="bar" style="color: blue;">sit amet</a>, consectetur adipiscing elit. Quisque egestas venenatis dui, consectetur convallis dui venenatis ac. Nullam non lacus eu libero tristique pretium</p>

CSS Specificity Pt. 2

    .red { color: red; }
    p { color: blue; }
    
    <p class="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla odio et ante vehicula ac posuere neque venenatis. Maecenas tortor quam, mollis viverra blandit non.</p>

    ul#foo { color: red; }
    ul {color: blue; }
    
    <ul id="foo">
        <li>Item</li>
        <li>Item</li>
    </ul>
    
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>

    <ul>
        <li><a href="foo.html" id="foo" class="foo">Foo link</a></li>
        <li><a href="bar.html">Bar link</a></li>
    </ul>

    <ul>
        <li><a href="foo.html" id="foo" class="foo">Foo link</a></li>
        <li><a href="bar.html">Bar link</a></li>
    </ul>

CSS Shorthand

CSS shorthand is a quicker, more concise way to write several related property value pairs. Shorthand can be used for properties such as:

• background
• border
• color
• list
• font
• margins, outline, padding

Shorthand for margins, outline, and padding go in clockwise order.

p { 
    margin-top: 1em;
    margin-right: 2em;
    margin-bottom:  1.5em;
    margin-left: 1.75em;
}

is equivalent to

p { margin: 1em 2em  1.5em  1.75em; }

p { margin: 1em 2em 1em 2em; }

p { margin: 1em 2em; }

p { margin: 1em 2em 1em;  }

body {
    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-size: 100%;
    line-height: 1;
    font-family: Arial, sans-serif;  
}

body { font: bold italic small-caps 100%/1 Arial, sans-serif; }

body {
        font-size: 1em;
        line-height: 1.25;
        font-family: Georgia, serif;
    }

Based on the time of their impact, these are what immediately came to mind.

Designing with Web Standards

This is probably no surprise to anybody, well except for younger generations of web workers (get off my lawn you damn kids.) It’s probably on everybody’s list.

I was late reading this book, I think it was in its second edition by the time I actually read it. To be fair I was already practicing web standards, but I could never really articulate why. One of the problems with web books is that they’re often about emerging or well-known concepts, so by the time they’ve been printed and distributed that concept is already in practice. Now the key to great web books is making you care after the fact, and Jeffrey Zeldman’s book did just that.

His quote comparing structure, presentation and behavioral layers to the different roles in a movie production was the perfect tangible comparison that made it so easy to grasp the concept. Like any good quote, I still use this today. And like most quotes I probably bastardize and butcher it.

If your site were a movie, (X)HTML would be the screenwriter, CSS would be the art director, scripting languages would be the special effects, and the DOM would be the director who oversees the entire production.

Jeffrey Zeldman, Designing with Web Standards

Bulletproof Web Design

This is the book that just made CSS click for me. Like Designing with Web Standards, I was already using CSS and some of these techniques but I was really bad at it. Dan Cederholm’s book really just made me think about what I was doing, and made me want to do it better.

Throughout my career I’ve been fortunate to attend several conferences, and Dan Cederholm is one of nicest of my “heroes” who I’ve met.

It was at a bar in Chicago for An Event Apart , as I saw him walk by I said hi and how much I enjoyed his book. I just happened to mention I enjoyed his book so much that I lent it to my boss who subsequently lost it. He (Dan) said to email him and he’d send me another copy. I never did. I’m sure authors have several copies of their books to spare, but that just struck me as such an unprompted act of kindness.

Don’t Make Me Think

Again, Steve Krug’s book is probably on everybody’s list; it is one of the quintessential user experience books. But it makes my list for another reason – accessibility.

Having spent my entire professional career working at an university, I’ve always had to work with accessibility in mind. But nothing ever made me care why it was important as much as his statement that with the use of accessible content and screen readers a blind person could read a daily newspaper…on the day it was published…by themselves. Mind blown.

If that doesn’t make you care about accessibility then I’m not really sure what will.

And not just the right thing; it’s profoundly the right thing to do, because the one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. Personally, I don’t think anyone should need more than this one example: Blind people with access to a computer can now read the daily newspaper on their own. Imagine that.

How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?

Steve Krug, Don’t Make Me Think

Responsive Web Design

This is THE article, the one that started it all. I mean Ethan Marcotte coined the term. This article was so mind blowing I had to read it several times before I really grasped how great it was. His Fluid Grids article in which he described dividing the target by the context was worth the price of admission alone. Ok fine, it was free but I would have paid for it, it was that good. In fact, I did pay for it (or rather my company did) for the A Book Apart book with the same title.

Mobile First

I saw Luke Wroblewski (and yes, I had to google that spelling) present at the aforementioned An Event Apart and just soaked up his talk about forms. From that moment on Luke was somebody I paid great attention to. He also happens to be one of my favorite presenters, only being surpassed by Jared Spool at the last minute.

I honestly don’t remember where I first heard about his mobile first theory, but it resonated with me from the very beginning. By the time I travelled across the country to Las Vegas with just an iPhone 3G for an information source, I completely understood the value of mobile first. If you’ve ever tried to book a hotel reservation online with your phone, then you’ll understand the value too.

I read his A Book Apart on a plane, and I think my tweet after landing sums it up pretty well.

While not exactly the same context, the fact that I read @lukew‘s Mobile First book entirely on my iPhone proves why it’s important.

Jon Faustman, Twitter

BEM

Although I haven’t been using this technique long enough to say it’s career defining, it certainly has changed how I think about style and layouts. I first read about it on Harry Roberts’s CSS Wizardry. From then on I was hooked.

Of course I’d known about OOCSS for quite a while before finding out about BEM, but I never liked it. For some reason it just seemed wrong to me. Maybe it was the naming, or standardista in me fighting against what at one time would have been shunned as bad practice. (Remember the zOMG tables are bad, nothing can be a table including tabular data misconception? Yeah, that.)

I remember seeing Nicole Sullivan present at An Event Apart and threw up in my mouth a little bit when she showed a class named .h1 – until I really thought about it, that’s useful, damn useful.

BEM just works for me. It makes sense. It’s easy, especially in combination with Sass.

Fanboy?

Honestly when I started writing this, I never realized how much of a fanboy I am of all the things Apart – A List Apart, An Event Apart, A Book Apart.

A List Apart

Like the rest of my RSS feeds (Google Reader is going away? LOL OK) my unread A List Apart articles are overwhelming. I probably won’t ever catch up or read back issues, but they’re there – chock full of great, relevant information just waiting for me. Maybe I’m missing the next Responsive Web Design article.

An Event Apart

Honestly I can’t say enough good things about these conferences. I’ve been to two – Chicago in 2007 and Minneapolis in 2011. And while the information gap in my career between those two periods is vast, the second trip was just as worthwhile as the first.

Why is it such a great conference? Well the talent level of the speakers is amazing…I’d say it’s unparalleled. While I couldn’t recall every subject matter they’ve spoken about, I can recall many, many memorable moments. Like Jason Santa Maria nearly falling off the stage, or Jeremy Keith blowing my mind – repeatedly.

I’ve had the chance to interact with many of my “heroes,” usually while partaking in an adult beverage. I mean I talked to Eric Meyer about flexbox, and was admonished by Jeremy Keith for foresaking JavaScript knowledge and skipping directly to jQuery. How fucking awesome is that?

(By the way, Leah Culver if you ever read this – I’m really sorry for sort of blowing you off. I didn’t realize who you were, which sounds like a horribly snobbish excuse, but I thought you were with Jeremy…like with WITH and I didn’t want to offend him by giving you too much attention. I realized what happened much later. You know what, this apology sucks. So I’m sorry for that too.)

While the quality of snacks and abundant soda is usually unmatched at other conferences as well, having one track really makes the conference. No deciding what to see. No skipping because of indecision. A shared experience. That’s what really makes the conference.

A Book Apart

Simply put these books are amazing. It’s true you might already know the subject matter, but I can almost guarantee you’ve never read about it in the same way. Easy to understand. Concise. Enjoyable. I’ve talked my company into buying them all.

So yeah, I guess I am a fanboy. So thanks to everybody who makes all this awesome stuff happen, keep doing what you do.

Did I really just use part of a Bobby Flay quote? I really need to go back to sleep.