9 ms·
The least amount of CSS for a decent looking site (2023)
- Jabrov 1y agoMore sites should be like this
- hsbauauvhabzb 1y agoWhy? There’s a huge amount of JavaScript bloat, but I’ve never really had an issue with css on any site. If anything, I wish more sites supported a dark mode.
- librasteve 1y agoCSS bloat is there also, perhaps not as big a deal. I think that complexity is the main enemy (both JS and CSS and React and npm …) or over on the WordPress plugin morass. I like that the OP is aiming for a simpler world, kind of like the HTMX and Pico CSS ideas that I currently prefer.
- lelandfe 1y ago> perhaps not as big a deal 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.
- typpilol 1y agoTailwind v4 tree shakes too so even thats not technically bloated anymore
- o11c 1y agoTree-shaking really only works for languages that are designed to be tree-shakable, which no web language is.
- _heimdall 1y agoTree shaking and bloat are different concerns. And, technically, is tailwind tree shaking? I thought they only built styles that the compiler could find being used rather than removing styles the compiler couldn't find being used.
- typpilol 1y agoTailwind v4 tree shakes automatically on imports is what I understand. I don't think it's identical to package tree shaking but the outcome is the same. I don't think it was doing it before v4, or if it was, not as efficiently
- zelphirkalt 1y agoTree shaking is actually a sign of bloat. It is a tool on top of a bloated mess, to fix that mess. It would be better not to make a mess in the first place.
- sublinear 1y agoI'm curious how much of that JS is functional and how much is adware. The adware is typically injected onto the page by 3rd parties so it's nothing the web devs can do anything about.
- kmstout 1y ago> how much of that JS is functional Lots of sites become more functional with JS disabled.
- deleted 1y ago[deleted]
- zelphirkalt 1y agoIt is the web devs' responsibility to say no to bs. However, very few do, and some even welcome the bloat as a job guarantee.
- sublinear 1y agoThis is not how the web works. That's like asking any other software dev to "say no" to letting other programs run concurrent with their own. It's just not within scope and any attempts to have your program behave this way will be impossible to maintain. If you're a business that wants to inject ads without anyone getting in the way, all you have to do is host the pages somewhere the dev can't touch. This would likely be a CDN or similar for a multitude of other good reasons. So the content security policy is now only configurable by the admin who really doesn't give a shit and doesn't even know what's being hosted on there.
- efreak 1y agoI'm more curious how much of that js is intended to load more js that has been blocked (by the browser, adblocker, hosts file/DNS, etc). CNN specifically isn't a site I visit much, but most news sites load a ton of third-party stuff (being on mobile makes it hard to check)
- SoftTalker 1y agoUse lite.cnn.com instead.
- emseetech 1y ago52K of CSS should be an opportunity for optimization but you're right, we're so far gone on javascript we should really focus on the mountains before the molehills.
- cratermoon 1y agoBut even a small bit of css can slow down page rendering. https://www.granola.ai/blog/dont-animate-height https://www.granola.ai/blog/dont-animate-height
- hsbauauvhabzb 1y agoThat article refers to literally one line of css. Cutting down the volume of css does not have value, cutting down on animations and other expensive directives does.
- zelphirkalt 1y agoIf a small amount of CSS can, then so can a similarly small amount of JS, since JS can set styles.
- hsbauauvhabzb 1y agoI think that’s moot. Everyone agrees there’s a pretty big bloat problem in JS, not so much because of single costly lines (though, they exist) and more the entire ecosystem of includes
- phantomathkg 1y agoWhy not? Code is liability. Less code to maintain also enhance engineer's ability to reason the code and implement better website.
- hsbauauvhabzb 1y agoCode is a liability lends well to tech debt, wasting time refactoring css to reduce the size by tens of kilobytes has no real world return on investment in most cases.
- edoceo 1y agoStill need a lot of the reset stuff - to at least get a baseline consistency. If you only target modern (5 year window) that one popular reset can be trimmed.
- moron4hire 1y agoResets are overrated. You don't really need all that much consistency between platforms when you're talking about a minimal setup for something like a personal blog like the OP is doing. Resetting for consistency is mostly just designer-brain not being able to accept that things can look slightly different in different places and be completely fine.
- mcny 1y agoYes! That's the whole "when in Rome" idea but I've never gotten any team at $work to accept that. A drop down menu on an iPhone SE is supposed to look different than on an ultra wide monitor on a desktop!
- nine_k 1y agoIt's not about consistency, it's about basic readability. On different platforms / browsers things will differ, but remain readable. Not necessarily aesthetically perfect, but more usable than with defaults from 1994.
- joshuat 1y agoreset.css
- armchairhacker 1y ago> ...it is a best practice to allow users to manually toggle the color-scheme as well. > Some people prefer a dark system theme, but light website themes, and vice-versa. Is this common? Why don't those people configure their browser to use a light theme? Or if they prefer different websites to be different themes, use a browser plugin? ...a more general issue is that every website has to re-implement many things. It's a small issue, but it discourages newcomers, and the redundancy on every website adds up. Ideally, a site should look decent with no CSS, but in order to support legacy sites (a good thing) the default styles are the legacy ones (a bad thing); keeping what even back then would probably be considered "bugs" (except, like how crimes become legal, they managed to become "features" by being discovered too late), such as large images causing horizontal overflow. Honestly, is there a single good reason to make the default font Times New Roman 16px?
- justmedep 1y agoBrowser extension that do that require full access to the contents of the website. That’s why some people decide not to use those extension.
- kennywinker 1y agoIt’s been a while since i mucked around with browser extensions, but i assume they don’t have network access by default. Surely there is an extension with page read access and without network access, no? Edit: this looks pretty harmless https://github.com/the-code-rider/dark-theme-extension/blob/master/manifest.json https://github.com/the-code-rider/dark-theme-extension/blob/...
- ezfe 1y agoBrowser extensions that modify webpages are just javascript code injected in the page; They can definitely access the internet.
- kennywinker 1y ago
- bix6 1y agohttps://meyerweb.com/eric/tools/css/reset/ https://meyerweb.com/eric/tools/css/reset/ Cash money
- roblh 1y agoI’ve seen this one a few times and something about it doesn’t agree with my eye. It’s somehow in the weird awkward zone of not old enough to truly feel simple and functional, but not new enough to look modern minimal/clean. Might just be the font also, but I don’t find it very easy to read. Could just be me though.
- pbhjpbhj 1y agoI mean, it's a reset, not a complete style. You're supposed to apply your styles on top (well, underneath, as styles cascade; but hopefully you know what i meant).
- slow_typist 1y agoEric Meyer, the CSS guru of all times I wouldn’t have made any sense of the CSS box model without him back in 2002. https://meyerweb.com/eric/books/ https://meyerweb.com/eric/books/
- AceJohnny2 1y agoIronically, that page does not render well on Chrome/Windows, at ~1920x2160 (that's half a 27" 3840x2160 monitor), with an excessive empty margin on the left pushing the book list to the right, causing a horizontal scrollbar, which when scrolled to its rightmost causes the right side of the website to scroll and leave an awkward empty space. I guess this says something about the evolution of web standards.
- Theodores 1y agoCSS reset stylesheets are just the first step towards unmaintainable 'add to' stylesheets, laced with the word 'important' everywhere. I think it is best to take the Kevin Powell approach, as per the article, where you will be leaning in on browser defaults. Clearly you have to do your cross-browser and cross-platform testing, however, after almost two decades of everything coming with a CSS reset lurking in the stylesheets somewhere and mountains of cruft on top (remember frameworks), it is so liberating to get rid of the lot and to use the modern CSS tools such as CSS Grid and CSS variables. Nowadays CSS is my favourite 'LEGO set' and I love the creative opportunities. This contrasts with the olden days where I hated the hacks based on hacks that was CSS. I have gone from practically drowning despite wearing armbands to being able to effortlessly glide through the water. CSS reset is one of those 'armbands' and it takes courage to go without such things. Same goes for those awful CSS pre-processor things.
- cratermoon 1y ago58 bytes of CSS to look great nearly everywhere https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41 https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad...
- swyx 1y ago100 bytes: https://www.swyx.io/css-100-bytes https://www.swyx.io/css-100-bytes (i collect a lot of these design advice. more: https://github.com/swyxio/spark-joy/ https://github.com/swyxio/spark-joy/)
- noduerme 1y agoLike, this is a clever enough way to play golf and find an average that works between major browsers and come out with something that should generally be legible. "Look great" is a bit of hyperbole, because it'll always look like shit. Legible shit, probably.
- kmoser 1y ago> To make the website more readable, we’ll limit the content width Please don't do this. Despite what usability studies say, I prefer wide content over scrolling every few seconds and having to make my eyes follow the moving text. I, the user, can already control the content width by resizing my browser, thank you very much.
- geokon 1y agoyou can also just display text with multicolumn. solves the paragraph width "usability" and uses the full screen space not sure why its never used.. I also really dislike the current trend of giant white sidebars
- hiAndrewQuinn 1y agoIt's a little annoying to change from 3 to 2 to 1 columns when someone does resize, though. I just let people resize the window itself on my blog if they want to compress the text down.
- shdon 1y agoBecause it would make scrolling more frequent? For multicolumn text to reduce scrolling, the column height would have to match the available viewport height. And if your text exceeds what can fit in multiple columns on a single screenful, scrolling also becomes awkward, because you'd have to scroll exactly to the next screenful to have any consistency. Multiple text columns only make sense on extremely restricted layouts, or where the volume are entirely independent instead of a single flowing piece of text, or where there is still a direct horizontal relationship (like annotations or translations beside the main text).
- wtallis 1y ago> And if your text exceeds what can fit in multiple columns on a single screenful, scrolling also becomes awkward, because you'd have to scroll exactly to the next screenful to have any consistency. 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.
- crabmusket 1y agoObligatory mention of https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/ and http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/
- bschwindHN 1y agoYep, this is my standard.
- travisgriggs 1y ago>> ...on an iMac or a motherfucking Tamagotchi... LOL. Interesting comparison in the context of the top rated discussion about setting width. I'm with @kmoser. The original actually looks better--to me--and I like that I can manage it.
- BaudouinVH 1y agohttps://evenbettermotherfucking.website/ https://evenbettermotherfucking.website/
- crabmusket 1y agohttps://thebestmotherfucking.website https://thebestmotherfucking.website
- vjk800 1y agoI think the first one is better. What's the purpose of having all the text crammed in a thin column in the middle of the page anyway? If I'm reading the page on a wide screen, let me use all of the motherfucking screen.
- fragmede 1y agoEyeball muscle speed limits how fast you can read or, well; at least for me). My eyes simply can't go left and right as fast as I can read, plus keeping track of which line I'm on is extra overhead. YMMV.
- 1y ago
- deadbabe 1y agoThe least amount can be zero.
- webprofusion 1y agoOk but what happened after that. It's been years with no word.
- bigtones 1y agoNote this website itself uses way more CSS than what it is proposing in the article. I count at least 300 lines all up. Still a good baseline though.
- thakoppno 1y agoThanks for doing the detective work for your friends on mobile. This fact severely diminishes the message of this medium. I’ll check for myself later; but until then, I will hope it leverages the techniques it describes.
- paulhebert 1y agoThe article emphasizes multiple times this is a baseline example to be built upon
- mnls 1y agoThe least amount of CSS for a decent looking site is prefers-color-scheme: dark. You hear this, HN?
- majkinetor 1y agoJust use dark reader, you can't educate the world.
- mnw21cam 1y agoPlease don't do that. I should be the one to decide whether I read in dark or light mode. If you want dark mode, change your browser defaults. Leave us normal people alone.
- mnls 1y agoSure but right now we can't choose right? And no, I don't want to use any extension for a feature that simple.
- fami-com 1y agoIf a website forces a dark theme on me, I just close it. I hate dark themes because they make all text an unreadable blurry mess for me.
- deleted 1y ago[deleted]
- mrb 1y agofont-family: System UI; That's incorrect. It should be: font-family: system-ui; Author has it right in some CSS examples, but not the first one.
- andai 1y agoAlso, if the name had been two words, it would need to be quoted, right? e.g. this wouldn't work either? font-family: Times New Roman; Edit: Well this and just "times" does work fine, which makes me wonder if it's been special cased due to being an older font, or if the matching is very permissive.
- lblume 1y agoThe matching is very permissive, and the example just works: https://codepen.io/leo848blume/pen/RNrppdj https://codepen.io/leo848blume/pen/RNrppdj
- deleted 1y ago[deleted]
- bmacho 1y agoFor me it defaults to Times New Roman when it doesn't understand the font, so to check if it indeed works I had to change the default font in my browser
- someothherguyy 1y agohttps://drafts.csswg.org/css-fonts/#family-name-syntax https://drafts.csswg.org/css-fonts/#family-name-syntax
- noduerme 1y agoyknow what's also cool is specifying the font you want, so your website looks the way you want it to. This is generally referred to as "design" and, while considered an antipattern among people who entirely spurn aesthetics, it has something like a 3000 year history of getting people to engage with your content, assuming you have some.
- smolder 1y agoUnfortunately efficient CSS is a lost cause. I love doing this kind of work and making single page efficient product. Unfortunately no one cares how you spend your bytes because it's a battle between sociopaths and everyone tired of their shit.
- smolder 1y agoI could make cool websites for the losers who rob everyone around them but the type of people who make a business out of online behavior are actually terrible greedy folks.
- cookiengineer 1y agoYou are speaking from my soul, man.
- aborsy 1y agoWhat are good static site generators (SSGs) to create a simple minimalist academic-like website? It seems Astro or Hugo (potentially with Tailwind to customize CSS) are good options. Astro felt more complex than needed, on the other hand, writing html/css manually doesn’t work well either (predefined layouts and easy to use style customization options would be needed). I couldn’t find a suitable Astro theme either (most themes seem to be made for companies, or needlessly fancy, and a few for individual blogs). In the process of figuring this out, I was surprised how complicated designing a website has become. There are so many frameworks, components, integrations and significant dependancies that I wondered how web developers keep up in this ecosystem.
- xxmarkuski 1y agoMaybe look into Eleventy [0] or Zola [1]. Both are relatively recent developments and have a skilled and forward thinking userbase. [0] https://11ty.dev/ https://11ty.dev/ [1] https://getzola.org/ https://getzola.org/
- smolder 1y agoThis line of conversation is distracting people from the embarrassing state of the WWW. If anything good is left outside the temples of Facebook, etc, it's not much, and I'm embarrassed.
- zelphirkalt 1y agoThere are many threads here on HN about that as well. But this thread here is about CSS styling.
- amoshebb 1y agoNot that you need more choices, but franklin.jl hit my sweet spot for “handles math and code inline well, otherwise is clean and gets out of my way”
- sixtyj 1y agoIt is a natural entropy of web system. We could not hope that everything would remain simple. Thanks for all the open standards and frameworks that we don't have to license. And yes, it is a paralysis of choice.
- vjk800 1y agoI didn't even read the article, but the answer is clearly zero.
- paulddraper 1y agoBrowsers default to serif.
- dijit 1y agoif people hate it that much then maybe we should consider changing the default?
- rplnt 1y agoWhich is an option browsers give you.
- 867-5309 1y ago"we" the applooglezilla mediators..
- paulddraper 1y agoAgreed.
- pinkmuffinere 1y agoWould this seriously stop you from reading something? How on earth did you survive your college textbooks and lecture slides?
- tuetuopay 1y agoSerif is meant to be printed, on paper, with the ridiculous DPI of printers. These fonts have not been designed for pixelated displays. Yes, it's better on Retina / HiDPI displays (I even enjoy some serif fonts on those), but those have to be designed with pixels in mind. But they usually are atrocious on "classic" pixel densities. And tangent: the print industry has a much wider typeface selection than "just" Times New Roman, which is rather rare in my personal experience (sample size of one, though).
- rossant 1y agoI like this. But a screenshot after each step would be nice.
- shahzaibmushtaq 1y agoImprove the readability and bring clarity, then work on modernity.
- stanac 1y agoAn old article, in some regions still relevant, on why not to use system ui font family. https://infinnie.github.io/blog/2017/systemui.html https://infinnie.github.io/blog/2017/systemui.html
- IshKebab 1y agoInteresting, though I'm not sure I want to take font advice from a website which such an awful st ligature!
- rbits 1y agoUnfortunate, because I like websites using my font choice
- WhyNotHugo 1y ago“sans-serif”, “serif” and “monospace” still resolve to your chosen/preferred font too.
- fleebee 1y agoI wasn't aware of this phenomenon. I did some digging and this is apparently indeed still an issue on CJK Windows. This PR to Bluesky has more recent discussion about it and offers workarounds: https://github.com/bluesky-social/social-app/pull/6139 https://github.com/bluesky-social/social-app/pull/6139
- sph 1y agoSo the strongly worded argument is just because on one locale of an unsupported proprietary system, which renders their entire desktop and applications with an abysmal font, you might get your website rendered with an abysmal font? What if you get a terrible font choice on the standard `font-family: sans-serif`? Should all my visitors have to download 100 KB of external fonts because Microsoft are inept? Meh, for my personal website, I'll keep using system-ui.
- antonvs 1y agoThe issue is broader than that. The article's addendum points out that both Bootstrap and GitHub removed system-ui from their font stack, and another comment in this subthread mentions that Bluesky has done the same. In each case there's a link to comments and/or a PR which gives reasons. Bootstrap later added it back, but in the PR discussion it was pointed out that this is still an issue on Chinese and Korean Windows, at least. > Meh, for my personal website, I'll keep using system-ui. Well sure, but in that case you could also use your own personal language that no-one else knows.
- chrismorgan 1y ago> img { max-width: 100%; } This must be paired with `height: auto`, or your image’s aspect ratio will be messed up if the width gets capped. > img, svg, video { max-width: 100%; } … but beware, Chrome 141 has CSS width/height work on nested SVG elements, and auto is being miscalculated. Workaround is to change the `svg` to `svg:where(:not(svg svg))`. > We’ll just use a basic system-ui for this example. It has pretty good support these days, and looks good on every system without having to worry about loading in any extra fonts. Please don’t. system-ui is a font for matching the system UI. The UI font is often not good for long content, and in some less common OS/language combinations it’s almost unusable. Stick with sans-serif if that’s what you want. People have been using system-ui as a proxy for a maybe-better sans-serif. This is not what it is, and it is bad to use it so. > In general, the font-size is a little small as well, so we can bump it up This is acceptable for larger screens. I reckon 18–20px is a reasonable target, so 1.25rem is fine. But on small screens, please don’t go above 1rem, it’s the platform’s customary size and you don’t have the space to waste. > the default line-height is always a bit tight, so anything within the 1.5 to 1.7 range should do Ouch. 1.7 is huge on smaller displays. If you want a single value, I suggest 1.4–1.5. If you want to vary by width, 1.4 on small displays up to 1.6 on large will be reasonable. > font-family: System UI; That’s a second glaring error you should instantly observe if you use the stylesheet. I am not encouraged about its quality. > Some people prefer a dark system theme, but light website themes, and vice-versa. Sensible browsers let you separate the two. Firefox defaults to having content follow the system theme, but you can change it to just light or just dark. > main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; } This is effectively giving a minimum 2rem margin. Well, actually 2rem + 8px once including the default body margin. That’s way too much, and applied in the wrong way. If you wanted to apply it to the main element, it would be easier and I think more logical to use padding: main { max-width: 70ch; padding-inline: 2rem; margin-inline: auto; } But I doubt that you actually wanted to apply it to main: if you have a site header or footer outside that, you probably still want the same side padding. So it’s probably better to use body margin: body { margin: 1rem; } main { max-width: 70ch; margin-inline: auto; } … and I have there decreased it from the wildly-excessive ~40px to the reasonable ~16px.
- easyThrowaway 1y ago
- peter-m80 1y agothis is a must * { box-sizing: border-box }
- qbane 1y agoI prefer the following to ensure the interoperability of external libraries: `body, html { box-sizing: border-box } * { box-sizing: inherit }`
- noduerme 1y agoI don't get it. I mean, yeah I get wanting to make extremely minimal web pages that are readable on every screen. But if that's your goal, the solutions are pretty well understood. Who's the target audience for this, i.e. who are the people who are trying to make a bare bones web page but just struggling with `max-width` - and why's it at the top of HN?
- sebtron 1y ago> who are the people who are trying to make a bare bones web page but just struggling with `max-width` Anyone making a personal website?
- noduerme 1y agoIf you want to make a personal website, you have two routes: Use a template thing like wordpress, with a GUI, or learn at least a bare minimum of HTML, CSS and probably some Javascript, as well as how to set up a server. What's offered in this article is not very useful to making a personal website... it's like if you wanted to bake a cake, and you read an article saying that frosting is made from sugar and butter. This isn't news and it's it's not particularly useful to baking your cake either. Just to like, follow up: 99% of the point of making your personal website is, like, making it fucking personal which is to say that you put your own time and energy into learning something in the process. Copy/pasting random CSS from the web is not learning. Also, copy/pasting this particular CSS is not even showing the slightest bit of interest. So consider: Why would anyone care about your personal website if you don't care enough to learn how to make it, you know, personal by actually learning a tiny bit about the art you're trying to put into practice? And none of this even starts to explain why this junk would be popular here. There are some brilliant CSS hacks in the wild that deserve attention, but this is sub-par even for child's play that might teach you how to do something useful. It's not even a lesson. It's just some crap you don't understand that you might copy and paste, with almost no explanation.
- monadgonad 1y agoMe. I'm a backend developer who occasionally wants to make a web frontend for a side-project but knows essentially no CSS. The solutions are not "well understood" by me because I know no CSS.
- 8474_s 1y agomax-width: min(70ch, 100% - 4rem); Results in one tiny column of text on desktop, both sides are empty margins. Its an interface exclusively for mobile phones.
- jesus_666 1y agoIt's an implementation of an old recommendation to never have more than 80 characters per line, ostensibly to limit horizontal eye movement but mostly stemming from legacy 80-character terminals and punch cards. The value of that recommendation is rather dubious considering today's high-resolution displays that allow for smaller font sizes. 80 readable characters at 768p are not the same as 80 readable characters at 4K.
- the_other 1y agoAs someone who uses screen zoom tools constantly, I vote in favour of the 80ch column width recommendation. If you want to support extra wide monitors, consider using multiple columns, rather than a single, wider one.
- crote 1y agoMultiple columns don't really work with websites, as web content almost always going to be vertically scrollable. Columns work great for things like a navigation sidebar or an image grid, but it just doesn't play nice with long-form blog content.
- the_other 1y agoFair, but neither do long line lengths.
- CyMonk 1y agoIt actually goes back to mechanical typewriters, which were limited to 70 to 90 characters per line. Commonly used punch cards also had 80 columns. Both were the inspiration for the 80 characters in computer terminals.
- lloydatkinson 1y agoI still believe there should be a `unset user agent styles` that could be set somewhere in the document. Why make devs ship reset CSS if they are going to be undoing all your pretty janky default styles anyway? Here's a list of arguments and refutations I know this suggestion is going to get: > But a browser should have a minimal set of default styles! They always have done. My suggestion does not affect that. > Websites shouldn't be able to turn off default stylings! Many already literally are, either through CSS resets or simply doing h1 { color: red }. > What's the point!? There's a dozen or so popular CSS resets that literally overrides all the browser default styles. It would save time and data to not ship the same styles over and over again. > It's impossible! No, no it is not. Simply inform the browser to apply no styling at all. This would be a straightforward feature for browser implementors to create.
- Tepix 1y agoWhat about all: unset;
- paulddraper 1y agoThat works.
- futurecat 1y agoI am personally a big fan of the https://every-layout.dev https://every-layout.dev philosophy.
- trashb 1y agoOr if you want to go even more extreme. Without CSS: https://nocss.club/ https://nocss.club/ Without HTML: https://no-html.club https://no-html.club Something similar to plain text can be created with the <pre> tag in HTML if you like to add metadata to your page. Make sure to linewrap on your prefered 50-70ch limit for our reading pleasure, otherwise I will be adding the style="width:70ch" locally to your body tag.
- stephenlf 1y agoKevin Powell makes wonderful content. I am saddened by the negative responses here. This article is a great intro for the absolute beginner to dip their toes into CSS.
- sph 1y agoI've been writing CSS for 25 years and still I bookmarked this link. Unless you're a masochist and keep up to date with frontend dev, there is always something new to learn. I didn't know about the `color-scheme` attribute - saves me a lot of work! Never heard of `margin-inline` either.
- brettermeier 1y agoIt's kind of crazy how many properties there are... I've been working with CSS for a long time and have never heard of “margin-inline” either.
- lelandfe 1y agoIMHO you should completely ignore the -inline/-block "logical" properties until you one day are making a site in traditional Mongolian or perhaps fanciful Japanese. Preparing for that day is unwise. It does make it kind of useful to write one line centers instead of two, but at the expense of people kind of needing to learn about damn logical properties when they read your code/blog.
- LorenzoVella 1y agoFair, but skipping logical properties is just asking for trouble down the line. They make layouts way more predictable across languages and writing modes, and once you get them, simple stuff like one-line centers barely costs extra. It’s future-proofing, not overengineering.
- deleted 1y ago[deleted]
- erlkonig 1y agoI can't really enjoy an article on CSS where the third thing he does is to override the USER'S PREFERRED FONT SIZE. Arrogant. But not as bad as those jerks that use smaller and smaller, progressively lower contrast text as the actual content gets more important. Huge readable repetitive headings, microfiche gray-on-gray for the stuff that mattered.
- reassess_blind 1y agoAt least they're making the font size larger than default, not smaller. The users preference will still scale that up or down. Hell, Hacker News sets the comment font size smaller than default.
- eric-burel 1y agoI would tolerate some js to implement dark mode with a class rather than a media query. It allows more control with a toggle if user wants some site dark some light. Edit: it's covered in the article actually.
- tom_alexander 1y agoFWIW you can add a light/dark toggle button without any javascript. You only need javascript if you want to persist that preference in localStorage. Here is an article that was posted to HN which implements the three-state (auto/light/dark) toggle in HTML and CSS only: https://lyra.horse/blog/2025/08/you-dont-need-js/ https://lyra.horse/blog/2025/08/you-dont-need-js/
- sevenseacat 1y agoyo that article is amazing
- freestingo 1y agoI went down the same rabbit hole when designing my own website, and I came out of it feeling like css as a whole is redundant. I also do not agree on not using default font families (not sure what’s wrong with them except for aesthetic reasons, something that I have never looked for in any of the websites I ever visited) or restricting content width (sometimes you may actually want longer lines to adapt to your window). One other thing that I would suggest is to make sure the font size is the same in both portrait and landscape mode on smartphones (landscape text is bigger than portrait text iirc).
- elevation 1y agoThere are human limit to the lengths of the lines of text that you can reasonably ingest before it becomes difficult to seek to the next line. If you measure the number of characters in a line of text in a newspaper, magazine, or novel, you’ll find that there is an upper limit of around 100 characters and a lower limit of perhaps 30. Exceeding either of these degrades reading comprehension and looks amateurish. Using styles to enforce good readability is a great use of CSS. For tips see: https://practicaltypography.com/ https://practicaltypography.com/
- javier123454321 1y agoIt's funny, the tech purists sometimes really forget that typography has been studied to death for 100s of years before the web came to be. The backlash over wikipedia implementing a design considered to be higher readability and conducive to better comprehension was a funny case.
- bbx 1y agoReminiscent of Web Design in 4 minutes: https://jgthms.com/web-design-in-4-minutes/ https://jgthms.com/web-design-in-4-minutes/
- SquareWheel 1y ago> While this is really handy, it is a best practice to allow users to manually toggle the color-scheme as well. Some people prefer a dark system theme, but light website themes, and vice-versa. It can make sense for a theme selector that works on the server, since you can serve specific HTML when building the page. However, if using a JavaScript-based solution that fetches the theme preference from localStorage, I find this almost always results in a "flashbang" in dark mode, as the retrieval is slower than the first browser paint. I've been implementing (and recommending) pure CSS-based theming to avoid this problem. Users seem much happier with them, and I haven't heard anybody ask for a theme switcher. We just respect their existing preference. However, I can see this being a problem if you offer multiple color schemes (beyond just light and dark). I'd be curious to know if anybody has found a way to avoid this issue with JS switchers -- ideally without needing to delay the initial paint. I do think an interesting approach would be a browser extension that lets you override the prefers-color-scheme property on a per-domain basis, similar to the toggle in dev tools.
- hucklebuckle 1y agoWhere can I learn more about CSS-based theming?
- bobbylarrybobby 1y agoYou might be surprised how little there is to know. There are basically three strategies: 1. set your light theme color variables in :root and your dark theme colors in `@media (prefers-color-scheme: dark) { :root { ... } }` 2. use the newish `--var: light-dark(light-value, dark-value)` syntax with `:root { color-scheme: light dark; }` 3. use a class on the body to determine whether to apply light or dark variables (can be used in combination with the above to default to user’s current theme while letting javascript toggle the theme by toggling the class)
- tom_alexander 1y agoIf you're just concerned about light vs dark, then this article (which was posted to HN) does an auto/light/dark toggle button without javascript, and it shows using CSS variables for your colors: https://lyra.horse/blog/2025/08/you-dont-need-js/ https://lyra.horse/blog/2025/08/you-dont-need-js/
- ge96 1y agoYou don't want a tailwind paragraph class in your html? /s
- defanor 1y agoI have gradually reduced CSS to zero myself, since pretty much every tweak seems to mess up accessibility more than improve things, and generally it is the client that should control the style, and the user who should configure it for themselves, knowing their own requirements better. As for suggestions from the article: > Granted, if you have images they can cause some overflow issues. The "fix" breaks zooming in. > In general, the font-size is a little small as well It is quite annoying when websites mess with your preferred font, its size, style, and so on, often turning texts illegible. In this case it is made awkwardly large, but often it is made illegibly small, apparently also with the intention to fix the defaults. > Many people love dark mode, so let’s enable it based on a user’s system preferences. "color-scheme" is like "viewport": an invocation to tell the browser that the website is not too broken, and the web browser should act more sensibly. Those are practical, but still awkward, not quite how things should be: I wish web browsers defaulted to sensible behaviors. So I rather view it as a choice between adapting to how things are and pushing for how they should be. > We generally want to try and fall somewhere in the 45-90 characters per line range (for body text, not headlines). I used to set max-width in ch before removing CSS completely as well, but usually desktop web browser windows are resizable, with the space being there to be used, not to fill with background color. I see it in epub files sometimes as well: huge margins are enforced, being rather annoying when you do not want those, while if you do, you can simply adjust the window size (or set such default styles, as another option).
- balder1991 1y agoSo you went straight https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/ ?
- bryanhogan 1y agoReminds me of my guide about CSS for styling all relevant components when using markdown: https://webdev.bryanhogan.com/miscellaneous/styling-markdown/ https://webdev.bryanhogan.com/miscellaneous/styling-markdown...
- sema4hacker 1y agoDecades ago, laying out text required using tools like troff, where the user had to memorize and embed codes to do the formatting. Then WYSIWYG tools like PageMaker finally became available to the masses, and you simply dragged things around on the screen to get what you wanted. HTML and CSS is a step backwards. I don't think anyone can remember all the CSS codes and side effects, and new ones keep appearing all the time. Myself, I can't "program" a non-trivial layout from scratch, I always have to find an example I can copy.
- g8oz 1y agoIs this the new reset.css?
- cassidoo 1y agoI have a small bit of CSS that I also use, it's not perfect, but it gets the job done for a mostly text-based site: https://cass.run/basecss https://cass.run/basecss
- longnighthn 1y agoOn the website I built for my child, I added a dragable slider in the sidebar, allow user switch to different fonts. I made this for my own needs and am not sure if others would find it useful. https://kids-math.xhtml.jp/worksheets/TMMNHTRFEPNA https://kids-math.xhtml.jp/worksheets/TMMNHTRFEPNA
- Awesomedonut 1y agoSuper helpful!
- sdotdev 1y agoI mean, that is in your comment. According to the usability research, more people prefer the other approach. You SHOULD adapt your default style to something more universally applicable. And, no, I do not want the text I am reading to be full-width on my 32-inch monitor. I'm jumping between a lot of other sites that need to take up the entire space. I mean, newspapers have a smaller columnar style than any website and have been around for generations.