
How the Roman Empire Made Pure CSS Connect 4 Possible


Experiments are a fun excuse to learn the latest tricks, think of new ideas, and push your limits. “Pure CSS” demos have been a thing for a while, but new opportunities open up as browsers and CSS itself evolves. CSS and HTML preprocessors also helped the scene move forward. Sometimes preprocessors are used for hardcoding every possible scenario, for example, long strings of :checked
and adjacent sibling selectors.
In this article, I will walk through the key ideas of a Pure CSS Connect 4 game I built. I tried to avoid hardcoding as much as I could in my experiment and worked without preprocessors to focus on keeping the resulting code short. You can see all the code and the game right here:
See the Pen Pure CSS Connect 4 by Bence Szabó (@finnhvman) on CodePen.
Essential concepts
I think there are some concepts that are considered essential in the “pure CSS” genre. Typically form elements are used for managing state and capturing user actions. I was excited when I found people use to reset or start a new game. All you have to do is wrap your elements in a