CSS-Sweeper — When CSS Becomes a Programming Language

Remember when CSS was considered purely a styling language? The CSS-Sweeper project by PropJockey breaks this stereotype, demonstrating that you can implement a stateful logic game using pure CSS. Yes, that's a fully functional Minesweeper without JavaScript!

How does it work?

The project is built on a clever technique called Space Toggle. The idea is that CSS variables can contain either a space (;) or the value initial. This allows you to create logical constructs directly in stylesheets.

Core principles of Space Toggle:

• If a variable contains a space (--var: ;), it's considered "true"
• If a variable contains initial (--var: initial;), it's "false"
• By combining such variables, you can implement AND/OR logic

/* Пример AND логики */
--red-if-both-true: var(--tog1) var(--tog2) red;
background: var(--red-if-both-true, blue);

Game features

1. Full gameplay — flags, mine counting, empty cell detection
2. 16 difficulty levels — each with a unique mine layout
3. Adapted win conditions — you need to mark all mines without making mistakes

Technical details

The author used checkboxes to control cell states. When clicked, the checkbox changes CSS variables, which in turn affect the display of the game board. Mine generation happens via JavaScript at build time, but the game itself runs without it.

// Пример генерации уровня
var levels = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
levels.forEach(lvl => {
  while (Object.keys(lvl).length < 99) { 
    var y = ~~(Math.random() * 16);
    var x = ~~(Math.random() * 30);
    lvl[`bomb-${y}-${x}`] = `--bomb-${y}-${x}: ; --not-bomb-${y}-${x}: initial;`;
  }
});

Why do developers need this?

1. Learning CSS capabilities — the project shows what modern CSS technologies are capable of
2. Alternative approach to state — useful for simple interactive elements
3. Inspiration for experiments — who knows what else can be implemented in pure CSS?

Limitations

As the author himself acknowledges, the game may lag on low-powered devices — CSS isn't optimized for such computations. The win conditions are also simplified due to the inability to implement recursive cell opening without JavaScript.

CSS-Sweeper isn't just a technical demo project, it's a real challenge to the traditional separation between "logic" and "styles". Try playing it yourself and see that CSS can be an surprisingly powerful tool!

For those who want to dive deeper into Space Toggle, the author recommends their other projects and explanation tweets.