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. 
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.
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, oraria-hidden, and even “visually-hidden” classes- Those classes won’t work without CSS!
- The structure of headings (
h1–h6)- 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 
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!
Yea, I think I’ll have to sit this year’s event out, unfortunately. But next year fosho!
)
