CSS Naked Day 2024

CSS Naked Day is starting in about 2 weeks, so I thought I’d create this topic as a means of spreading the word, talking about what it is and why it’s a useful exercise for your website, and (hopefully!) convincing you why you should participate too!

What is CSS Naked Day?

On one full day each year, on the 9th of April, participants in CSS Naked Day remove CSS from their websites and expose their unstyled HTML to the world. :blush:

But… why?

The idea behind CSS Naked Day is to promote web standards. Plain and simple. This includes proper use of HTML, semantic markup, a good hierarchy structure, and of course, a good old play on words.

- CSS Naked Day

Now, I don’t recommend waiting until April 9th to remove your website’s CSS and potentially be caught with your pants down.

Preparing for CSS Naked Day in advance of April 9th is an excellent exercise to go through to make sure that your website is delivering strong, semantic, and structured HTML that works and makes sense to visitors without the CSS slapped on top.

It’s worth remembering that although CSS is important to the visual identity of our websites, it is merely the skin on the skeleton that is the website’s content. When a visually-impaired user visits our websites, they may struggle to or be unable to perceive the visual side of our website. And it’s not fair that they should have a hard time consuming our website’s content because we’ve relied too much on CSS to carry the weight of delivering the website’s experience. Content reigns supreme.

Compared to poorly-structured or unsemantic markup, this provides a much smoother and more easily-understood experience for people using screen readers, consuming your content through an RSS feed reader that strips styling away, etc.

Furthermore, having a clean separation of concerns between your HTML and CSS is definitely a good coding practice. By thinking of our CSS as an enhancement to our HTML and not something that needs to be coupled alongside the HTML for it to be understood, we’re ensuring a rock-solid foundation on which to build the rest of our front end code.

Besides the accessibility gains, making sure that our HTML is semantic and provides a strong hierarchy structure also helps to highlight other issues we might not have considered, not limited to:

  • How and when to use certain HTML attributes like hidden, disabled, or aria-hidden, and even “visually-hidden” classes
    • Those classes won’t work without CSS!
  • The structure of headings (h1h6)
    • Do they follow a logical order?
  • The difference between images used as content and images that are purely presentational
    • Is an image actually part of the content of a page or is it serving a UI function?
  • Does the order of the page’s overall content make sense?
    • e.g. Reordering elements with CSS Flex or Grid won’t affect the HTML order, tab order, or how things read in an RSS feed reader!

April 9th lasts for 50 hours, not 24.

Although the event takes place on April 9th, CSS Naked Day actually lasts for 50 hours. This is so that no matter where in the world a website’s visitor might be—in other words, no matter their timezone—if it’s April 9th on their calendar, our websites should be served without CSS.

For example, someone living in the UTC+14 timezone will arrive on April 9th first, whilst the rest of the world is still on April 7th / 8th, so we need to make sure that our CSS is disabled by then.

Likewise, someone in the UTC-12 timezone will be in the last timezone to tick over from the 9th to the 10th, so we need to make sure CSS is disabled until then.

This leaves us with a 50-hour period during which time participants’ websites will be served without CSS, stretching from April 8th @ 10:00:00 UTC until April 10th @ 12:00:00 UTC.

- Me :nerd:

In other words, CSS Naked Day lasts from April 9th @ 00:00:00 UTC+14 until April 9th @ 23:59:59 UTC-12.

14 + 24 + 12 = 50

How do I participate?

The way that you go about stripping CSS from your website on April 9th is totally up to you.

This could be as quick as commenting out any of the following:

  • <link rel="stylesheet" src="..." /> tags
  • <style>…</style> tags
  • inline style="…" attributes on HTML tags

If you use a static site generator or templating system that supports JavaScript, you can use this snippet of code to expose a variable, isCSSNakedDay, that will be true or false based on whether the current date and time sit inside the 50 hours of CSS Naked Day.

const now = Date.now()

const thisYear = new Date().getFullYear()

const startEpoch = new Date(`${thisYear}-04-09T00:00:00+1400`).getTime()
const endEpoch = new Date(`${thisYear}-04-09T23:59:59-1200`).getTime()

const isCSSNakedDay = startEpoch <= now && now <= endEpoch

There are a number of other pre-written snippets of code you might find useful on the CSS Naked Day website:

Won’t my website visitors be confused?

So as to not leave any website visitors wondering why your website looks “broken”, I think it’s a good idea to put up some kind of temporary message letting people know that you’re participating in CSS Naked Day.

Here’s the message that appears on my website:

Is this page broken?

Not at all! I’m participating in CSS Naked Day with the hopes of helping to promote proper use of HTML, semantic markup, [and] a good hierarchy structure.

This is an excellent exercise in making sure there is a clear separation of concerns between HTML and CSS and ensuring that the content of a website is accessible and navigable, particularly for visitors that won’t have the benefit of CSS to style the page (e.g. those using screen readers or RSS feed readers). I highly recommend trying it out and participating yourself!

Add yourself to the list of participants!

The page for this year’s event can be edited on GitHub. You should add yourself to the list if you plan on participating!

Check out the repository’s Pull Requests for example of how others have added themselves to the page.

