No CSS Club
nocss.club
nocss.club
I dunno guys, I kind of like CSS.
Your lines of text on the screen should never be much wider than your hand at arm's length, ever, for any reason. Not even if it's an example of a one-liner in bash - wrap that line to make it easier to read.
Don't believe me? Angrily click <reply> on this post to tell me what an idiot I am, start to type your reply, and then hold your hand up palm out at arm's length to the screen so it covers up the text box you're typing in.
How big is it?
Told you so, didn't I? And it looks *perfect*.
This is the one case (that I can think of right now) where I don't agree.
As part of a larger script, sure, wrap the line so it's not way longer than all the other lines.
But a single shell command in isolation is always easier to read as a single line, if sufficient horizontal space is available.
This also usually helps in documentation.
Then, later on, often weeks later, I use command history to scroll back through everything I've typed until I find something that looks vaguely like what I originally typed, or I don't find it and figure it all out from scratch again, having totally forgotten about the bash script I wrote.
I suspect this workflow is surprisingly common.
I have a stylebot rule for stackoverflow that makes the default container 150% wider so I can read teh codes without h-scroll.
Also, I don’t always use HN on desktop.
But when I do, that textbox is too narrow for almost every code-related post. And too short in general.
Thankfully there is a sizer handle.
No thanks. Ridiculously short lines are harder to read.
Edit: I also resize the reply text box because it's almost too small to be usable.
"Ridiculously" short is another matter, but by my count, "significantly wider than your hand at arm's length" means well above 20 words per line.
I wouldn't keep a browser at all, I would just read them in Emacs all the time or from the command line. I would also be able to use my preferred visual theme with the entire web, and not have to look at some really nasty web designs from time to time, albeit I do agree that as a game dev (long time ago) I do like when I see pretty graphic design.
However, I am not sure how my bank will do and all the other web services in just plain text. Perhaps it is possible, perhaps not?
e.g. From https://www.pilledtexts.com/files/nick-land/february.txt
> “This can’t go on,†he said. “It’s too blatantly wrong. It’s insolence.â€
What more do you want? :D
No thanks, I'll take fullwidth content anytime over that....
Otherwise, the other option is to scale up thr text size, but that takes up precious vertical space on wide screens, and doesn't increase information density.
Obviously, text columns may only make sense it certain scenarios - a minimum amount of text might be required to justify a second column as opposed to just limiting the width of the first column.
Links.
https://securityforeveryone.com/blog/unknown-danger-clicking...
Just like writing a program put all relevant information inline in the txt.
I submitted it to the site a few minutes ago.
> I'll eagerly await the ASCII-only "You Don't Need Unicode"
(Yes, I know technically codepage isn't ASCII. I guess you could use box drawing extension to draw foreign language character if you wanted. Or maybe just SVG of the text)
Content-Type: text/plain; charset=utf-8
https://blog.openreplay.com/incorporating-css-to-a-page-via-... (no time to check, only works in Firefox, but that's one idea on how to trick the system)
Upd: checked and it works (e. g. add `Link: <https://unpkg.com/chota@latest>;rel=stylesheet;media=all`)
For an English language site, ASCII is enough.
just the other day i logged into a MUD which presented me with an interactive world with a graphical map in color. the same MUD has a built-in http server so it can display the same information with the interactive and feature rich, yet compact telnet interface, as well as the round-trip heavy and verbose http/html interface.
ftp://192.168.3.79/bestmo~4.txt
Of course, none of you have accounts, so please go ahead and postal-mail me for one, I'll get back to you in 6-8 weeks.
NO HTTP CLUB
PO Box 1147
Chungus AL 35035
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I'm sorry if I got carried away, I wasn't replying to you in this last part :) For the record, I would also make this exception, though it would be neat to be able to select those without even the meta viewport tag.
I discuss this in more detail here: https://news.ycombinator.com/item?id=36112889
A CSS reset overrides the user-agent stylesheet and the rest of the CSS determines the final style. This is the best practice. If you don't like web pages, then don't use them.
The final form of this club would be to settle on their favorite serialization format bit banged into their nervous system so they can be one with the matrix. /s
When every site uses it's own reset there's no consistency while in the same browser, which is way more common for most users that don't have a separate browser for every site they visit.
<meta name="color-scheme" content="light dark">
worth noting, browsers also treat the default dark mode background colors differently: chrome uses black, safari uses dark gray, and firefox uses dark navy
My page uses a minimalistic CSS and only changes the colors for syntax highlighting -- which is now slightly broken in the dark mode but probably still an improvement over the white background for those people who want the dark mode :)
might be of use:
@supports (color-scheme: dark light) {
@media screen and (prefers-color-scheme: dark) {
code { ... }
}
}In addition, content is more than just text - style, design, and layout are information, too.
Why, though? If the website has no styling (we can exclude sites that use <font> and friends), the whole premise of HTML from very early on was that it only specifies content and the user agent controls formatting.
Shouldn't this be the default though? Why is the default bad?
Unless your audience is entirely the blind and partially sighted, visual identity is pretty important
I opened a couple of text heavy ones and they all had different font choices and minor variations on page layout. Most of them had elaborate and unique chapter headings.
Book typesetting is a fascinating subject, I would recommend anyone who works with websites to look into the way typography influences the reader's subconscious. (Maybe we'd have less Helvetica spaffed all over the internet!)
To me, paradoxically, it reached a point where my subconscious associates light or poor typography with serious material, and pretty web pages with empty ad-ridden content:
Serious vibe: http://fmwww.bc.edu/repec/bocode/t/transint.html
Intermediate vibe: https://drewdevault.com/2023/06/30/Social-and-parasocial-med...
Empty content vibe: https://www.theverge.com/2023/7/12/23792382/google-notebookl...
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}- https://blog.pastly.net/posts/2016-09-04-how-css-alone-can-h... (related: https://news.ycombinator.com/item?id=10833629)
- https://nakedsecurity.sophos.com/2019/05/09/css-tracking-tri...
You might want this to prevent the text size from changing when you rotate to landscape on mobile:
html {
-webkit-text-size-adjust: none;
text-size-adjust: none;
-moz-text-size-adjust: none;
}https://chromium.googlesource.com/chromium/src/third_party/+...
https://github.com/WebKit/WebKit/blob/main/Source/WebCore/cs...
https://searchfox.org/mozilla-central/source/layout/style/re...
The point is "your user agent should make this readable by default, somehow". If it chooses to do so by way of a CSS style sheet, that's the user agent's prerogative, but the standard doesn't care how it goes about rendering a style-free page.
For example was looking at http://www.steephill.tv/ yesterday for cycling news (recently shut down sadly)
Yes, but only if we exclude those like the one you linked that require horizontal scrolling because of their <table>-based layout.
I felt guilty at adding "<meta name="viewport" content="width=device-width, initial-scale=1.0">" so my no-CSS site wouldn't look on mobile like a website for ants.
document.head.insertAdjacentHTML(
'beforeend',
'<style>* { all: unset }</style>')
Maybe there should be an optional MIME Content-Type: text/plainhtml header target.
I don't know the full history and I discovered it in the early 2010s, but it's been around since at least 1996 if the page content is to be trusted. I use a script to scrape the site and filter by artists I care about.
Just because it's ugly doesn't mean he didn't use CSS!
I suppose that means "you're trying to cover up your lack of interesting information"?
This is the thing, right? Perhaps we could shoe-horn this in behind the ADA or something. Require every website to provide a "pocket" or whatever mode.
<font face="helvetica">For me it shows up as sans serif by default.
They must really hate books, comics, magazines, ...
Sure but what I quoted just said "style" - nothing about "bad style", "user-hostile style", etc. (Javascript would be out of scope since it's not CSS)
And that's before we consider that "style" can include "the style of writing" - should everything be written in the plainest, driest prose?
they are readable and … load. so, congratulations?
If your clothes have any extra color on it that means you are frivolous and should be ashamed.
also known as the default font size in browsers, don't you dare override the user's preferred font size for body copy, scale everything else in units of rem instead.
What was a regular border, eventually becomes a half-circle.
I did mean font sizes though. :)
In practice it doesn't really mean much outside of blog-like text so when doing layouts it's more of just a standard everyone agrees on using everywhere because it's easier to stick to one for consistencies sake and it does the job. I don't think many frontend devs ever test zooming text using a browser anyway, their main concern is variations in screen sizes, basically device variation not manually zooming text. But I get the arguments to limit it to text.
I've never seen a CSS framework that's good. (Unless you count https://simplecss.org/, but that's of very narrow usefulness.) They're all made by the kinds of people who don't understand web technologies, and seek to hide them behind a layer of abstraction so they don't have to think about them any more. Unfortunately for them, there's a reason the web's how it is. Some of it's backwards-compatibility, but most of it is that a large group of very clever people failed to find a way to make it any simpler without breaking something important; and so, the framework people tend to break important things.
If you find yourself reaching for something like Tailwind or Bootstrap, just use inline style attributes. It's easier for everyone involved.
Wrt Tailwind I still have not used it enough to decide whether it is good™ but it is not that different from writing inline styles.
Apart from optional plugins it is more like a CSS preprocessor than a framework (every class expands to one or few CSS declaration)
The most frameworky features it has is that it predefines CSS variables to allow further customization
A crude "not that different from writing inline styles" classy framework just makes it harder to refactor your CSS in future, because it's all tucked away under incomprehensibly-named CSS classes, and there are otherwise-useless <div>s all through the HTML.
For handwritten html I believe that tailwind has significant downsides (unless you abuse @apply), but that the case I focus on.
I should have mentioned that I believe tailwind to be applicable only if you have some strong templating support
> Use <style scoped='scoped'> in the <body>
This seems to have been removed from everywhere since at least 2017
I’d bet you that 98+% of users don’t even know you can change the browser font size. For that overwhelming majority of users the size reported by their preferences and their actual preferences do not necessarily align. This is not a defence of setting smaller-than-16px font sizes, but it is a defence of setting larger sizes if testing shows it improves user experience.
See: HN, that sets a "10pt" font size, otherwise known as 13px.
At least they have a reason and it fits for me. :)
body {
font-size: larger;
}
.comment, .default, .comhead {
font-size: 14px;
}
.subtext, .pagetop {
font-size: 13px;
}
.title {
font-size: 16px;
}
The users that need that to be able to read (e.g. vision problems) definitely do know that. It's about accessibility
https://community.qbix.com/t/qbix-websites-loading-quickly/2...
I don't even say it with the typical puritan TV USA mindset but just the, give me the facts, not the show. Yelling won't make you right, just 14. Specially when it's clearly not a visceral reaction but a thought out post.
It's like comedy that thinks saying fuck or shit is funny when that's basically the lowest bar of humor. Say it, but style matters, the word in itself is not funny (unless you're a kid and afraid of someone telling you off, again: boldness).
You're supposed to feel conflicted between the obnoxious tone and the rational message. The writing makes fun of know-it-alls while also making a well reasoned argument.
maddox.xmission.com
Of course it's easy to rant and monologue. Dozens of TV presenters do it but sometimes it's very easy to find fault in their subjectively humorous generalizations.
http://maddox.xmission.com/c.cgi?u=bob_dylan_is_a_podcaster
Blowing in the wind, the first song that comes to mind, doesn't fit this at all.
A quick Spotify search through the most popular songs and I can't find any in 10-15 that fits that example soundbite he used, to extrapolate this "emperor's got no clothes" argument on bob Dylan.
I'm not particularly a fan of Dylan except a song here and there I like (looking at the list), but it just shows the style over substance and strength of argument.
To this, someone will call "don't be such a buzzkill, it's just a joke" and that's fine but then you've left the land of making valid points and into the self congratulatory "ironic" content.
I didn't miss the point, it seems, but you did miss mine.
Now it was about using insults instead of proper arguments and pretending the mere use was funny. Which isn't.
Also, it's funny how you "insult" in generic third person because if you insult me directly you might get banned. Hey, feel free to insult me directly. I won't care. You just won't necessarily have a good argument because of it and you might also get your comment deleted, but let's see if you're as "brave" to argue with the would be censors then.
Finding an insult funny just because it's an insult is definitely childish, as I've said before and you haven't tried to address, it relates to rebelry against some authority, which just isn't there in this case.
I won't be offended by the insult, but using in the way the website in question does is just superfluous content and can effectively serve as an mechanism to hide less than solid points.
How about you actually try?
Running away with a false accusation and a dishonest "good wish" is just sad.
Would you call this style?
Yeah, but if they had done it your way neither you nor anyone else would know about it.
Looks to me like they put a lot of thought into the marketing of that thought out post
I'd be happy with a No Ads And No 3rd Party Trackers, Analytics or Other Shit Club.
My phone is always on low brightness at night, but for some reason my monitor is always at 100% without question, which means light theme during the day (to match paper/pencil in front of me) and dark theme at night because it is otherwise too much light. Then one day, I tried a light theme at night at 50% monitor brightness and my eyes relaxed immediately. I realized that I have been squinting constantly to brace against the maximum brightness.
The usual advice is to instead increase ambient/room light but I have the room light set perfectly for writing and reading on paper.
Yet I have only ever heard of people complaining about it recently, when GUI designed started debasing itself by making everything web-based, and zoomers started demanding dark mode everywhere. Before that, and in my lifetime of computer nerditry dating back to the mid-90s (on self-luminescent CRTs!), I have never heard of people intentionally turning down the brightness or complaining about contrast of anything, whether its a tube TV or computer screen.
Which makes this whole preference for low-contrast incredibly suspicious. Like it was another one of those learned 'ailments' that spread around society like a shitty meme.
If I zoom in to increase the font size and make it more readable, the text doesn't reflow so it forces me to drag left and right to read the whole line.
There used to be a time where you could have actual adaptive reflowing zoomable text content, but web designers and browser developers conspired to break it and make it worse.
This makes sense to me. Pinch to zoom is a specific affordance which means “make the line segment between my fingers be this long”. It wouldn’t make sense with reflow.
But if you change the font size setting on your browser you will get exactly what you want. Odd how zoom and font size are not linked the same as on desktop - at least for me on Firefox mobile.
There used to be a Firefox extension to force text reflow on any website, but recent versions with the new extension API don't allow installing it.
I don't know about you but I typically have more than one window open. Information density is valuable to me, even on a large screen.
(It's one of the more glaring flaws of the Reddit redesign...)
Is there a club for people who eschew CSS but are comfy with JS?
No CSS as well? No thanks, I want my sites to look somewhat modern and aesthetically pleasing by modern standards.
I have now webgpu running in my browser out of the box but the same shitty fonts.
By the time web components started being used, React went out of fashion.
Don't let me ramble about how much time I spent on rounded corners back in the days.
Me too! I like to minimise it to 0 bytes.