{"id":338362,"date":"2021-04-26T07:05:00","date_gmt":"2021-04-26T14:05:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=338362"},"modified":"2021-04-26T07:15:16","modified_gmt":"2021-04-26T14:15:16","slug":"generating-and-solving-sudokus-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/generating-and-solving-sudokus-in-css\/","title":{"rendered":"Generating (and Solving!) Sudokus in CSS"},"content":{"rendered":"\n

I love to make CSS do stuff it shouldn\u2019t. It\u2019s the type of problem-solving brain training you\u2019d get building a calculator in Minecraft<\/a>, except you probably won\u2019t get a job working with Minecraft Redstone no matter how good you get at that, whereas CSS skills are worth actual money, and many generalist programmers are scared of CSS, so studying it can be a way to stand out from the pack. Also, when you\u2019ve done the impossible with CSS, all normal CSS tasks seem easy.<\/p>\n\n\n\n

I\u2019ve read interesting discussions on the web about whether CSS is a Turing complete language<\/a> and whether CSS and HTML qualify as programming languages<\/a>. I haven\u2019t decided, but I can say that in the quest to support common UI patterns in a standard way, some of the newer CSS features blur the line between styling and functionality.<\/p>\n\n\n\n

Challenging ourselves to solve logical problems with only CSS and HTML can force us to spend quality time with some of the newish, programing-like features of CSS, such as custom properties<\/a> and logical functions<\/a>. It still wasn\u2019t clear how these could be used to build a Sudoku solver using only CSS, but as crazy as the idea sounded, the constraint-based logic of Sudoku seemed like it might be compatible with the declarative nature of CSS, so I wasn\u2019t shocked to find someone else claimed to have built a \u201cCSS3 Sudoku solution solver<\/a>.\u201d As it turned out, this was more like a sudoku validator in CSS than a solver. It also used a tiny bit of JavaScript to work with textboxes.<\/p>\n\n\n\n

After days of valiantly trying to build a full Sudoku solver and generator app in pure CSS, I learned three things.<\/p>\n\n\n\n\n\n\n\n

  1. You can unit test Sass function<\/a>s<\/a> and mixins<\/a>, which is awesome. If you\u2019re heavily using and reusing these Sass features, which is what they are meant for, they become as mission-critical and as scary to change as any other part of your codebase. They deserve tests around them.<\/li>
  2. Chrome DevTools shows an infinite spinner of death when you throw 50MB of Sass-generated CSS at it.<\/li>
  3. Maybe it\u2019s impossible to translate something like this Python script<\/a> into pure CSS. Maybe.<\/em><\/li><\/ol>\n\n\n\n

    However, we can achieve a Sudoku solver and generator app for 16-square Sudoku which you can play with below, then we\u2019ll break down how its features work. Where is your god now, simple puzzle intended for young children?<\/p>\n\n\n\n