I am Harry Roberts. Ask me anything.

RE:

Hello Harry,

Thank you for the AMA! To be honest, I am a fan of your ITCSS and BEMIT techniques (at least what I could find out in the WWW), so I really look forward to the AMA and all of your answers!

As for my questions, here are a few which I find highly interesting:

  1. On CSSWizardry, you sometimes use CSS, but you also sometimes use SCSS. Do you have any pattern when to use what?
  2. What are your most-used SCSS features, which will probably not be replaced by upcoming CSS standards in the short-run?
  3. How do you decide on responsive breakpoints? For which elements do you add special breakpoints? (images, menues,...)
  4. I sometimes read that rendering performance can be influenced by carefully writing certain CSS selector rules. Do you think something like that is plausible, or even relevant for todays highly performant devices?
  5. If you could change any one way CSS is used today with a wish to a djinn, what would it be?
  6. I have been waiting for the release of an official ITCSS spec and the Inuit framework for some time. Can we expect anything this or next year?

I really hope you could answer one question or another. Thank you for your time and motivation to do this AMA :)

Wow! Good questions.

I am a fan of your ITCSS and BEMIT techniques…

Thanks :D

On CSSWizardry, you sometimes use CSS, but you also sometimes use SCSS. Do you have any pattern when to use what?

I am a little inconsistent with this, but I recently hit upon a rule of thumb for myself: if using Sass would obscure the message, I will avoid it. Even if Sass would improve the overall code, but masks the thing we’re trying to learn, then leave it out. I hit this conclusion on an article in which I was demoing custom properties and @supports[1]: using Sass would have made the code much more terse but would have definitely detracted from the whole point of the article.

What are your most-used SCSS features, which will probably not be replaced by upcoming CSS standards in the short-run?

Honestly, probably just flat @imports. Vanilla CSS @import is absolutely evil as far as performance is concerned, so having Sass flatten them for me is great. That said, HTTP/2 will negate the need for concatenation, so maybe even that will be less important to me in future.

How do you decide on responsive breakpoints? For which elements do you add special breakpoints? (images, menues,...)

This is really difficult. Usually a designer will have picked them already, loosely around ‘traditional’ screen sizes (480, 1024, etc.). This isn’t ideal, but it’s kinda just how things are: just make sure you convert the values to ems[2].

Any piece of UI that needs a tweakpoint should get one, so custom breakpoints should be used as soon as the design starts to look strained.

I sometimes read that rendering performance can be influenced by carefully writing certain CSS selector rules. Do you think something like that is plausible, or even relevant for todays highly performant devices?

Selectors do have an inherent performance value[3], but it should be the very last thing on our list to optimise.

If you could change any one way CSS is used today with a wish to a djinn, what would it be?

Honestly? I wish that only people who wanted to write good CSS would actually write it. Too many people openly don’t care about quality CSS, and that’s where we get problems. That said, I’d be out of a job if everyone did it properly!

I have been waiting for the release of an official ITCSS spec and the Inuit framework for some time. Can we expect anything this or next year?

I have a great team of contributors working on inuitcss at the moment, and we’re fast approaching a beta. ITCSS… it’s hard to say. I might publish it as an eBook, but that’s going to take more time than I currently have I’m afraid :(

  1. http://csswizardry.com/2016/10/pragmatic-practical-progressive-theming-with-custom-properties/
  2. https://zellwk.com/blog/media-query-units/
  3. http://csswizardry.com/2011/09/writing-efficient-css-selectors/

Reply to this…

(31 questions) Take me to the AMA