(guest@joequery.me)~ $ |

CSS From Source - Introduction

(This post is part of the css from source series.)

Although jQuery was my first love (hence the handle @JoeQuery), I never enjoyed working with CSS back when front end web development was my specialty. That was over five years ago, and I've always been secretly intimidated by CSS, especially with regards to layouts.

My brain doesn't work like that

The issue is that CSS is generally not taught in a way that matches my learning style. This is not to say that it's taught "wrong". However, in order for me to learn, I must understand the why and the how of whatever it is I'm trying to learn. Generally speaking, the only reasoning provided behind why a certain layout was done a certain way was because, well, that's how the author was finally able to make it work.

I feel like this gif sums up the standard approach to CSS quite well.

(via GIPHY)

I never felt like I had a strong enough theoretical grasp of how CSS actually worked in order to make sense of things like floats and margin collapse. Every quirk seemed random. There was no foundation for my understanding, it was all rote memorization.

As an analogy, if you have an intermediate level of understanding of JavaScript, you know that [] == [] evaluates to false. Although that statement is inconvenient, if you understand how JavaScript is comparing the reference to the array and not the contents of the array you can understand the behavior. My journey with CSS was akin to just memorizing that [] == [] is false instead of understanding why, but with every single quirk CSS has.

Staying current

In my current role my responsibilities include Docker management, monitoring and alerting, general sysadmin tasks, and recently I've been placed in charge of constructing CI Pipelines for our developers. Front end has not been part of my professional career for a very long time.

So I'd like to reacquaint myself with CSS in order to stay flexible in the job market. This go-around, however, I will use different resources to truly understand how CSS operates at the fundamental level.


The resources I will use are not the standard CSS blogs that I attempted to learn from in the past. Such blogs are very good at showing how to do things, but they do not satisfy my need to know why it must be done that way. The best resources I have found, consequently, are the official specs.

In addition, I did some digging through the Chromium source and came across a goldmine of testcases. Literally every scenario you could possibly think of has a testcase in the Chromium source. This makes sense - the people who write the CSS rendering engines will create testcases to evaluate their engine, including all the quirks.

These are the resources I plan on learning from. I will be documenting my progress along the way.

I'm calling this educational journey "CSS From Source".

Tagged as css

(This post is part of the css from source series.)

Date published - January 30, 2018