It's not Dark magic - How the browser processes CSS / Aimee Knight

NashJS - Nashville Javascript
NashJS - Nashville Javascript
Public group

Every 2nd Wednesday of the month

Location image of event venue


It's not Dark magic - How the browser processes CSS
with Aimee Knight


JavaScript developers are often puzzled when CSS renders in unexpected ways. It's not dark magic though. This talk focuses on why CSS behaves the way it does. We'll deep diving into browser internals to see how CSS is parsed and rendered so we can debug our styles just like we do our JavaScript.


Chances are if you're a JavaScript developer you're also writing CSS. When you first looked at CSS it probably seemed like a breeze. You added some border here, changed some background colors there. JavaScript was the hard part! Somewhere during your progression as a JavaScript developer that changed though! What's worse is that many of us 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 know how to debug our styles sheets like we do our JavaScript!

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 dart board! We'll discuss the most common issues JavaScript 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 parsed and rendered.

Sure, you may still not have an eye for design, but you might just walk away a CSS guru!