The Least Amount of CSS for a Decent Looking Site (2023)

If I load CNN.com right now and scroll to the bottom, I receive 26.9 MB over the wire.

Of that, 52.2 kB are CSS.

5,547 kB are JS.

CSS bloat is not as big a deal.

Or to the right. (That might be even worse though, I don't know.)

i have never hit this issue bc you need a massive amount of text to fill the whole screen. I have some natural breaks and subheaders. Each section is wrapped in its own columns

That used to be a solved problem, before every website started to include multiple oversized "dickbars" floating over the real content and taking up 15+% of the available vertical space. Pressing the "Page Down" button on a keyboard would scroll down by exactly one screenfull. We also used to have scrollbars that on most operating systems would let you scroll down by exactly one screenfull with a single click.

I seriously doubt there are any people who resize their browser window every time they switch tabs.

It's very ignorant to believe 100% of users are happy with having to resize their browsers just to get a pleasant rendering of the site.

If you really want to please everybody here, introduce an option that is remembered in a cookie (reading preference, trivial to implement). There is no one size fit all here.

It should also be almost trivial to create a browser extension for this, if it doesn't even exist yet.

(2) user stylesheets (permanent solution, but you could have multiple and use an extension to enable disable different widths)

(3) responsive mode (in dev tools, most flexible, but most cumbersome to reach)

(4) Other extensions

There are easy ways to resize the viewport, so the premise is false.

This is beautified if somebody wants to see how it is done.

  function() {
    var myBody = document.getElementsByTagName('body')[0];
    var myBodyWidth = myBody.style.width;
    if (!myBodyWidth || myBodyWidth === 'auto' || myBodyWidth === 'inherit') {
        myBody.style.width = '1200px';
        myBody.style.marginLeft = 'auto';
        myBody.style.marginRight = 'auto';
        myBody.style.position = 'relative';
        myBody.style.cssFloat = 'none';
    } else {
        myBody.style.width = 'auto';
        myBody.style.position = 'static';
    }
  }

When you say you sometimes enlarge the font, how many words per line do you aim for or end up with, roughly? You’re describing behaviour that aims to render text more readable, so obviously it isn’t simply a case of “I like text content to be as wide as possible”.

https://github.com/zen-browser/desktop/issues/1126 is the issue, closed as they won't fix it (thus my snark).

> In the last decade however the trend appears to have reversed: it is now fashionable be to make the scrollbar as difficult to click as possible, by offsetting it, making it narrower, or hiding it altogether.

Afaik Ubuntu jumpstarted it with their minified GTK scrollbar, used in their Unity DE. But that thing was actually smart: It slimmed down visually, but as soon as the mouse entered its region you got the scrollbar handle at the mouse pointer's position. So it made manipulating the scrollbar even easier than a fullsized scrollbar (for at least some usage) while looking nicer. Ofc that usability aspect is something the CSS reskins and other adaptations promptly and completely forgot.

Did people lose the old art, or have you never managed to grasp the "new" one?

E.g., there's no way for you to easily send me the desktop state of the open window sizes and dimensions you have in mind. And even then, I'd have to hack the window decorations and fonts myself. I'm back to meth-addled chicken pecking!

It’s still there. Window > Zoom from the menu bar, or ⌥ + click the green window button.

I much more sympathize with them tbh. Let browser makers figure out how to give the easy to use controls to users. Let them add some override for the number of columns and columns max width and gap and so on. Or let extensions handle that. Whatever. But don't rely on each site prescribing how I have to read it.

See above...

> But don't try to force your preference onto everyone please.

Limiting column width is already the predominantly established pattern, even all the way back to print, so this is nonsensical. Unless I interpret it as the cheap, childish clapback that it is. Which I have to say, really befits the take.

In that regard HN is excellent.

If you're a coder, you understand this extremely well, implicitly: You set up your IDE fonts and colors in a way that helps you see through the code. You don't want to be looking at letter forms when you're trying to grok something.

This is also the job of designers: Creating typefaces and layouts so that people see through the text, to the meaning.

Leaving your website in the system standard font basically screams "I do not give a shit about what is written here" and also possibly "I run a quacky conspiracy website" and me and most people will scroll past your writing as quickly as possible.

But there is no font that has no connotation. Every font has subconscious meanings to readers. Knowing what these are is important. Times New Roman screams, "I'm still using Windows 98". Whereas Comic Sans screams, "I work in a shitty real estate office". Simple examples. But the art is much deeper than that, because Optima Sans and Univers read very differently to the general public in ways that I could spend another few pages explaining. Every choice you make with type implies something that sits as a layer on top of the text that's written in that typography. But if you do your job well, you make the artisanship transparent, and allow the content to shine.

This is why typography is a bit of a black art, and why it's powerful. It subtly influences people in ways they don't notice and don't understand, while they're absorbing written information. Dig:

https://en.wikipedia.org/wiki/Antiqua%E2%80%93Fraktur_disput...