I’ve been reading Jonathon Snook’s Scalable and Modular Architecture for CSS book this week. (It’s well written, practical and perfectly formatted for Kindle. I learned a lot and I’d highly recommend it.) In SMACSS, Jon recommends breaking down stylesheets into rules for:

• Base
• Layout
• Module
• State
• Theme

He establishes a naming convention for these categories of styles. Jon says:

I like to use a prefix to differentiate between Layout, State, and Module Rules. For Layout, I use l- but layout- would work just as well. Using prefixes like grid- also provide enough clarity to separate layout styles from other styles.

I like this idea a lot because, 1; I’ve had a fascination with naming conventions, and 2; I’ve long had a problem with mixing styles for layout with styles for ‘atmosphere’ (colour, texture and typography,) something we’ve all done for years.

To me, using classes makes sense when we need to ‘classify’ items such as modules on a page. They make sense for groups of styles in a theme too. But it doesn’t make sense to me to use classes for the layout outline of a page, particularly when many times we add the elements they style purely for layout reasons and especially in a responsive context. It feels somehow messy.

Years ago, when oft-used browsers only supported element, class and id selectors, we didn’t have much choice. Now that browsers from Internet Explorer 7 up have solid support for CSS attribute selectors, we can bind our styles to elements based on their attributes. That’s why we’ve seen more and more people binding styles using ARIA role attributes. For example:

<div role="navigation">…</div>

[role="main"] {
/* styles */ }

Reading SMACSS got me thinking. Why not abstract layout styles even further than Jon suggested, by using HTML5’s data- attributes instead of classes. Something like:

<div data-layout="content">…</div>

[data-layout="content"] {
/* styles */ }

Conceptually, this fully separates styles for layout from every aspect of atmosphere. Although I’m aware that there are no practical advantages to using data-, to me it somehow feels cleaner.

I’m not 100% sure if this could be a legitimate use for data-. What are the experts’ opinion? I’d be interested in hearing if you’ve used this approach already and what you think might be the possible advantages and disadvantages?

When I set up my home/office wireless after switching broadband providers, I called the downstairs router’s network ‘Planet Of The Apes.’ And why not? ‘Andy Clarke’s Network’ is a boring name. (And Planet Of The Apes is a better movie than Star Wars.)

Then I called the Airport Extreme extended upstairs network ‘Rise Of The Planet Of The Apes’ and the Airport Express I keep under my desk ‘Beneath The Planet Of The Apes.’

I bought a mifi today because I’m working in London a fair bit over the next few months and the client site doesn’t have open wifi. I could stick with the network’s given name, 3MobileWiFi-c602, but ‘Escape From The Planet Of The Apes’ seems much, much more appropriate.

Jordan Moore (who has a name like a country singer:)

Say for example we want to present an article in the narrow single column view, but before the article appears in the stacking order we have: a header (containing site name etc), navigation, maybe even a banner advertisement, then the article. The heart of the page is buried beneath items that may be less important in this context. Rather than brutally hiding these items with a display:none property we can reorder them using another CSS property - flex box.

It takes something to make me sign in and blog on a Sunday, but this is good. Very good. Read the whole thing. Then study Jordan’s demo page. Brilliant.

Harry Roberts:

Loosely, the single responsibility principle states that every module or chunk of code (a function etc) should do one job well and one job only. The benefits of this are mainly in the way of maintainability and extensibility.

I didn’t know this approach had a name or think to look.

Faruk Ateş in Opera Confirms WebKit Prefix Usage:

I’m left feeling that this is just Browser War II, and what grace we’d regained by switching to Feature Detection rather than UA sniffing will be lost once again as a result of these moves.

With some luck, things will just become better for the users of those browsers who will once more pretend to be someone they aren’t, and us web authors aren’t inconvenienced too much. Meanwhile, it is left—again—up to web authors to invent the tools to placate the browser vendors who gave us this mess in the first place.

I commend Opera for finally admitting — through their decision to adopt WebKit Prefixes — that their real motives are the corporate motives we always knew them to be. That they’re not the standards champions they pretend to be. That they’re prepared to break a fragile, but working standard for corporate gain.^[1]

