CSS Framework Fortunes and Failures with Harry Roberts

Harry Roberts helps teams all over the world to build better front ends. Craig spoke to him about his talk at Future of Web Design.

SITEPOINT (Craig Buckler):Hey Harry. Tell us a little about yourself and what you do.

HARRY: Hi there! I’m a consultant front-end architect from the UK. My work includes visiting companies of all sizes (from the likes of the BBC and the NHS right down to individuals) in all types of places (from sunny California to snowy Frankfurt) and helping them get a handle on their CSS. I do a lot of consultancy and workshops, solving company scalability woes and teaching developers how to build bigger, more performant UIs. I get to travel, meet interesting and passionate individuals, work with great companies and get paid along the way. I can’t believe my luck!

Before that, I was a Senior Developer at BSkyB for almost three years. Before that I worked at a series of digital agencies of varying sizes.

SITEPOINT:How did you get into conference talking?

HARRY: I’d been blogging and tweeting for some time when Front-Trends approached me in late 2011 and asked if I’d like to speak at their conference in Warsaw (2012). I’d never spoken anywhere before so it was a huge gamble for them but I nervously accepted. It’s carried on from there.

SITEPOINT:Your FOWD talk is titled “What Is A CSS Framework Anyway?” What can the audience expect?

HARRY: A critical but balanced dissection of what CSS frameworks are, what we perceive them to be, what might be wrong with them, where they can be useful and when we should be using them. CSS frameworks get a lot of criticism — sometimes rightly — but they can also be an incredibly valuable tool for developers. My talk discusses the current problems with CSS frameworks and how we can solve them.

SITEPOINT:Why do you think there’s such a divide between the love ’em and loathe ’em camps?

HARRY: This is difficult to answer without being too controversial (and potentially offensive) but I think that, because CSS is so “easy” (note the quotes), everyone and their Mum feel they should have an opinion.

I imagine that, because many developers start their careers using CSS, they feel they should have an opinion and, to carry that on, an opinion which states they can do better than a CSS framework. It reinforces their own worth. Additionally, many CSS frameworks are poor or mis-sold — they receive a lot of stick. Also, many developers only know CSS well so it’s one of the few things they can have an opinion on. Perhaps they overcompensate by slamming CSS frameworks.

That might seem a little insulting, but it’s important to note that these are very general statements and largely a hypotheses based on anecdotal evidence.

SITEPOINT:CSS frameworks can save time. What are the downsides?

HARRY: The biggest downside is usually the framework itself. Most are poor: too opinionated, trying too hard, doing too much, too hefty, etc. Beyond that, there are some downsides to using even the best CSS framework. The time it takes to learn, introducing dependencies and even the leanest framework will possibly have more than you actually need.

SITEPOINT:Are people using frameworks for CSS like they use jQuery for JavaScript? Is CSS too difficult for the average developer?

HARRY: Not at all, and I think this is largely the problem. jQuery [and tools like it] are helping hands that do much of the boring complex work so developers can build on top of them. Most CSS frameworks have far too much in them, are far too opinionated, incredibly difficult to extend, and end up causing additional work.

If more CSS frameworks were like jQuery (and there were fewer CSS frameworks) I’m sure we’d all be very much in favor.

Conversely, and to take it back to the fourth question (the divide between the love ’em and loathe ’em): A developer who strongly criticizes CSS frameworks for their bloat often doesn’t think twice about including all of jQuery when a simple few lines of vanilla JavaScript would suffice.

SITEPOINT:Do you think using a CSS framework is justified on a production website or are they too generic?

HARRY: Definitely, definitely justified, yes. But only if it’s a good one that has been used properly. A poorly written and/or implemented framework can be worse than no framework at all. I build all my sites using a CSS framework because, as a developer who frequently works on products, time is money. Money can be spent on better things than coding up a horizontal nav for the hundredth time in your career.

Some frameworks aren’t suitable for production, period. But that doesn’t mean none of them are. It also depends on your definition of “production”. Would I use Bootstrap to build a client site? Definitely not. Would I use Bootstrap to stick a UI on an open-source project I put on GitHub over the weekend? Definitely.

SITEPOINT:Are you looking forward to seeing any other speakers at FOWD?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

tex88

Pretty vague.. I’d like to hear which specific css frameworks he considers to be “poor”, which are “mis-sold”, and which are “the best”. Opinions are fine, and reasons are even better.. but just saying that some are good and some not.. isn’t very helpful or insightful.

LouisLazaris

Well, this was an interview, not a tutorial or an op-ed piece. We can’t force Harry to explain any further than he wants to.

Unfortunately, it’s a bit of a double-edged sword. He doesn’t name any frameworks, and you’re not happy (and neither are the people who upvoted your comment). But if he did name all the frameworks he didn’t like, then we’d have people commenting about how negative he is, bashing other members of the community.

I think he handled the situation perfectly. He made it known that there is such a thing as a bad framework.

That being said, I’m sure if you examined Harry’s own framework and compared it with some others, you’d see what it is he doesn’t like about those others.

jokeyrhyme

My misunderstanding was that I thought this was a discussion about BEM, SMACSS and OOCSS. It was only at the end that I realised this was more about front-end frameworks like Bootstrap, Foundation, Skeleton, etc. :P

LouisLazaris

Yeah, BEM, OOCSS, etc. are usually referred to as “methodologies” not “frameworks”.

Dave Orb Schneider Toast

off topic. but BEM… since we’ve started using it at the agency I work at, aah.. ruddy awesome.. even more so with SASS 3.3.3… this is a beautiful time to be writing css!

Dave Orb Schneider Toast

I couldn’t agree more. I wouldn’t know where to start if I were to use a big ole framework like bootstrap when given a bespoke design to build. All this code, where, what, waaa. No thanks, As LouisLazaris mentions Harry’s own framework illustrates his point. And it’s top notch! I can’t tell you how awesome the nav object is. Thank you Harry!

closdesign

I just looked at Harry’s framework. I was going to mention doing the same thing. Almost modular like. Importing or using pieces. I find frameworks tend to load ALL their CSS into one sheet and the code is just one behemoth of a CSS file. Not good. If we had multiple CSS files with the elements in each and just import or copy the code from the separate elements we want, seems to make them more modular. Just me though. The basics like Top Nav or a Side Nav, footer, header, slideshows, or grid could all be separate CSS files and just call which ones you needs.

The only qualm I have with frameworks is that a lot of designers and developers rely too much on them and their websites tend to start looking the same. 3 columns, with a header and footer and a top navigation with a slideshow. They are nice if you want to build a website quickly without any thought behind it because you just plug in the elements or images, but if you really want to push your skills without harming you usability, then use framework parts or modules (header, nav, footer), and let those enhance the site not dictate the design.