(CreativeBloq.article) CSS wizard Harry Roberts shares the lessons he’s learned in his career so far…
Harry Roberts does a lot of speaking and a lot of teaching. He’s been working for himself for more than a year; before that he spent three years as a senior developer for Sky.
But he’s best known as a CSS guru – he flies under the Twitter handle of @csswizardry. Here he shares five lessons he’s learned so far about the wonderful world of Cascading Style Sheets…
01. It’s fun to use
“CSS is still at a point where everything is open to be solved,” he says. “Sites are getting bigger and more complex, and there’s a move towards more product-led builds as opposed to just websites.
“What drives me is finding the solutions to these things with CSS, at scale. That’s why I’ve stuck with CSS. Even for such a limited language, there’s so much that you can do with it and so much that needs to be doneto it. That’s why I’ve gone down the large-scale sites and applications route. That’s where the fun is for me.”
> https://cssguidelin.es is a project Roberts is doing for free, to share his wisdom about CSS
“I’m the sort of person that says, ‘If it ain’t broke, break it and see how it works’. Anything that has inner workings, I have to tinker with and reverse-engineer. I have a fascination with everything. I probably account for half of Wikipedia’s monthly throughput.”
02. If it works, it works
Although Roberts is known as a CSS guru, he’s no puritan perfectionist. “One thing I learned quickly in a product environment is: pragmatism trumps perfectionism,” he says.
“A site that has ugly code, but still works, is infinitely more valuable than a site with lovely code that doesn’t work.”
> Roberts has a relaxed view towards getting code “right”
As an example, he points people to the source code for Facebook and Google.com. “It’s a real mess, ” he smiles. “But those sites handle millions of people every day, and the users don’t care … Those sites are highly performant.
“As a developer working on one of those companies, sure, it would be important to me. But, in the last few years, I’ve stopped my voyeuristic peeking under the hood. It’s just not important.”
03. Approach Sass with caution
One area of CSS Roberts feels needs a little diligence is working with preprocessors. “It can be something of a black box,” he says. “You put things into it and often people ignore what comes out the other end.
What you have to remember is, ‘garbage in,garbage out’.” Importantly, you need be aware of the fact that what preprocessors spit out is what ends up on people’s machines.
“I had a heated debate with John Allsopp at a conference recently, ” Roberts recalls. “His stance was: ‘Don’t use Sass’ , whereas mine was, ‘No – if you’re bad at Sass, then don’t use Sass’.”
> John Allsopp clashed with Roberts over his approach to Sass
In Roberts’ view, it’s all about context. “Sass, ” he explains, “has the potential to bebad if used incorrectly. It’s like saying guns are bad. Are guns are bad? Not if you’re hunting. Are knives bad? Not if you need to chop some vegetables …”
He suggests being cautious about when you use Sass, and approaching it as a nimble complement to what you already know. “Don’t use a tool just because you’ve read an article that says it’s cool.
“Look at the problems you have and find out what’s going to solve them. Don’t get me wrong – I’m a massive fan of Sass, but it’s not a magic bullet.”
04. Study businesses before code
“For me, ” Roberts says, “understanding the business is very important in understanding how and why a product was put together.
“Before I go into a client, I try and get a 30,000ft overview of the organisation. If I can, I’ll have a Skype call with a couple of developers and somebody above them, to get a view of their problems.
> Fasetto brought Roberts in to build a solid and scalable UI for its new product
“At the end of the day, I exist to solve business problems. It’s all about cost savings and efficiencies.”
05. Talk to developers
With this overview established, Roberts dives into the code. And the code base can be big, he says, explaining that he spends a lot of time poring over the code.
When he can’t get on-site, he’ll do review code remotely, although this does have its inherent difficulties.
> CSS Lint by Nicole Sullivan is recommended for poking into code
“I could look at some source and think ‘this is ridiculous, why has the developer done this?’ But I could sit with the developer for five minutes and they could explain that – for whatever reason – they’ve got to support a particular device.
“Suddenly you realise this isn’t a bad developer, this is is a good developer working in a tough environment. So looking at code is very political and business-orientated.”
When it comes to the nuts and bolts of code dissection, recommends CSS Lint by Nicole Sullivan and Chrome’s Dev Tools.
06. Build sites to last
Along with making sites run quickly and efficiently, another big concern for Roberts is building sites that are sustainable – ones that last, and ones that can be maintained.
“I work in companies where sites could already be three years old and might need to last for another eight, ” he says.
“The key issimplicity. Reduce the number of moving parts – if you can get rid of it, do so. There’s no framework or language that’s going to make your site last 20 years, as if by magic.”
> For the NHS site, Roberts built the UI Toolkit and architecture: more at https://csswizardry.com/case-studies/nhs-nhsx-elearning-platform
A lot of clients are prone to falling under the spell of the latest,greatest and shiniest new technologies, he explains.
For example, they may want to use a new technology and, to ensure compatibility with old browsers, they plan to build fallbacks.
“You’ve instantly given yourself two lots of work. You’ve got new stuff for new browsers and old stuff for old browsers. The thing is, the old stuff works everywhere. So if you need [the site] to last a long time – and this is a very unsexy stance to take – just use the thing that will work everywhere.”
..(read more here on Creativebloq…)