What their actions also tell us is that despite hiring some of the best minds in the business^[2], their strategy of evangelists and ‘web openers’ has resoundingly failed to convince developers that Opera is relevant. If that wasn’t the reality, they would have no need to adopt another platform vendor’s prefixes.

What Opera forgets in its colossal arrogance, is that vendor specific prefixes were intended to give developers a choice to support a browser platform — or not.

We were never ‘required’ to include a full set of prefixes.

Excluding Opera didn’t qualify as ‘invalid.’

If I choose to exclude Opera (or Webkit or Mozilla or Microsoft,) that’s my choice and my right.

1. For the record, I don’t have a problem with a profit motive, just hypocrisy. 2. I don’t have a problem with individual Opera employees either (although many think I do). This isn’t about them.

I’ve worked for myself for the last fourteen years and for most of that I’ve worked in my office at home.

Now this is handy. It adds viewport width and height as a :before pseudo element on the body to help you determine breakpoints for content-first responsive design. Here’s Matt’s test page with the debugger* enabled. Download the debugger from Github.

* Snort

Remember Matt Stow and his responsive retina images using CSS and a spacer PNG? (Now updated.) Well, Matt’s been at it again, this time with a solution to the image map problem in responsive design. Matt’s solution recalculates area coordinates to match the image size on load and window.resize. Clever. View the demo page or download the plugin from Github.

A lot’s changed since I wrote the original ‘320 and Up’ — my ‘tiny screen first’ responsive web design boilerplate — one year ago.

Honestly, I’ve been wanting to start hoarding candles, fire-lighters, tins of corned beef (it’s nice. Really.) and other things for a while. I know the collapse of civilisation is much more likely to come from a petrol strike these days, but hey. It’s a zombie survival map. My wife thinks I’m mad.

It’s been almost three years since I launched, what most people thought of as the bat-shit crazy Universal Internet Explorer 6 CSS stylesheet.

I’ve been working on a small travel site over the last few weeks and came across an interesting responsive web design challenge.

This came at the perfect time for me this week (thanks Chris), as one of the projects I’m working on required icon fonts. I chose Font Awesome because it works so well with Twitter’s Bootstrap and even comes with files for my beloved LESS.

More from Matt Stow. This one had gone clean out of my head. When I was in Sydney in February, Matt showed me a Fireworks extension he’d written for exporting responsive prototypes.

Now I use Fireworks almost every day — it’s my ‘go to’ design tool and so much more efficient than Photoshop for web designing — but I’ve never used it’s code output, not even for a ‘rough as a badger’s arse’ prototype, let alone anything I’d show to anyone. But Matt’s extension worked flawlessly when he showed it to me.

I’m going to try this and if Fireworks is your thing, test this out too and let’s compare notes.

Matt Stow emailed me from Sydney with a link to his solution to the responsive/retina images problem. It’s a clever workaround that uses CSS and a transparent spacer PNG. Matt’s interested in your feedback (and so am I) so try it out and let Matt know your thoughts via Twitter.

Brilliant.

Now, when will our politicians, in all parties, communicate with such clarity and honesty.

If you’ve been using Twitter and the Twitter app for iPhone for a while, you’ll probably miss having access to your direct messages in the toolbar since Twitter replaced it with the ‘discover’ button (whatever that does.) Don’t worry, because some friends of mine who work at Twitter in San Francisco showed me a way to unlock a hidden power user mode that puts DMs back in the toolbar.

James Weiner, who works on the front end team for GOV.UK :

Furthermore, designing in-browser exposes mistaken assumptions at the earliest possible stage in a build. This means we fail quickly rather than expending effort on high fidelity mock-ups that were based on mistaken assumptions.

How happy am I to read this? Really happy.

Read it.

Cennydd Bowles:

Following a recipe won’t make you a great chef – it just means you can make a competent bolognese. Great chefs don’t need cookery books. They know their medium and their ingredients so well that they can find excellent combinations as they go.

I love this. And I would go further. If your design process is more process than design, take a step back and rethink it. You don’t need what people’s say or do to tell you how to make a great design. Listen to your gut.