Skip to main content

CSS1K champions CSS efficiency


Many of the CSS1K designs are interactive

As web connections have sped up, many designers have become a little too relaxed when it comes to optimising work. In the 1990s, it was common for every image and file to be finely tuned to save the odd kilobyte. Today, even some style sheets can weigh in at over a megabyte. To show just what can be done with a little, Jacob Rask has unveiled CSS1K, which the site describes as "a demonstration of what can be accomplished with only 1K [1024 bytes] of CSS". The contest follows the success of similar competitions such as Happy Cog's 10K Apart and JS1K.

Rask told .net that when he first started using CSS seriously, CSS Zen Garden was a huge inspiration; today, he says you can do almost anything with CSS, which has resulted in many galleries and example pages for designers to use as the foundation for their work. "But as you use more complex CSS, keeping your code lean and clean is a growing challenge," he says. "Though CSS1K is mostly meant as a fun experiment, it also helps you practise the difficult art of 'kill your darlings'."

Although Rask is clearly pitching efficiency, he's nonetheless keen to argue against stripping things back just for the sake of it. "It's important to not limit your creativity by prematurely optimising or crippling yourself," he says. “It's always a trade-off, with many factors to consider, the most important, of course, being your audience." He hopes in the near future that CSS and browsers will evolve to assist designers, with better support for selectors such as ':matches()', aka ':any()') and ':not()', which "will let us dramatically reduce the code needed to do advanced targeting of elements, especially in dynamic documents".

Visit CSS1K and find out how to contribute at As a first port of call, Rask suggests checking out the Notepad design ("an example that most developers would instinctively believe they would need images for, yet it's made in only CSS") and Bbubles ("I love the interactivity").