Skip to main
Article
Nicole Sullivan on stage

CSSConf 2016 Recap

It was a pleasure speaking at CSSConf 2016 in Boston! Here are some of my notes from the event – covering everything from creativity and the Bauhaus movement to SVG 2 internals, React styles, CSS grid layouts, and custom properties (e.g. CSS-native variables). I included links to slides and video whenever possible.

Thanks to Nicole Sullivan for founding the series, Bocoup for hosting the event, Claudina Sarahe (an OddBird alum) for her amazing emcee-ing, all the other speakers for their inspiring talks, and everyone else for attending! It was a great atmosphere, and I met all sorts of lovely people.

My talk was called Sass Map Magic – a major update to a talk I had given several years back at BlendConf (may it rest in peace). The video is available online.

I took extensive notes on day one, but lost my focus on day two, when I was part of the lineup. All the talks were great, and worth your time if you have a chance to watch the videos.

Sarah Drasner speaking

Sarah Drasner talked about programming as a creative act. There is more than one way to solve any given problem – and different solutions will come with different trade-offs. It’s worth exploring the options, while keeping in mind that code is a communication tool, and you should engineer with maintainers in mind.

In the second part of the talk, Sarah listed several tools for creative thinking. I have found all these tools particularly helpful as an artist, and it was a nice reminder that they can apply to code as well.

  1. Question the base premises
  2. Impose artificial bounds
  3. Repurpose existing solutions
  4. Combine existing solutions
  5. Use open source code (this seems like an extension of 3 and 4)

Of course, this summary barely does justice to the beautiful demonstrantions Sarah included. Check out her CodePen page for a whole load of amazing and beautiful samples.

Brian Jordan speaking

Brian Jordan talked about automated front-end testing, with tools like PhantomJS. He works with code.org, a non-profit working to increase student access to computer science curriculum across demographics.

I didn’t take thorough notes on his overview of PhantomJS, but there were a few philisophical points that stood out:

Jessica Lord speaking

Jessica Lord showed us how to use Electron to build native (Mac, Windows, Linux) desktop applications using Node, HTML, and CSS – with simplified access to native APIs.

That was pretty cool, but then she got to the point of the talk title: CSS to help “nativize” your styles, so your app feels like desktop software, and not a website.

Since Electron uses the latest Choromium rendering, you don’t have to target multiple browsers – but you do have to contend with multiple operating systems. Among other things, she advised disabling cursor: pointer and “rubber-band” scrolling.

Pete Hunt speaking

Pete Hunt gave the most controversial talk of the conference, exploring the advantages of in-line CSS generated by JavaScript, using tools like React, JSX, and JSX Style. It’s the obvious solution if you hate the cascade or think the separation-of-concerns is over-rated. I don’t.

From the JSX perspective, CSS has several major problems:

The React approach:

Of course, this causes some new issues that have to be solved by the JS processor:

Jen Kramer speaking

Jen Kramer provided an overview of past and present CSS layout techniques, and an introduction to the new CSS Grid feature (still only available behind flags).

None of the existing options were designed for page layout. Tables were designed for tabular data, floats for inline content wrapped by text (like images and callouts), and flexbox for gallery-style UI components.

All of them deal with layout along a single axis of flow – what Jen referrs to as “one-dimensional” layout. To use any of them for layout, we have to include “row” markup to handle the second dimension.

CSS Grids are substantially different, providing layout options along both dimensions, and changing the way we think about flow. No row markup is required, because rows are handled directly in the CSS syntax, and elements can be rearranged (think flexbox order) along both dimensions.

The spec is mostly complete but implementations are sparse, hidden behind flags, and buggy across all browsers. Jen recommends using Chrome to explore the new possibilities – but it will be some time before we can use it in production.

Will Boyd speaking

Will Boyd provided guidelines for creating smooth animations in CSS. To avoid jank, you have to keep all animations and transitions at 60fps.

By breaking performance down into multiple steps (loading, rendering, painting, displaying), Will was able to isolate the main causes of “jank” and show us where to focus our efforts.

Loading the DOM tree from HTML is outside the scope of CSS animations – so not a central issue for frame-rate (though unrelated background loading can slow down overall performance for non-accelerated animations).

Rendering the DOM tree into a visual layout requires matching CSS to DOM elements. The hardest part is determining geometry and position in the flow. Re-rendering also requires a re-paint, so anything that forces the document to re-calculate flow is going to cause performance issues. Avoid reflow by avoiding changes to properties like height, width, margin, padding, top, right, bottom, left, font-size, and so on.

Painting the rendered layout into individual pixel bitmaps is mostly a matter of color and style. Avoid re-paints by avoiding properties like color, background, box-shadow, etc. Re-paint rarely causes re-flow, so these properties are a smaller drain on performance.

Displaying painted pixels onto the screen is handled by the GPU, and there are several CSS properties that have been GPU-accelerated –  meaning they will never cause a re-flow or re-paint. That includes transform, most filter values (except for drop-shadow and blur), and opacity.

All of these aspects can be tracked in browser Dev Tools, and Will provided great demonstrations to show the differences in performance, and ways to use accelerated properties to achieve affects you might initially try to achieve with other properties.

Keith Grant speaking

Keith J. Grant argued for using a combination of em and rem values, instead of px, for sizing on the web.

Interesting metaphor to “kick” it off: when runners wear softer shoes, they instinctively step harder – negating any medical benefits. Keith suggests that we often do the same with relative units – trying to reverse-engineer pixel values, when we could simply trust the abstration. We all need to learn how to “step softer” with our relative units.

Since em units are relative to inherited font size, they pose a particular confusion – two em values in the same block can render to different sizes:

/* assuming a 16px default inherited font size */
.title {
  font-size: 1.2em; /* 19.2px relative to default font-size */
  padding: 1.2em; /* 23.04px relative to adjusted font-size */
}

Add in nesting, and the problem gets worse. Using rem (root-relative) units in some situations can help provide a more reliable baseline. Keith recommends:

In order to ensure that modular components work anywhere, Keiths sets a rem font-size on the container of every component. Internal elements will be relative to that component root, even when nested inside another component.

I thought that was clever, but haven’t had a chance to play with it. We have generally reverse-engineered pixel values, and I appreciated the reminder that it’s probably not worth our effort. We’ll have to think about that more.

Keith also provides more detail on using viewport-relative vw units for your root font-size. Hint: they work great inside calc(), but provide terrible results on their own.

Lea Verou speaking

Lea Verou demonstrated various ways to use native CSS variables (AKA CSS Custom Properties) – already available in all modern browsers aside from IE/Edge.

As a side note: Lea live-codes her entire talk, and it’s amazing to watch. I learned (after the fact) that she has speaker notes overlayed directly on her slides at low color contrast – invisible to the audience, because projectors can’t handle the subtlety, but clearly visible on her own screen. I love it.

She covered a lot of material, but here are a few things that stood out to me:

The first CSS variable was currentColor, added to Opera in 2009. The new CSS variables are actually more like custom properties, written with an “empty” prefix (e.g. --property) – and solve a much different issue than Sass variables by inheriting as part of the DOM. Here’s a basic example for defining and accessing a custom property:

.this {
  --color: blue;
  color: var(--color);
}

You can use an @supports block to add custom properties to your site as progressive enhancements:

@supports (--css: variables) {
  /* etc */
}

@supports not (--css: variables) {
  /* etc */
}

By default, custom properties are inherited. You can turn off inheritance for a property, by resetting its value to initial in a universal selector:

* { --property: initial; }

A few use-cases to note:

You can also use custom properties to handle autoprefixing, or setting multiple properties at once. Setting the global value to initial ensures that nothing new is applied by default, but any new value will be applied to all the properties at once:

* {
  --clip-path: initial;
  -webkit-clip-path: var(--clip-path);
  clip-path: var(--clip-path);
}

Some custom-property gotchas:

There’s so much more! I highly recommend watching the video.

Sara Soueidan speaking

Sara Soueidan was scheduled to talk about SVG, but talked instead about hacks that she has learned to appreciate while working on the redesign of a major site. I found it hard to take good notes – but this talk is well worth the watch. So much good material in here!

Henri Helvetica speaking

Henri Helvetica talked about optimizing page and image sizes for the web. Did you know mp4 videos have better performance than gif images? Sites like Twitter convert your animated gif into mp4 format for display.

Miriam speaking

I showed a wide range of uses for the underused Sass “map” data type – from simple site theme configurations, to data storage, and complex functional programming.

Zach Green speaking

Zach Green walked us through his Webpack setup. I missed most of this, recovering from my own talk.

Emily Hayman speaking

Emily Hayman demonstrated the ins and outs of using flexbox to build “content-driven” layouts, instead of forcing our content into grid colums. It’s a great overview, and I particularly resonate with the “step lightly” philosophy that was repeated here. If you need a refresher on the how and why of flexbox, this is a great place to start.

Justin McDowell speaking

Justin McDowell used CSS transforms, grids, and more to bring Bauhaus-inspired art and layouts to the browser. It’s a fun and beautiful talk, that includes a demonstration of “Dolly zoom” (also known as the “vertigo effect”) in CSS.

Amelia Bellamy-Royds speaking

Amelia Bellamy-Royds gave us a full overview of changes in SVG2, along with a history of SVG. This talk is packed full of useful information, if you are using SVG in any way.

speaking

Alisha Ramos closed out the conference with a rousing talk about diversity (and privilege!) in tech. A few take-aways:

I would have taken better notes, but I was too busy applauding. This was a great way to end the conference. You should watch the video, and I should find my local Black Girls Code (or similar) to volunteer.

Recent Articles

  1. Stacks of a variety of cardboard and food boxes, some leaning precariously.
    Article post type

    Setting up Sass pkg: URLs

    A quick guide to using the new Node.js package importer

    Enabling pkg: URLs is quick and straightforward, and simplifies using packages from the node_modules folder.

    see all Article posts
  2. Article post type

    Testing FastAPI Applications

    We explore the useful testing capabilities provided by FastAPI and pytest, and how to leverage them to produce a complete and reliable test suite for your application.

    see all Article posts
  3. A dark vintage accessory store lit by lamps and bare bulbs, with bags, jewelry, sunglasses and a bowler hat on the wooden shelves and carved table.
    Article post type

    Proxy is what’s in store

    You may not need anything more

    When adding interactivity to a web app, it can be tempting to reach for a framework to manage state. But sometimes, all you need is a Proxy.

    see all Article posts