CSS Findings From The Threads App: Part 2

Design and Development tips in your inbox. Every weekday. ads via Carbon

In late August, Meta released the full web experience for the Threads app. By “full”, I mean an experience that lets you interact and post on threads. The previous web version was read-only. I wrote about my initial findings here.

在八月底，Meta发布了Threads应用的完整网络体验。我所说的“完整”是指可以与Threads进行互动和发布的体验。之前的网络版本只能阅读。我在这里写了关于我的初步发现。

In this article, I will take another look and see if there are interesting things that I found along the way.

在这篇文章中，我将再次审视并看看是否有我在途中发现的有趣的事情。

Are you ready? Let’s dive in.

准备好了吗？让我们开始吧。

Kicking it off

开始

I found it interesting to look at how other engineers approach building a web layout. Let’s take a look at the main layout of Threads’ home page.

我发现看其他工程师如何构建网页布局很有趣。让我们来看一下Threads主页的主要布局。

Outlining the page

页面概述

It’s important to remember that anything you see on the screen is a box, even if it’s a circle or a 1px separator. Everything is a box.

重要的是要记住，无论屏幕上显示的是什么，它都是一个盒子，即使它是一个圆形或一个 1px 的分隔符。一切都是一个盒子。

I added the following CSS to every element on the page:

我为页面上的每个元素添加了以下CSS：

*,
*:before,
*:after { outline: solid 0.5px #db6a7d; border: 0;
}

An outline with 0.5px width. I picked half a pixel so that it’s easier to look at the boxes. I also removed all borders as they cause confusion.

一个带有0.5px宽度的大纲。我选择了半个像素，这样更容易看到方框。我还去掉了所有的边框，因为它们会引起混淆。

Since this is a web app, the CSS I added won’t be removed as the page won’t be refreshed. That means I can navigate to other pages and get an overview of its boxes.

由于这是一个Web应用程序，我添加的CSS不会被删除，因为页面不会刷新。这意味着我可以导航到其他页面并概览其框。

Here is a video of me doing that:

这是我做的一个视频：

Interesting, right? I like to use that for a couple of reasons:

有趣，对吧？我喜欢出于以下几个原因使用它：

I can get a bird-eye view of the components and layout.
我可以从整体上查看组件和布局。
It’s possible to spot UI issues.
可以发现UI问题。
It makes it easy to analyze the UI before inspecting the CSS.
这样可以在检查 CSS 之前轻松分析 UI。

Let’s take a few examples from Threads.

让我们从Threads中选取几个例子。

Analyzing the outline: an example

分析大纲：一个例子

In this exampl...