Building a Better Web
June 11–12, 2018: Training
June 12–14, 2018: Tutorials & Conference
San Jose, CA

It's Not Dark Magic - Pulling Back the Curtains From Your Stylesheets

Aimee Knight (Warner Bros. Digital Labs)
9:00am–9:40am Thursday, June 14, 2018
Web Foundations: CSS, HTML, JS, Node
Location: 210 A/E Level: Intermediate
Secondary topics:  Best practice, Developer Experience Track: Tools, Platforms, and Techniques, Technical

Who is this presentation for?

Front-End Developers, Web Developers, Software Engineers, Junior, Midlevel, Senior

Prerequisite knowledge

Basic understanding of HTML, CSS, and JavaScript

What you'll learn

- General CSS debugging - How to debug z-index - How to debug positioning - How to debug specificity - Browser internals - How the browser's rendering engine works - How HTML is parsed - How CSS is parsed


Chances are if you’re a web developer you’re going to have to write some CSS from time to time. When you first looked at CSS it probably seemed like a breeze. You added some border here, changed some colors there. JavaScript was the hard part of front-end development! Somewhere during your progression as a front-end developer that changed though! What’s worse is that many developers in the front end community have simply learned to dismiss CSS as a toy language. The truth, however, is that when we hit a wall many of us don’t actually understand what our CSS is doing under the hood!

We all like to make jokes about it, but how many of us have actually taken the time to try and understand the CSS we’re writing. How many of us have actually reasonably debugged an issue to the next lowest abstraction layer when we hit a wall? All too often we settle for the first StackOverflow answer, hacks, or we just let the issue go entirely.

In this talk, we’re going to finally take a step back and stop mindlessly throwing darts at the dartboard! We’ll discuss the most common issues developers face such as, z-index, the cascade, and positioning in depth by diving deep into the browser’s internal rendering engine structure to see how our styles are actually parsed. Sure, you may still not have an eye for design, but you might just walk away a CSS guru!

Photo of Aimee Knight

Aimee Knight

Warner Bros. Digital Labs

Aimee Knight is a former figure skater, and software engineer at DramaFever, a subsidiary of Warner Bros. Outside of work, she’s a weekly panelist on the JavaScript Jabber podcast, and she regularly participates in a variety of others. In her spare time, she enjoys speaking at conferences, playing with new technology, running, working out, or trying the latest flavor of Kombucha. Find her, and her contagious enthusiasm on Twitter @Aimee_Knight!

Leave a Comment or Question

Help us make this conference the best it can be for you. Have questions you'd like this speaker to address? Suggestions for issues that deserve extra attention? Feedback that you'd like to share with the speaker and other attendees?

Join the conversation here (requires login)