DEV Community

Daepher
Daepher

Posted on

The smallest stylesheet possible

This is my experiment in building or finding the smallest working CSS stylesheet.

Experiment is to find and create the smallest stylesheet for my website while still being concerned about accessibility and user experience.

For disclaimer, websites such as Motherf-king Website don't count because it doesn't have a stylesheet (and it uses Google Analytics for some reason).

The second contestant is one of its final successors, Perfect Motherf-cking Website that does have a stylesheet with 3 rules and one media query for dark mode (points for dark mode!). I downloaded the stylesheet and got 444 bytes from it, ungzipped and unminified.

This is the stylesheet:

body {
 max-width:650px;
 margin:40px auto;
 padding:0 10px;
 font:18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 color:#444
}
h1,
h2,
h3 {
 line-height:1.2
}
@media (prefers-color-scheme: dark) {
 body {
  color:#ccc;
  background:black
 }
 a:link {
  color:#5bf
 }
 a:visited {
  color:#ccf
 }
}
Enter fullscreen mode Exit fullscreen mode

But its predecessor, Better Motherf-cking Website actually got a smaller footprint: 120 bytes with only two rules. The stylesheet is minified, also.

The code:

body{margin:40px
auto;max-width:650px;line-height:1.6;font-size:18px;color:#444;padding:0
10px}h1,h2,h3{line-height:1.2}
Enter fullscreen mode Exit fullscreen mode

Hard to top this one.

But it doesn't make an effort for dark layout, so this is a compromise I may have to make.

Some adjustements to my stylesheet for the body:

body{margin:40px auto;max-width:600px;font:normal 1.2em sans-serif;background:#121212;color:#fafafa;padding:0 10px;line-height:1.4}
Enter fullscreen mode Exit fullscreen mode

Max content and margins are generally equal to before, but I used the general font property to save some bits. Background and color are being almost swapped for people who find continuously harder read on brighter screens (such as me). I know I should ask the user for its preferences, but in the context of personal sites, getting an obligatory dark interface is not a problem.

The rest comes with the necessity of changing links colors to make it readable.

a:link{color:#5bf}a:visited{color:#ccf}
Enter fullscreen mode Exit fullscreen mode

The colors come from Perfect Website from above.

That leaves me with 170 bytes from a minified stylesheet.

If someone knows how to achieve better results with - preferably - what I have, let me know.


This was originally posted in my website: https://daepher.com

Top comments (1)

Collapse
 
resistdesist profile image
Tayomide

You could try out cssbattle.dev/. It's all about cloning a design with only HTML and CSS then minimizing it to the smallest possible code.