Reverse Engineering Twitter’s CSS

As someone who loves CSS and appreciates its importance in this day and age, it is very unclear to me how the web industry’s most prominent corporations and companies, like Facebook, Google, Amazon, and many others, aren’t taking CSS more seriously. As I wrote in my article ”Why the World Needs CSS Developers,” modern CSS is becoming more and more complicated, and therefore should be written by programmers who are experts in CSS.

After reverse-engineering WhatsApp Web, which you can read about in my article: “Reverse Engineering WhatsApp Web’s CSS,” this post describes how I reverse engineered the Twitter website! This post, in addition to being about a different site, also gives additional takeaways from reverse engineering.

Before we continue, here is my Twitter Reverse Engineering CodePen.

Brand Color

Example:

/* common blue */
--base-color:203; /* base hue of blue*/
--main-color: hsla(var(--base-color), 89%, 53%, 1);
--hover-color: hsla(var(--base-color), 89%, 47%, 1);
--bg-hover-color: hsla(var(--base-color), 89%, 53%, 0.1);

You can find more about how to work with HSL colors in one of my previous articles, “Why CSS HSL Colors are Better!”.

Let’s Talk About Responsiveness

Measure the Responsiveness

Ranges of the responsive design in the twitter website

Modeling Twitter’s Responsive Ranges:

0px — 499px
500px — 1004px
1005px — 1094px
1095px — 1281px
1282px — Infinite and up

Creating Media Rules

Creating Media Rules based on Twitter’s Responsive Ranges Modelling:

/* Responsive Variables (using Sass) */
$break1: "(max-width:499px)";
$break2: "(min-width:500px) and (max-width:1004px)";
$break2open:"(min-width:500px)";
$break3: "(min-width:1005px) and (max-width:1094px)";
$break3open:"(min-width:1005px)";
$break4: "(min-width:1095px) and (max-width:1281px)";
$break4open:"(min-width:1095px)";
$break5open:"(min-width:1282px)";

Let’s Talk About Layout in 2020

Why CSS Grid?

You might ask why CSS Grid is the correct way for styling the main page’s layout. My answer is straightforward: In CSS Grid, you control the styles via the parent element, the container, using the property grid-template-columns which defines the grid’s column size, i.e., the size of the nested element. In CSS Flexbox, however, the styles would be applied directly to the child elements, thus decentralizing our control of the layout styles. Another advantage of defining the layout directly on the parent container is that it makes the CSS much more readable for other developers, and for you — when you come back to the code in the future.

My Basic Structure of the Grid:

/* Grid Layout */
.main-grid{
display: grid;
justify-content: center;
min-height: 100vh;
margin: 0 auto;
@media #{$break1}, #{$break2}{
.main-side{ display: none; }
}
@media #{$break2}{
grid-template-columns: auto minmax(auto, 600px);
max-width: 705px;
}
@media #{$break3open}{
grid-template-columns: auto 600px minmax(290px, 350px);
}
@media #{$break4open}{
max-width: 1235px;
}
}

CSS utility Classes

However, as we know, sometimes there isn’t a perfect semantic element. Or sometimes, there might be many repeated common styles. Because of such cases, I’ve found myself lately using utility classes as something that complements the way I work.

Examples of utility classes:

/* utility classes */
.u-hide { display:none !important; }
.u-block { display:block !important; }
.u-flex { display:flex !important; }
.u-space-between { justify-content:space-between !important; }
.u-common-padding { padding:10px 15px !important; }
.u-margin-auto { margin:auto !important; }
.u-margin-start-auto { margin-#{$start-direction}:auto !important; }
.u-margin-bottom { margin-bottom:10px !important; }

Examples of usages:

<a class="u-block u-common-padding" href=""></a><ul class="message-options u-flex u-space-between">...</ul>

What is a Partial?

Let’s look, for example, at the tweet feed. Are the items part of the list? The logical answer would be yes. But let me ask you another question: what if we want to show the tweet outside of the feed list? Given the second question, the right thing to do, from my perspective, is to disconnect the tweet items into separate partials so that each can be independent.

<!-- Feed Partial -->
<section class="feed">
<ul class="feed-list">
<li class="feed-item">
<!-- Item Partial -->
<article class="tweet-item">
...
</article>
...

If you dig into the “tweet” item partial, you’ll see that it consists of many other inner independent partials.

Example 1 - of message-options partial:

<!-- message options partial --><ul class="message-options">
<li class="message-options-item">
<label>
<button class="icon-button">
<span class="icon">💬</span>
</button>
<span class="text"></span>
</label>
</li>
...
</ul>

Example 2 - the embed-content partial:

<a class="embed-content" href="...">
<img class="embed-content-image" src="..." alt="">
<div class="embed-content-text">
<h2 class="embed-content-title">...</h2>
<p class="embed-content-paragraph">...</p>
<footer class="embed-content-info">
<span class="icon">🔗</span>
<span class="text">medium.com</span>
</footer>
</div>
</a>

Creating a good CSS/HTML architecture is something you’ll continuously get better at over the years, as you gain experience.

Final Words

I create lots of content about CSS. Be sure to follow me via Twitter, Linkedin, and Medium.

You can also access all of my content on my website: eladsc.com.

Who Am I?
I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture.

(Me talking at ConFrontJS 2019, Warsaw, Poland)

My Full Twitter Reverse Engineering CodePen Example:

CSS & HTML Expert

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store