This year Bazaarvoice sponsored CSSConf 2016 in beautiful Boston, MA, USA and I was able to attend!
Here are my three top takeaways from CSSConf 2016:
Flexy Flexy Flexbox
A little over a year ago, our application team wasn’t sure how “stable” Flexbox or its spec were: there was already an old syntax, a new syntax, and a weird IE10 “tweener” syntax.
The layout advantages Flexbox brought were strong enough (*cough* vertical centering) that we decided to move forward with it and prefix all the things. Now browser support is so good that if you can drop IE8 and work around some known IE11 bugs, there is no reason not to use Flexbox in your designs right now.
A great reference I keep going back to for Flexbox is this css-tricks guide. Here are some other tips and tricks from the conference:
- Flexbox is now available in Bootstrap 4
- Use CSS Grid (when it becomes available) for major page layout, and Flexbox for UI elements
- For mobile / small screens: add a media query and set the
flex-direcitontocolumnto stack your cells instead - Do as much as you can on the container to keep your code DRY (Don’t Repeat Yourself)
- We can finally get rid of that pesky
col-2,col-8,col-crapIAddedWronggrid system!
For more information, I recommend CSS4 Grid: True Layout Finally Arrives by Jen Kramer and It’s Time To Ditch The Grid System by Emily Hayman.
Stop Thinking In Pixels
The talk Stop Thinking In Pixels by Keith Grant was particularly enlightening.
The basic premise was not to micromanage your CSS:
Without fully understanding what CSS is doing for us, we try to push through it to control exactly what is going on in the browser.
Driving this point home, Keith recommended to stop thinking in pixels because
The pixels don’t matter. Let the browser do it.
You should instead be thinking in terms of the em and rem. Tools that simply convert px to em aren’t the answer either — you’re still thinking in terms of pixels and therefore missing out on some important benefits. Instead, learn from something like type scale and approach measurements with a fresh perspective.
I recommend watching the talk in full, but a quick cheatsheet follows:
| Property | Recommended Unit |
|---|---|
font-size |
rem |
padding, margin, border-radius, etc. |
em |
border-width |
px |
When in doubt, use em.
To summarize,
Ems are the most powerful when you fully embrace them.
Apps vs Documents
In this day and age we are all used to thinking in terms of “apps”. But the trinity of HTML, CSS, and JS was not conceived in this day and age. Two great quotes I wrote down from Component-Based Style Reuse by Pete Hunt are
CSS is great for documents, maybe not 2016 Apps
and
If you sat down and created styling in 2016, you would not come up with CSS
Our newest applications are written in React, which encourages developers to think of things in terms of components — pieces of UI that are reusable in different contexts. The Cascading part of CSS interferes with that, however: depending on the context your component is dropped into, it may look drastically different across usages. When that is not what you want, Pete’s ideas center around reusing components, not CSS classes.
As you can imagine, this idea is largely controversial in a conference with a name like CSSConf, but I will continue to keep my eye on it. Pete’s thought leadership on this topic inspires me to challenge norms and dare to envision things differently. After all, if we’re constantly fighting with our tool (CSS), that tool may not be right for the job.
Thanks for reading! For a full list of talks and slides from the conference, check out https://2016.cssconf.com/#videos.