Aspects of Modern HTML/CSS You May Not Be Familiar With
Original: Aspects of modern HTML/CSS you may not be familiar with
Key topics
The debate rages on: is CSS inherently hard to grasp or just misunderstood? Some commenters, like whytaka, confidently declare CSS "easy," while others, such as paulddraper, scratch their heads over nuances like `float: clear` and `white-space`. The discussion reveals that, for many, CSS complexity stems not from innate difficulty, but from its vast, often underutilized feature set and the tendency to cherry-pick familiar subsets, much like with C++. As commenters like JohnFen and extraisland point out, individual perspectives on CSS complexity vary wildly, with some attributing it to personal thought processes and others to the language's inherent intricacies.
Snapshot generated from the HN discussion
Discussion Activity
Very active discussionFirst comment
1h
Peak period
150
Day 1
Avg / period
40
Based on 160 loaded comments
Key moments
- 01Story posted
Aug 28, 2025 at 4:49 PM EDT
4 months ago
Step 01 - 02First comment
Aug 28, 2025 at 6:08 PM EDT
1h after posting
Step 02 - 03Peak activity
150 comments in Day 1
Hottest window of the conversation
Step 03 - 04Latest activity
Sep 12, 2025 at 10:46 AM EDT
4 months ago
Step 04
Generating AI Summary...
Analyzing up to 500 comments to identify key contributors and discussion patterns
Want the full context?
Jump to the original sources
Read the primary article or dive into the live Hacker News thread when you're ready.
Explain float: clear?
Does that have anything to do with display: flow-root?
And white-space is not actually whitespace?
And when does vertical-align work vs not?
---
^ That is all CSS (and not particularly edgy CSS, except for flow-root).
So....yes, CSS is really that hard. Unless you use the subset of CSS that you have decided to learn + use. Not unlike C++.
Personally -- and I'm no web dev, so I probably don't count -- I think CSS is hard (maybe more irritating than hard, but in any case I wouldn't call it easy). In large part because the syntax is ugly, but also because it just doesn't "mesh" with me. If I'm reading it or writing it, I always feel like I'm having to decode it. But I can easily and happily work with some programming languages that most devs would cross the street to avoid.
Maybe that's also why some people are attracted to being web devs and others aren't?
As a user, nothing would thrill me more than if web pages just stopped using JS, though, so I am very happy that there is a feasible alternative to doing that that web devs could enjoy!
No that often isn't the case. What is usually the case is that people don't bother the learning the basics. CSS is very easy. You can literally mess about with it on the fly in the browser and instantly see the result.
It is easier now than it has ever been. Since all the browsers for the most part implement the standards properly. Safari is the only standout and all the issues with that are well known.
> In large part because the syntax is ugly, but also because it just doesn't "mesh" with me. If I'm reading it or writing it, I always feel like I'm having to decode it. But I can easily and happily work with some programming languages that most devs would cross the street to avoid.
It is probably because you haven't learned the basics.
Whenever anyone has issues understanding CSS, they haven't bothered learning the basics and think they can flub their way through doing it.
I don't understand what is ugly about the syntax.
It is about as straight forward as it could be. The difficulty with CSS is organisation as the web app becomes larger. There are well documented strategies on how to do this.> As a user, nothing would thrill me more than if web pages just stopped using JS, though, so I am very happy that there is a feasible alternative to doing that that web devs could enjoy!
Non-trivial functionality requires JS. Basic Websites rarely require JS. So I am not sure what you are trying to say here.
The syntax has never been the issue imo.
You are over exaggerating the problems IMO. Yes it is a pain when you are left with a mess, but there are ways of dealing with that.
At that time I was a novice, didn't know what a debugger was (I printed everything out the the console / page) and didn't know what an IDE was (I think I was using Notepad++). I managed this feat by following the tutorial.
The biggest problem I had was that I couldn't understand why centre, and colour didn't work. Once I realised that I had to spell everything in American English, that problem quickly went away.
That's not the case with me, honestly. It's just a poor mesh with my brain is all.
> So I am not sure what you are trying to say here.
I'm trying to say that I dislike the use of JS, at least for common websites, and I'm in favor of anything that could reduce its use.
I am a former front-end developer that managed to figure out AWS, Go, C++, C#, JavaScript, Python, OpenGL and have done a LFS build. I am not some sort of mega genius. I just had to go through and read the correct material and learn the basics.
Honestly the best thing I tell people to get some decent css basics is try to build a few stylus themes.
You can instantly see the results in devtools. I can't think of any other language that does that besides html, and even then you have to save and refresh.
Css is pretty easy to pick up in the chrome devtools at least because it has built in autocomplete. Showing you exactly what you can set the values too etc
Any problems have nothing to do with that.
Those languages happen to be "imperative"? – the few backend devs I know who at least sort of vibe with CSS are all used to declarative programming. I think that might be at least one of the reasons?
The only one that comes to mind is is `with`, which is officially discouraged in the spec.
I suppose the other one is type coercion. (Like [] + [] stuff. That's no end of "ha ha JS weird.")
white-space seems pretty straight forward: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
vertical-align, yea, alignment in general is hard and IMO it's hard because it's a hard topic in general, CSS or native. but yea, it's not "vertical-align"
Anything but. It combines whitespace collapsing and text wrapping in one property and makes a mess of both.
See https://drafts.csswg.org/css-text-3/#white-space-property to get an idea of how complicated it is.
The MDN article is self-contradictory, e.g. note how the example don't match the "syntax" section.
Plus, it has inconsistent quirks with HTML textarea.
And the fact that yours was the only comment to point this out...
At the same time, I want to emphasize more strongly the flip side that I think you don't at but don't go much I to: I do find that writing less code & using the platform is enormously valuable! Doing less & letting the browser do the thing is a very nice win.
If only they would do it nice and consistently, I would agree. Sadly they don't. On one plattform you get sliders in this color who pop in when the mouse moves there, on another you have fixed size sliders of a different color and style. Impossible to make a coherent style like this.
for any sites that do need js, i simply enable it for them from the extension, so it never gets in the way with sites i use regularly
it's pretty nice for performance/battery and security
have you ever tried living with noscript for over a week? i feel like your perspective could be a bit mislead, because i felt the exact same way as you before i started using noscript
disclaimer: i'm the author of the blogpost
Genuine question though: you just run a ton of apps instead, right? Windows apps, iOS apps, whatever. Right? Because you still want to use (and not just "look at") Facebook or WhatsApp or BSky or Drive or CoD:BO6 or... everything. And all that stuff runs in an environment with the same privacy-compromising power (generally much more dangerous, frankly).
I just don't see a situation where "use noscript" doesn't really just mean "use your phone so you don't have to use your browser". I mean, why bother? You're not winning anything.
(Quite frankly most of the people I see in this argument eventually admit this straight up: "no javascript" really means "no Google" to them, and their goal isn't privacy at all except as a proxy thing; it's the destruction of the World Wide Web as a platform in favor of Apple's offerings.)
for sites such as facebook, i don't really use them that often, so i only run js on them when i feel like consenting to it
yes, i use programs/apps, but attack surface and threat models aren't binary, so it's still better to make things more secure
But again, the point is that market decisions aren't microeconomic. The world where everyone uses noscript by default is a world where no one builds web apps anymore (because the platform sucks by default) and everyone uses native apps from whoever the dominant vendor happens to be. And that's worse (much worse, by basically every metric, including privacy and security) and not better.
Your logic only works if you're a parasite: you can use noscript to "protect" yourself only if most people don't.
and like, noscript doesn't mean you can't run javascript - it just means you have to consent to it, just like it was in the past with flash and java applets
your argument kind of assumes noscript users never run javascript, which is false
Of course not. You're a parasite because if everyone had your "personal threat model"[1] it would kill the platform you're using and you wouldn't even have the option of noscript. I think the metaphor is apt and I stand by it.
[1] FWIW, this conflation of legitimate security jargon with what amounts to wanting more settings tunables in your app is sort of a bad smell. It seems insincere, honestly.
seriously though, some of us have been using the web longer than JS has existed, and it works fine without it.
i personally just updated my purpose-built (for SEO and other non-JS contexts) router for React, which now lets one curl a page and you can see all the text contents you want and even has low quality image placeholders. so you can view the whole page with no-JS. it really isn't very hard to support!
Separately, we already live in a world where people tend to pick "native" apps (e.g. Discord, Slack) that are just wrappers around the webapp, and on the phone you have similar behavior where people often prefer the "native" app (e.g. twitter/X) over the mobile web version. Despite this asymmetry, web apps continue to be built, and they would continue even if everyone used noscript.
For many people that's true and good luck to them.
For others, myself included, I can't think of anything worse online than being locked into mega corporations such as Google and Facebook. I don't have a Google or Facebook account and I de-Google my Android phone by either disabling or removing all Goolge apps (there are pleanty of alternatives).
I'd bet that if you did a survey you'd find that those who can live without scripts are also those who can essentially live without Social Media and or Google apps. However, for many, the imperatives of Social Media are so strong that no argument would ever convince them to go script-free.
In essence, here we're dealing with diametrically opposite worldviews and there's little point or value in trying to reconcile them.
I have been living without Javascript, and without a mouse, for over 20 years
When I began using the web, Javascript did not exist
Extracting text for reading and downloading files keeps getting easier every year
I generally avoid using a browser to make HTTP requests; I sometimes use a text-only browser to read saved HTML (offline)
As I implied in my earlier post most users these days don't realize the advantages of turning off JS. Trouble is, most browser manufacturers make it difficult to disable JS, either there's no switch in the settings or it's buried so deep it's essentially dysfunctional. Here I'd especially single out Mozilla with Firefox, one could once easily disable JS but the function was removed I suspect after pressure from Google—as you would know without JS ads are almost a non event.
On Android I use Privacy Browser which makes it dead easy to turn JS off and on, and on Windows and Linux it's Pale Moon with a plugin that provides a one-click switch.
Seems to me too little is made of these advantages in tech sites such as HN—although that's not surprising given that many here make a living from JS programming and are paid by companies who financially benefit from sending mega-sized JS-loaded pages to web users.
I visit new websites all the time because of HN and Reddit, and without JavaScript many sites just don't work or look too broken for me to want to read anything. Unless we collectively decide to stop using buttons instead of anchors for navigation and stop having external, unrelated JavaScript blocking the actual site (that, sometimes funny enough, doesn't require JavaScript to function), it's not going to get any better.
I went through a phase where I think JavaScript is bad and have used CSS instead of JavaScript for a lot of things (mostly because I enjoy writing CSS). The thing is if you have ever tried developing any substantial and moderately complex feature for an actual product with CSS instead of JavaScript, while keeping them readable, maintainable and scalable, you will realize that they are good for different things and talking about them in a mutually exclusive way isn't helpful.
Both CSS and JavaScript are constantly evolving, I agree with you that there are now things that we should do with CSS instead of JavaScript and increasingly more so.
The other motivation mentioned is performance. But they don’t belabor the whole motivation thing anyway. IMO that’s a good, focusing on showing off the tech seems more productive anyway.
It's not JavaScript that I'm against but the many abuses that websites inflict on users—privacy violations, pages of many tens of megabytes long but which only contain some 10k or so of text, the incredibility slow page load times, etc., etc.
As far as I'm concerned CSS is capable of just about anything I require of a webpage.
It seems a shame that not more users are aware of browsing sans JS with a button to turn it on and off. After experiencing the advantages it's quickly habit-forming. The increase in speed of page loads alone justifies killing JS.
correct, nearly all dont
edit: IE javascript was probably responsible for at least half a dozen times their system has been ruined, and they know what tracking is.
What does this mean?
If 99.9% percent of users don't know what JS is, that means even a majority of professional software developers don't know what it is.
Deep down inside, however, I miss DSSSL.
https://moderncss.dev/topics/
Recent survey of what people use to learn CSS:
https://2025.stateofcss.com/en-US/resources/
CSS Tricks article on this:
https://css-tricks.com/how-to-keep-up-with-new-css-features/
I do wish we would start to move further towards a sane set of front-end application (logic) technologies (I don't think the current leader, Typescript NextJS is it)
But I do appreciate that CSS is starting to feel a lot more sane these days.
-- update --
my bad - I think it was just subtle and I thought it wasn't doing anything. Thanks for all the replies
also the box-shadow is a box shadow, you might wanna change it to text-shadow if that's what you'd expect from it
text-shadow does make more sense if you're actually trying out the code, but the original intention was to demonstrate a more complex element having a shadow modifier
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting...
- https://caniuse.com/css-media-range-syntax
- https://caniuse.com/css-nesting
- https://caniuse.com/flexbox
GUIs are successful when they follow visual and behaviorial standards. With everything that CSS and JS can do, every website becomes an exercise in discovery just to be able to use it for its intended purpose.
Wouldn't that be a design or HCI issue, not something innate to a language? What is a behavioral standard?
A behavioral standard would be that scrolling always works by sliding the scroll bar or using the arrow or page-down keys.
Or that the back button takes you to the previous page.
Just two examples.
Many sites break these and you have to discover what they replaced them with.
I find vw very useful for a scaling pixel-perfect mobile portrait view that looks identical whether your mobile is 320px or 440px viewport width.
I generally avoid vh, and rely more on calc and vw to calculate any height that needs cropping, padding or scaling.
For example dynamically equalising the height of boxes with unequal content - used to be something you did need JavaScript for.
Another is setting widths, heights and gaps using a css grid to create responsive mosaic image layouts.
if you're going to disagree with something, please at least read it first
RIP any semblance of using meaningful tags for machine readability I guess.
if an element that semantically fits your needs already exists you don't need to make up an element in the first place
I know like 10-15 different languages, and CSS is by far the hardest to read and understand. It's easier to understand x86 assembly than CSS. CSS is basically pre-tokenized input that drives a renderer, but they sort of went halfway and didn't really make it real tokens or really human-writable.
I'd say that it should take the place of ASN.1 in the RFCs as an example of "what not to do."
CSS is hard to know, even if you know 15 languages.
I can understand many programming languages and write in a subset of many of their features, but I wouldn't claim to know them. That would require a monumental amount of day to day effort, in my opinion (see https://en.wikipedia.org/wiki/Illusion_of_explanatory_depth).
To me, the best way to understand CSS is to evaluate it after rendering, and I have been writing it for decades.
There's no use comparing CSS and assembly. It betrays a shallow understanding of CSS. Points to ponder:
- Assembly is superlatively imperative while CSS is the opposite. The difference can be jarring for some. It's commonly felt in day-to-day frontend work that switching to CSS (declarative) from almost anything else (imperative) -- JavaScript, PHP, etc. -- requires a significant mental shift, though it does get easier with experience.
- Lot of the vocabulary and concepts used in CSS come from outside the computing world, namely design and publishing. It's somehow a rarely shared factoid, but it's a hint at how too far away from Kansas we are to be making fair comparisons.
- A pervasive mistake that coders make (and unfortunately a lot of CSS teaching material out there too) is to approach CSS as a set of explicit, atomic instructions -- a fair coder-y assumption, but a bad mental model that leads to frustration. Understand that these instructions can affect one another; some switch entire layout algorithms[0] in a given scope, changing how other instructions behave (predictably).
[0] https://www.joshwcomeau.com/css/understanding-layout-algorit...
Even if you write code for it, you should be able to write code in a way that express your high level thinking, something similar to constrain layout in mobile dev. CSS has 4 levels of overlapping features so far and every new layout model comes out are slightly better but still a little bit off. The newer features like variables have bolted-on syntax that looks like garbage, nobody understand CSS grammar anyway (does it even have one?)
Given how convoluted CSS is despite how little it has to do, I consider it a poorly designed programming language, if you can call it that.
Remember that designing for the web is not like designing for print, where the dimensions of your canvas, and the amount and nature of your content, are known quantities. A web page is expected to accommodate every possible device, agent and viewport -- watches, phones, tablets, laptops, desktops, TVs, screen readers, ebook readers, etc. * portrait and landscape orientations * browser window sizes -- and content that can change by the minute and whose size is unknown until all of it has arrived on the device.
Think about all these conditionals and variables, and how much instruction you need to provide, efficiently, for making it all look as good as possible, to the browser/agent. Doesn't all this seem like the necessary purview of a domain-specific programming language?
Given that HTML+CSS is really damn powerful as this post makes clear, how do other UI toolkits compare? I've always wanted to do more with Qt, but probably it won't come near HTML+CSS in terms of functionality and flexibility?
Unfortunately the preprocessor languages we have just add even more half-baked ideas on top of the half-baked ideas already in CSS, according to the principle that syntax sugar = good.
I haven't seen anything out there that provides an alternative but it does seem like CSS has almost added enough features you could actually build something that works. Alternatively it could be done through higher level abstractions built on something like React: <Flex>, <Grid> etc.
that said i do like to still use classes like "btn" to consolidate a bunch of styles. I think it was a mistake for TW devs to discourage that pattern for so long.
from the article is talking about people like you, who refuse to learn something properly but have the arrogance to think they know better.
There’s nothing more arrogant than doing something wrong/badly and then blaming the tool for the outcome and not yourself.
Here's a better explanation of the hostility towards CSS.
Nested flexbox had bugs in IE11, which wasn't end of lifed until 2022. The nested CSS in the article came out in December 2023.
CSS first came out in 1996.
The current state is much improved, but don't pretend there wasn't a solid 20+ years of sucking before that.
how is I hate CSS because IE was poorly maintained a serious argument?
on edit: I know it was in WD in 2009 but I'm pretty sure it was around 2013 that people started playing with it. I think it started being popular in 2014-2015.
“It’s not MY fault, it’s a browser no has used in 10 years fault! I can do no wrong!”
Ok
Many years ago I did a very deep dive into the CSS specs as I was researching for a new implementation and it struck me as well designed for its purpose of separating style from the semantics of markup.
HTTP can stay, and HTML/CSS can stay just like PDFs for delivering a document, but when it comes to UI components, we should be able to have things as fast and performant as e.g. RedLang / Processing / Enlightenment DR17 / etc without every developer having to shovel megabytes of shim-ware down to the client.
I.e, the GP is trying to argue one thing and you’re kind of going down a different tangent.
Nobody came up with a better alternative though (apart from the many dialects that transpile to CSS again).
[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
Specificity is really just
* ids take priority * the highest number of specified classes, and if there’s a tie it’s the first one specified * the highest number of types
The only problem is that most paths in frontend development say “slap a class on an element” and call it a day but you do need to be intentional about it and only specify what you need
When it comes down to it, making a great looking and maintainable page is just as much work and planning as building a good backend codebase. Neither one just happens.
Lots of "real" devs treat HTML with similar "I don't need to really learn this toy markup" kind of attitude. The worst CSS issues I've ever had to deal with were often caused by horrible markup that was impossible to consistently style.
Basic stuff like how to make a good `<form>`. Putting `<label>` elements next to your `<input>` elements, or making sure the `for` and `ID` attributes are set. Hell, even using `<label>` instead of some `<span>` they threw a bunch of random framework classes on.
A series of modules that are bolted on top of existing properties without actually improving on them, simply "well, here's another way of doing the same thing" often in ways contradicting each other (see the way the box model works in "display" vs "flex" layout) or just slightly diverging in ways that make extremely hard to debug them (e.g. how gap works in "flex" vs "grid" layouts[1]).
The awkward point-based cascading system means that once a layout is written it's basically frozen, unless you use some convoluted native or js-based encapsulation systems which once in a while gets leaky and, who knows, your component topbar font-weight mysteriously goes from "thin" to "extrabold" or your mobile menu appears even on your desktop breakpoints.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/gap
Perhaps because we can have different styles of layout, it fits with CSS better than you say. Carefully designed padding, margins and negative space is both a style and layout consideration.
Containers contain styles, but the container's relationship with other containers may tie with presentation such as border thickness, colour, shadows, and let's not forget animation and interaction effects on containers. Maintaining control of these aspects in one place makes good sense to me.
CSS2 included limited layout, but support in popular broswers lagged for so long that practically nobody learned the standard, just the vibe styling voodoo to get certain browsers to kinda partially work.
Here's a thought. Build a WYSISYG tool like that. HTML/CSS only. Round trip; that is; it reads its own HTML/CSS and works on that, rather than using some separately stored representation.
If you want to use Javascript with this, it has to be inside a manually edited IFRAME or FRAME. If you have Javascript, it's probably for interacting with a server or doing something graphical. Or, more likely, for ads, tracking, and such. Not for layout.
> n-th child variable
See sibiling-index() and sibling-count() https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-ind...
> Reusable blocks
See @function and @mixin draft spec, https://drafts.csswg.org/css-mixins-1/ and https://css-tricks.com/functions-in-css/
Both are available in chrome already.
94 more comments available on Hacker News