When the web standards movement first began to take off years ago one of its primary advocates, Dave Shea, launched CSS Zen Garden to showcase what designers could do using only web standards. CSS Zen Garden proved a huge hit, drawing hundreds of contributions from web developers around the world.
The web has changed considerably since the heyday of CSS Zen Garden. Today we can do just about anything using web standards like HTML and CSS, but now there's a new problem – websites are getting fatter, as much as 25 percent fatter in the last year alone. Much of that added weight comes from JavaScript, but CSS shares some of the blame. According to HTTP Archive, the top 1,000 sites on the web load an average 30KB worth of CSS.
Inspired by CSS Zen Garden and driven by a desire to showcase what can be done with a mere 1KB of CSS, Jacob Rask, a web developer at Opera Software, created CSS1K about six months ago. Since then the site has showcased 68 different designs, all with stylesheets under 1KB.
The site is modeled on CSS Zen Garden, with a fixed set of HTML tags and content. Using that HTML base designers can then bend the basic frame to whatever look they've come up with – provided the total minified size of the CSS file is only 1KB.
Call it an effort in minimalism if you like, or simply think of it as a design constraint; either way designs submitted to CSS1K demonstrate just how much is possible with very little CSS. While no one is suggesting every website needs to be so constrained, playing with CSS1K is a nice reminder that you don't always need huge stylesheets to create a nice-looking website.
If you'd like to participate in the CSS1K fun just fork CSS1K at GitHub and send your submission as a pull request. There is essentially only one rule – you can't use data URIs, @font-face or @import statements to skirt the 1K CSS filesize limit. Note, however, that your 1K CSS file can be minified and any browser prefixes you need don't count toward the total (in fact, you submit your code unprefixed and CSS1K adds the prefixes for you). For the full details and file requirements, head over to CSS1K.
