The Class Layer of app.onepassapps.com: 3,323 Class Attributes, 139 Names, and Not One Name on Exactly Two Pages

I work on OnePassApps, the team behind app.onepassapps.com, so this is a measurement of our own site. Every number below was read out of the HTML the server sends, on 8 November 2026, over plain HTTPS with one request per URL: no browser, no session, no cookies and no JavaScript.

A class attribute is the quietest layer of a page. On its own it styles nothing and it is invisible in a screenshot, which is probably why nobody counts it. So I counted ours, across all 56 URLs in our own sitemap.

The census is small and the shape of it is not.

Across the 56 pages there are 3,323 class attributes, carrying 5,253 class tokens between them, and 139 distinct class names. One class attribute in three carries more than a single name: 1,011 of the 3,323 hold two or more.

Here is the part I did not expect. A class name is either private to one page or shared by a whole fleet of pages. There is nothing in between.

• 53 names appear on exactly 1 page.
• 24 names appear on exactly 22 pages.
• 49 names appear on exactly 23 pages.
• 11 names appear on exactly 33 pages.
• 2 names appear on all 56.

Not one class name appears on exactly two pages. That is a gap in the middle of the distribution, and it is not a rounding artefact of how I counted: it is the shape of the fleet. Our pages are built from templates, so a name is either written for one page or shared by a group, and a shared pair would mean two pages agreeing on something the other 54 do not. We have none.

The 33 pages that boot the app

The 33 pages that ship the app bundle carry 11 class names between them, and they are the crash card and the startup shell:

fallback
fallback--shell
fallback__card
fallback__mark
fallback__title
fallback__copy
fallback__reload
fallback__help
tp-startup-shell__content
tp-startup-shell__pulse
tp-startup-shell__sam

Thirty-one of those 33 pages carry 12 class attributes each and 13 class tokens, so exactly one of them holds two names. /plans carries 13 attributes. The app pages are close to class-free in served HTML, and that is not an oversight: the interface is built by JavaScript after the document arrives, so the markup that ships is the shell, and the shell is small.

The 23 pages that do not

The guide fleet is the other half: the 22 pages under /guides/ plus the index at /guides. It uses 77 names that begin with gd-, plus the bare gd wrapper, which is on all 23. Twenty-four names are shared by the 22 guide pages, and the index adds five of its own:

gd-apps--cards
gd-fold--index
gd-listhead__title
gd-meta
gd-note

. The index is the busiest page in the fleet by attribute count, 335 of them, though each one usually holds a single name.

The 22 guide pages are not all the same size. Seventeen carry 113 class attributes, four carry 100 and one carries 101, and the reason is legible in the markup: those five shorter pages (citation-formatter, movie-tracker, newsflow, subtitle-workbench and teleprompter) list one related app where the other seventeen list two, and one app card is 13 class attributes.

The page that does not match the others

/terms is the outlier, and it is not a small one. It carries 181 class attributes and 1,130 class tokens, which is 21.5% of all the class tokens in the fleet on one page out of 56. It also carries 48 utility-style names that appear nowhere else on the site: text-ink-1 (83 times on its own), ease-settle, rounded-tight, font-medium, underline, sr-only, scroll-mt-20 and forty-one more, among them five with square-bracket values in them, such as text-[length:inherit] and grid-cols-[2.25rem_minmax(0,1fr)].

So the terms page is styled by a different system from the rest of the site: the guides use a component vocabulary with element and modifier suffixes, and the terms page uses a utility vocabulary where each name is one small instruction. Both are on the same server, on the same build, in the same fleet.

The naming shapes back this up. Of the 139 names, 37 use a double underscore for an element, 25 use a double dash for a modifier, and 5 carry square-bracket values. All 5 of those bracket names are on /terms.

Counting the whole vocabulary by family: 77 guide names, 1 bare gd wrapper, 3 startup-shell names, 8 fallback names, 2 site-wide names and 48 utility names. That is 139.

Two names on every page

Only two names reach all 56 pages. One is dark, on the html element next to data-theme="dark" and data-theme-preset="graphite". The other is __cf_email__, which is Cloudflare's own email-protection span rather than ours: 74 tokens across all 56 pages, with 54 pages carrying it once, /plans carrying it twice and /terms eighteen times, once for every address Cloudflare rewrote on that page.

What I did not do

One build, one day, 8 November 2026, plain HTTPS from one network, signed out, one request per URL, and no JavaScript at all. So this is the HTML before the app runs, not what a browser paints. A class name is counted once per attribute it appears in, and the counts are of served markup only. The guide fleet is the 22 pages under /guides/ plus the index; the other 33 URLs in the sitemap are the app fleet. I make no claim about which classes survive a build, and none about how any browser applies them.

If you want to see the pages this is describing, the home page is at https://app.onepassapps.com?utm_source=devto&utm_medium=post&utm_campaign=class-layer&utm_content=home-link and the guides are at https://app.onepassapps.com/guides?utm_source=devto&utm_medium=post&utm_campaign=class-layer&utm_content=guides-link