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
Given that on Twitter, the light blue brand color is the prominent hue and is the base for the rest of the blue hues on the site, it makes sense to define the brand color using the CSS HSL color function and put the hue value in a CSS native variable. Doing so enables us to update the rest of the hues in one place.
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
Responsive design has been around for quite a while, yet it is still something with which many web developers struggle. This tip will help you create a responsive website more easily:
Measure the Responsiveness
First, we need to determine the range of every breakpoint in Twitter’s responsive design. Breakpoints in a responsive website are the places, i.e., the widths, in which the website’s layout should change. We implement these layout changes by adding or changing the styles within media-queries targeted at the various widths.
Modeling Twitter’s Responsive Ranges:
0px — 499px
500px — 1004px
1005px — 1094px
1095px — 1281px
1282px — Infinite and up
Creating Media Rules
After understanding breakpoints, it is essential to understand how to create media rules inside the responsive design breakpoints. One of the most important guidelines in my methodology of “Basic First” is that if a certain style in a small screen isn’t used in the next screen size, we should encapsulate that style in a media query breakpoint. This way we control which style affects the bigger screen and which doesn’t.
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
Now that the web industry has adopted CSS Flexbox — which has taken quite a long time — it is time to adopt CSS Grid.
Why CSS Grid?
CSS Grid gives you an easy way to create a website’s base structure. Even though we can create this Twitter example using CSS Flexbox, in my personal opinion, creating the website’s main grid, is better and much easier using 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
In the past few years, we’ve started seeing full frameworks such as Tailwind CSS, which take the utilities class one step forward. The advantages of this approach might be that we can quickly build web pages and that the CSS file sizes are small; however, its disadvantage is that the HTML loses all its semantics, and this makes it harder for us to understand our components.
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?
The question of what a partial is seems like a fundamental question, and therefore we feel that the answer should be simple. However, understanding which part should exist on its own and learning how to break a component into partials is a trial and error process that goes on as you gain more and more experience.
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 hope I inspired you and showed you some new possibilities.
If you liked this post, I would appreciate applause and sharing 🙂.
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.
My Full Twitter Reverse Engineering CodePen Example:
