The Web without CSS. 😿
Tags: css, webdev, html, programming
Published: 2020-08-21 14:26:10

If you can, then imagine a world where there is no styling in websites. It's close to impossible, right?

Being in the frontend industry for quite some time, it's very hard to not use CSS in a project. I mean, one of the foundations of a website you create is CSS! Having no CSS is like living a faded life. No excitement, no moods, no emotions, just a straight-up structure with some content in it.

![Expressionless GIF](https://media.giphy.com/media/TcMtAGhEhlXXy/giphy.gif)
<figcaption>Imagine yourself being in such a state 24/7. Yeah, it's hard.</figcaption>

---

## Some backstory (if you like...) /_ \

This is completely a different article of what I usually write on a weekly basis. I stumbled upon this topic a week ago when I was browsing some resources for my upcoming newsletter. Due to some reason a link opened after quite a long time. 

Turns out, the server was really slow to respond. I thought maybe it's a browser issue, so I switched from Chrome to Firefox. The same happened. I opened dev tools to see if there are some errors which I can take a look on. There was nothing I could possibly do as some of the errors were out of my head.

Then I started experimenting (you can blame my curious mind for this). I opened up the Settings and tried to fiddle with things like:

- Turning off some extensions.
- Enabling service workers.
- Recording a performance analysis in the Network tab.
- _Disabling JavaScript._ 👀

![Firefox Dev Tools](https://dev-to-uploads.s3.amazonaws.com/i/g4u1ulbxtilgk5s8dj0c.jpg)
<figcaption>Firefox Dev Tools Settings page</figcaption>

And more such things.

## That sudden idea! (ノへ￣、)

Out of (I don't know what) curiosity, I started searching for "_Disable CSS in Firefox_". Well, I think that it was because of that last point stated above. I tried to disable JS, the page reloads, and still, the website wasn't opening (please don't ask what website that was, it was a pain to remember the name as it was in a foreign language).

I got to know that you can do this in Firefox by hitting the <kbd>alt</kbd> key, then <kbd>v</kbd> -> <kbd>y</kbd> -> and finally <kbd>n</kbd>. Basically this...

![No style mode Firefox](https://dev-to-uploads.s3.amazonaws.com/i/chf7vqxyyk53ih0t067q.jpg)

This activates the "No Style" mode in Firefox so the page you're currently on has no CSS style sheet rules in it. Of course, that horrible website even now couldn't load properly. So I gave up on that and did something weird next...

## Turning OFF CSS on top websites (#_<-)

Yes, I did this. I visited some of the most popular websites on Earth to just explore how they would look. Of course, I knew they would look bad, but how bad?

#### This bad 🙂

⚠ <mark> _**WARNING! DISGUSTING AND UGLY WEBSITES AHEAD. SCROLL AT YOUR OWN RISK.**_</mark> ALTHOUGH I KNOW 99% OF YOU'RE GONNA SCROLL SO JUST GET STARLIGHT INTO IT! 😈


#### 1️⃣ [Wikipedia](https://en.wikipedia.org/wiki/Main_Page)

![Wikipedia website](https://dev-to-uploads.s3.amazonaws.com/i/068zk1lzehh5cnr8zr83.png)

Eheheh, funny but here are some of the things I got to know about it.

1. The use of `font-family: sans-serif` is heavy throughout the body as it's usually a text-based content website.
2. The `line-height: 1.6` plays an important role to have a clear read of its content.
3. They use quite a LOT of borders.

#### 2️⃣ [Amazon](https://www.amazon.in/)

![Amazon website](https://dev-to-uploads.s3.amazonaws.com/i/xh9whpyn66c190zckf3o.png)

**Key takeaways**:

1. The immediate thing you notice is the extensive use of the carousels they use to showcase some products. So here, properties like `width`, `transform`, and `height` play a great role.
2. For the categories section, they're using the grid display.

#### 3️⃣ [Yelp](https://www.yelp.com/)

![Yelp website](https://dev-to-uploads.s3.amazonaws.com/i/jn46voab7wfj0hfw782t.png)
<figcaption>I seriously don't know why Yelp exists...</figcaption>

**Key takeaways**:

1. Apart from good use of SVGs, the `background-image` property makes the difference here.
2. The form uses some pseudo-classes, `position: relative` and `absolute`.
3. Centre-aligned text is important!

#### 4️⃣ [IMDb](https://www.imdb.com/)

![IMDb website](https://dev-to-uploads.s3.amazonaws.com/i/isflf3r25uk7izfe8i7s.png)

**Key takeaways**:

1. In the navigation, there is a good use of `padding`.
2. Surprisingly, the entire IMDb logo is made up of SVG elements which obviously used `width`, `heigh`, `transform` properties.
3. Again, for the anchor tags, there is padding everywhere.

#### 5️⃣ [Fandom](https://www.fandom.com/)

![Fandom website](https://dev-to-uploads.s3.amazonaws.com/i/dwn2ollysx253sajvvox.png)

**Key takeaway**:

Can't tell much due to the integrated use of some CSS framework or library of whatever...but, yes, the buttons having an SVG do have `transform: rotate(0)` properties.

---

## But why? ╰（‵□′）╯

Before you start thinking, "Why the hell he turned off CSS?" I want to tell you that I did this 'experiment' kind of thing to clear out two things:

First, a CSS framework or not, **PLEASE DO NOT UNDERESTIMATE THE SHEER POWER OF CASCADING STYLE SHEETS!** Make it a habit for using pure CSS in your learning, you have no idea how many CSS properties you are not using! 

Second, well, if you take a look at some of the CSS properties discussed above, you get to know that **THESE CSS PROPERTIES ARE HEAVILY USED AND MAKE SURE YOU KNOW _HOW_ AND _WHERE_ TO USE THEM**.

---

## Where to next? 🤔

I turned off CSS, you might have turned off JS way before but how about you turn off HTML now? Well, of course, if you take this seriously, then there will be nothing to critique...or to learn.

But yes, as I said, learn CSS with your heart, give it the same importance as you give to JavaScript. I love it, that's why I wrote this article. Look how bad the internet looks without CSS. It's just unusable...

---

_Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)_

---
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Why was she disappointed? 😂<br>.<br> <a href="https://twitter.com/hashtag/coding?src=hash&amp;ref_src=twsrc%5Etfw">#coding</a> <a href="https://twitter.com/hashtag/developer?src=hash&amp;ref_src=twsrc%5Etfw">#developer</a> <a href="https://twitter.com/hashtag/webdevelopment?src=hash&amp;ref_src=twsrc%5Etfw">#webdevelopment</a> <a href="https://twitter.com/hashtag/iosdevelopment?src=hash&amp;ref_src=twsrc%5Etfw">#iosdevelopment</a> <a href="https://twitter.com/hashtag/javadevelopment?src=hash&amp;ref_src=twsrc%5Etfw">#javadevelopment</a> <a href="https://twitter.com/hashtag/java?src=hash&amp;ref_src=twsrc%5Etfw">#java</a> <a href="https://twitter.com/hashtag/python?src=hash&amp;ref_src=twsrc%5Etfw">#python</a> <a href="https://twitter.com/hashtag/ruby?src=hash&amp;ref_src=twsrc%5Etfw">#ruby</a> <a href="https://twitter.com/hashtag/php?src=hash&amp;ref_src=twsrc%5Etfw">#php</a> <a href="https://twitter.com/hashtag/html?src=hash&amp;ref_src=twsrc%5Etfw">#html</a> <a href="https://twitter.com/hashtag/javascript?src=hash&amp;ref_src=twsrc%5Etfw">#javascript</a> <a href="https://twitter.com/hashtag/codingmeme?src=hash&amp;ref_src=twsrc%5Etfw">#codingmeme</a> <a href="https://twitter.com/hashtag/codingjoke?src=hash&amp;ref_src=twsrc%5Etfw">#codingjoke</a> <a href="https://twitter.com/hashtag/developerhumor?src=hash&amp;ref_src=twsrc%5Etfw">#developerhumor</a> <a href="https://twitter.com/hashtag/devhumor?src=hash&amp;ref_src=twsrc%5Etfw">#devhumor</a> <a href="https://twitter.com/hashtag/devhumour?src=hash&amp;ref_src=twsrc%5Etfw">#devhumour</a> <a href="https://twitter.com/hashtag/programmerhumor?src=hash&amp;ref_src=twsrc%5Etfw">#programmerhumor</a> <a href="https://twitter.com/hashtag/programmingmeme?src=hash&amp;ref_src=twsrc%5Etfw">#programmingmeme</a> <a href="https://twitter.com/hashtag/programmingjoke?src=hash&amp;ref_src=twsrc%5Etfw">#programmingjoke</a> <a href="https://t.co/rfbrh4KBgG">pic.twitter.com/rfbrh4KBgG</a></p>&mdash; Coding Interview Coach (@CoachCoding) <a href="https://twitter.com/CoachCoding/status/1291147056128679943?ref_src=twsrc%5Etfw">August 5, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, [here](https://medium.com/@vaibhavkhulbe)'s my Medium profile.