Hacker News Reader

Comment by sureaboutthis | Hacker News Reader

A lot of the complaining in this thread is not what the article is about but I always find that too many people look at CSS usage from too high a vantage point without understanding the fundamental workings. It is that issue where people find themselves in trouble getting properties to interact with each other as expected.

One example, and not the best one, is 'width'. People want 'width' to be the total width of an element as displayed in the viewport but 'width' was never specified that way. It is the width of the content, such as text, exclusive of padding, borders and margin. But people don't read the specification, then struggle getting layout to look as they wish and blame CSS as not working "as it should".

Quite frankly, in most cases, CSS works exactly as it is specified and most of one's problems go away once that is understood.

View on HN

There are legitimate grounds to argue that the way CSS was specified is wrong.

The fact that people find it so confusing is one. If people intuitively think that "width" is the total width of an element (an entirely reasonable assumption, mind), then that would imply that CSS chose an unnecessarily confusing name.

Another is from the mental load perspective. If I'm doing a layout, I want to figure out how things fit by looking at the total space they take up. _That_ is the width I care about. Leaving margin out of it makes sense, but having to mentally add the padding and border to get from "width" to "no really width" is annoying.

> The fact that people find it so confusing is one.

Problem is that they never learned it. They jump in thinking "I know how to code, everything should make sense to me" and hit a wall. CSS is not like regular coding.

I went to a technical college and one of the class was on CSS. It's the class that everyone aced. Even the people who would fail miserably in every other parts of the industry.

CSS is not hard but it requires some memorization.

Logic in many cases is preferable to memorization. Not only you need to memorize less upfront, you can expect new additions to follow it, and not need to memorize much to start using them.

Compare how easy it is to pick up e.g. Spanish writing vs English writing vs Chinese writing, assuming that you already can speak it.

There's logic in CSS. Selector specificity, cascade, inheritance, display types, etc.

Once you grasp the few parts that requires understanding you only need to remember the syntax and the declarations.

Then the real challenge is to organize your stylesheets in such as way that allows your styles to grow.

I've seen from experience that most people don't even try to learn the language. They come in with no knowledge of the cascade, wonder why everything fails and blame it on the language. Most "bugs" related to CSS can be spotted and fixed in minutes.

Ex: ID selectors are always stronger than classes when it comes to selector specificity. A class can also be mixed with an element selector to increase its weight but it will never beat an ID. Someone who is not aware of this will try to have a class selector be stronger than an ID and get strange results. Instead of fixing the selectors they put an !important on the class selector to have it be stronger than the ID. The stylesheet then quickly become a mess.

Or !important; everywhere

Today, many people want to modularize components/elements for placement in an arbitrary way. That is, they want to be able to plunk down an element on any page and make it all work together. However, if one uses 'width' as the total width of the element, including margin, borders and padding, it could mean the spacing between the content, pre-arranged in that way, may not fit the design of the page giving it too much margin or padding making it look awkward. Then the designer is stuck with that if he doesn't have access to changing the elements margin/padding.

If `width` only means the content, then a designer can plunk that same element down and adjust padding/margin to fit any design easily.

This is one example of an issue others would complain about.

These kinds of tradeoffs can be handled better, though.

It's worth taking a look at how Windows Presentation Foundation does things, for example. It places the decision of whether to size individual elements according to their content size, the size of the container they're being placed into, or their total width front and center, in a way that, IMO, leads to less head scratching and compromises.

I think the issue here is that CSS was originally envisioned primarily as a styling tool, and layout functionality was bolted on as an afterthought, through a design-by-committee process. So, yes, it works, and anyone can learn it, but it would be nice if the overall effect were one of a technology that had a clear plan all along.

> One example, and not the best one, is 'width'. People want 'width' to be the total width of an element as displayed in the viewport but 'width' was never specified that way. It is the width of the content, such as text, exclusive of padding, borders and margin. But people don't read the specification, then struggle getting layout to look as they wish and blame CSS as not working "as it should".

And this is something on the wiki page:

> Box-sizing should be border-box by default.

While yes, CSS has well-defined behaviour here, it goes against user expectation. That mismatch is the real harm here.

(And to be clear: I'm not saying this with any sort of CSS WG hat on here. And I don't think the wiki page necessarily reflects the view of the whole WG, given it's not an official document.)

Yes, one of the most frustrating things is reading peoples rants about how 'bad' CSS is, it's clear they don't understand it, and they think it should be easy.

Sure it's nuanced, and maybe imperfect, but I love it.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing lets you have width work the way people want. box-sizing: border-box "typically makes it much easier to size elements."

The problem is that sometimes the specification is not optimal, particularly when you're making applications instead of just formatting documents. Some of those cases have been fixed, some have not.

Reply on news.ycombinator.com