It's time to ditch Medium for good! 🌈⚡️

Introducing Devblog by Hashnode. Blog on your domain for FREE. Highly customizable and optimized for developers.

Learn more

I am Harry Roberts. Ask me anything.

Harry is an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. He writes, tweets, speaks and shares code about authoring and scaling CSS for big websites.

Ask Harry Roberts about:

  • CSS
  • Front-end Architecture
  • Performance Engineering
  • Responsive UIs
  • Scaling large codebase
  • General Front-end development

Hey all!

I’ve had a bunch of fun answering everyone’s questions! There’ve been some really good ones, thank you :)

If I didn’t answer your question quite correctly, or you’d like a little more detail, please feel free to ping me an email and we can discuss things further there: csswizardry@gmail.com

For anything shorter form, you can just fire me a tweet: @csswizardry

I hope you all enjoy the rest of your days, wherever you are in the world. Thanks for having me!

If we’re ever at an event together, come say hi and let’s grab a beer!

H

Ask a Question

63 discussions

If you’re aware of React, what is your opinion on coupling styles with components? What do you think of styled-components.com?

I’m aware of React.

I think packaging your styles with your components is, philosophically, a good idea. This is what Web Components will give us. What I am hesitant about, though, is writing your CSS as JS objects. Writing your styles actually as JS doesn’t sit too well with me. Keith Grant puts it best[1] when he says:

If in 14 months you find a new view library or framework you want to try out, you're out of luck. You will have to invest a lot of time into pulling styles back out of JavaScript modules and into stylesheets again.

By all means, bundle them together, but I’m all for keeping each language/syntax separate.

What do you think of styled-components.com?

I don’t have enough knowledge about it to comment I’m afraid.

  1. http://keithjgrant.com/posts/against-css-in-js.html

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

Hi Harry!

There's very little known about your personal life in the public. Sorry my questions are little personal, since it's AMA (Ask me anything). ;)

  1. Are you married?
  2. Am I invited to Harry's Bar? 😄 https://www.instagram.com/p/BAURBEPIjB3/
  3. What's your favorite drink?

Have been following following your talks, you are awesome! :)

Lisa

Hah!

I suppose it is an ask me anything.

Are you married?

I’m not.

Am I invited to Harry's Bar?

When I open Harry’s Bar for real, I’ll do a tech industry night. You can all come!

What's your favorite drink?

Either a split rye/cognac Sazerac[1] or an Aviation[2] with decent violette.

Have been following following your talks, you are awesome! :)

Thank you :)

  1. https://en.wikipedia.org/wiki/Sazerac
  2. https://en.wikipedia.org/wiki/Aviation_(cocktail)

Reply to this…

Hi Harry, how are you? Thank you for hosting this AMA! Because of you our company is now using ITCSS + BEM to create scalable and maintainable web applications!

How do you normally make ITCSS 'components' responsive? I've seen the use of responsive classes, but do you ever use media queries within your component's CSS?

Thank you for hosting this AMA!

You’re welcome!

Because of you our company is now using ITCSS + BEM to create scalable and maintainable web applications!

Awww yis!

How do you normally make ITCSS 'components' responsive? […] do you ever use media queries within your component's CSS?

If a specific component needs to have a different appearance over several breakpoints, I write MQs inside of it. Responsive classes are usually reserved for utilities where responsive behaviour can be abstracted.

Further, I always write the MQs in the file that they affect (e.g. _components.buttons.scss) and not in a mega MQ toward the end of the project. Encapsulation :)

Reply to this…

Hi Harry, I've followed your work since becoming a front end developer and it's shaped me into the developer I am today. Thanks! What are your plans for http://inuitcss.com/ and http://itcss.io/ ?

Hey! That’s really nice to hear, thanks for taking the time to let me know. That’s very humbling :)

What are your plans for http://inuitcss.com/ and http://itcss.io/ ?

Would you mind if I was real lazy and just pointed you to this answer?

Reply to this…

Have you come across !important soup in any of the code bases you ever looked at? Do you have guidelines on when and when not to use it? "!important everything" meme cracks me up :D

Allllll the time!

!important: 3 seconds to type, 3 years to remove.

Use important proactively: apply it to Utility classes, e.g.:

.u-text-center {
  text-align: center !important;
}

We’d literally never want this class to do anything other than text-align: center; so we force it to always win by using !important.

Never use !important in anger. Don’t use it to get out of specificity wars. Instead, hack the specificity of your existing selectors around[1].

I’ve written and spoken quite a lot about !important, actually[2][3].

  1. http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
  2. http://csswizardry.com/2016/05/the-importance-of-important/
  3. https://speakerdeck.com/csswizardry/css-for-software-engineers-for-css-developers?slide=65

Reply to this…

Load more responses