Hacker News new | past | comments | ask | show | jobs | submit
CSS is becoming ever more like a programming language. But you cannot debug it. So why not use a programming language instead where you can do that, and can do pretty much anything you want.
CSS is absolutely debuggable, every browser has dev tools just for this very thing.

To do this, you can add or remove rules, or change the values of variables.

Something that might be a source of confusion for you is that CSS isn't an imperative language, it's a declarative language.

If you're not aware of the distinction:

- Declarative languages describe what they want the output to be but doesn't go through every single step on how to create the output. (e.g. html, css, regex, sql, nix, etc...)

- Imperative languages describe every single step on how to create an output, but not what the output actually is. (e.g. js/ts, php, go, c++, rust, etc...)

Since CSS is declarative, it doesn't have imperative steps on how to draw things (e.g. calculate a bunch of co-ords, then loop through all pixels between the co-ords while setting their pixel values to #0000FF). Instead we describe what we want (.box { background-color: blue }) and leave it up to the browser to decide how to do it.

This has several advantages from a web browsing perspective:

If someone figures out a better way to draw a blue box then every website developer doesn't need to go back and change their box drawing code. Instead, the browser developers change their box drawing code and now every website is automatically upgraded at the same time.

A browser might also make decisions on which way to draw a box. It might loop through each pixel one-at-a-time on a cheap cpu-only device, whereas it might pass some info to the GPU and have its shaders draw the blue box, or it might use some clever heuristics to determine that the blue box is above a large box that already has the same blue so there's no need to draw over the same space a second time.

There are other advantages to declarative languages too. Typically around being able to specify constraints to eliminate certain problems in the design of the language itself (e.g. race conditions, side-effects, indeterminate states, halting problem, etc...).

In the end, you want to use the language paradigm that makes the most sense for the situation at hand.

For scripting: you want imperative languages.

For information and presentation: you want declarative languages.

Good points about declarative languages. I use CSS all the time. Have to. It is the best tool for the job. But I don't find the browsers' CSS dev-tools very useful. Maybe I'm not just using them right.

It is often not clear to me why something is off by 3 pixels or something.

Maybe it is the cascading nature of CSS hat makes it complicated. Or maybe it is the fact that I am also using JavaScript to dynamically alter the CSS. Or maybe CSS is just getting very complicated because of its evolving nature yet having to remain backwards compatible.

The off-by-x-pixels problem usually only happens when you take the unwise path somewhere.

Following standard practice in regards to layout will help you here:

1. Use `box-sizing` everywhere (should be defined in your css reset file, example: https://piccalil.li/blog/a-more-modern-css-reset/)

2. If you can do something in css or js, do it in css.

3. Don't use pixel values anywhere (this avoid a lot of off-by-x errors when either the math is wrong or a previous assumption is violated by new code somewhere else). Two exceptions: a) The base font size on the root (usually the <html>) element. b) A 1px border, since the box-sizing in step 1 will allow you to take it from the element's block and inline size.

---------------------------------

Also, if you're trying to position text, or an icon inside a button and it seems off, you don't want to be trying to fine-tune the positioning with pixels.

It's always better to address the root cause.

Usually this is `line-height`, `vertical-align` and also the font itself. You can see lots of examples of the font being the issue here: https://tonsky.me/blog/centering/

If you run into this issue, you can look at the font's internal metrics (shown in the link above) to get the exact values you need (Browsers will be able to do this in 2-3 years automatically with `text-box-trim`). Or you could simply switch to a better font that already has the correct values.

Yes the CSS debugging tooling that comes with every major browser is incredibly useful.
Because the browser can more effectively GPU accelerate CSS animations, which seems to be the main driver for features like this.
{"deleted":true,"id":41453122,"parent":41451803,"time":1725506030,"type":"comment"}