Hope to see others joining in this initiative and stripping naked on the 9th of April!


This is a cool and fun idea to get people to think about how they use semantic HTML! I haven’t heard of it before, but I may try doing it this year if I don’t forget ^^ considering my site uses A Lot of CSS it should be a fun and stark difference

1 Like

if you enable the menu bar in firefox, you can quickly disable any page’s CSS with
     View > Page Style > No Style

quick CSS stripping in firefox

i’m not sure that i’ll participate in the event (my excuse is that i write all of my pages by hand), but i do use this tool to check that my page structures make sense. my index page gets hilariously disassembled, but it’s still coherent (i think). my most recent code jam page, on the other hand… :skull_and_crossbones:


Yikes. Well that was an awful thing to bear witness to :joy: Yea, I think I’ll have to sit this year’s event out, unfortunately. But next year fosho!

1 Like

I’ll try to remember to make a post about it earlier next year! Just didn’t want folks to have to think about splitting time between stripping CSS and the Code Jam! :party:

There wouldn’t be that much of a difference for my site currently! I’m trying to avoid working on major CSS until I have the basic HTML and Eleventy structure made. The most obvious differences would be a lack of dark mode and the content font switching back to a serif one.

Maybe by the time next year rolls around my site will have a more interesting change!

1 Like

That’s the best way to go about it, imo! Building up the skeleton of HTML and then skin it with CSS.

(Okay, maybe I should stop with this morbid skeleton + skin analogy… :sweat_smile:)

If you aren’t seeing a major changes when you disable CSS, that just tells me you’re going about building your website in a measured, considered way and that the visual experience of consuming your website’s content is probably very similar to the way it is consumed by screen readers and the like. :+1:

1 Like

What a cool idea! I just went through some of my pages and turned off the CSS using Firefox’s option to view without styling. Thanks for the suggestion, @ribose! I am pleasantly surprised to find that my pages render ok without the CSS. They look very early Internet! :laughing:


This is so cool even though I know my website will look horrendous. I am curious what it will look like, and, as you advised, I should take a look before the day since I’ll definitely want to fix some things before then.


Does my website look… good without CSS? Actually some of the pages do. Its it preferable? God no. Does it work? Shockingly, whole site is very usable without CSS. I might do this.


i can’t wait to see what folks’ sites look like nakey! XD this’ll be interesting for sure!

OMG if I have time I’m going to do it. But I have so many sites that I can’t do it to all of them. I gotta decide which is the best one…

edit: I think it makes the most sense to do it to the neocities page. I need an excuse to add a couple things to that anyway.

edit2: I decided to show it off here with some screen shots

Pretty proud of how it turned out without making any changes to it.

The best part is the soundcloud embed which is also pretty respectable. Good job Soundcloud


1 Like

Going off the code from above that defines isCSSNakedDay above…

if (isCSSNakedDay) {
  const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
  stylesheets.forEach((stylesheet) => {
    stylesheet.disabled = true;

  const elementsWithStyles = document.querySelectorAll('*[style]');
  elementsWithStyles.forEach((element) => {

  const styleElements = document.querySelectorAll('style');
  styleElements.forEach((element) => {
    element.outerHTML = '';

If there are any cases I’m missing feel free to add them

1 Like

CSS Naked Day started 46 minutes ago, which means there are still 49 hours and 14 minutes to participate by stripping CSS from your websites!

My website will be naked until the end of this international day for the 9th of April. :blush:

Just wanted to say that this event is making me really focus on the html skeleton of my site rewrite (not my current live one). It’s surprising how many of my favorite sites / role models completely rely on the CSS. Planning to participate next year with my head held up high. :crossed_fingers:

1 Like

Sorry for the double post:
Additionally, working exclusively with HTML recently also makes me think a lot about how protocols like Gemini consider it “bloated”. I sort of understand, but still, I don’t know how much more “lean” I could tolerate :sweat_smile:

1 Like

I nervously checked to make sure my code to go naked worked. Luckily it did. I feel like doing it on my neocities site was kinda cheating because it’s my simplest hand written site. Of course it looks decent. If I did this to one of my other powered websites though IDK haha

If i remove my stylesheet I can see there are two SVGs that could do with some size attributes, otherwise looks pretty usable!

1 Like

I’ll be honest, I’m so insulted that I added this and they left me on “review required” without saying anything to me.

At first I chalked it up to them not having time to look at it. Its fine. But then I see all the other accepted merges, and even telling people what they need to do to fix it.

Me? Just ignored lol.

The only thing I can think of is not wanting to be associated with something on neocities. It’s whatever. I was going to do one of my more professional sites next yet but nah. Im not gonna be rejected like that again lol

CSS Naked Day isn’t just about getting to be on the list, it’s an initiative that anyone can participate in. I know several people who are participating without putting their names on the list.

That said, if you want your merge request to be approved, you probably want to insert your name into the list alphabetically, and you definitely need to leave the “Yours?” link intact at the bottom. Your merge request is replacing the link that invites people to edit the list on GitHub, so if it was merged, it would make make it more difficult for other people to add their names to the list.