Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

"CSS is dramatically more difficult than learning assembly language" [audio]

feeds.resonaterecordings.com

Post reply on HN
Print view View original

101–109 of 109 posts

Re: "CSS is dramatically more difficult than learning assembly language" [audio]

#101

Post by amitp »

gingerlime wrote: post #42

slightly OT but can someone recommend how to learn CSS in 2023 for a backend web developer, who 30ish years ago grokked mainframe Assembly reasonably well (and since then developed in c, php, python, ruby, bash, etc etc)? Can/do I start with tailwind? Do I start with old-school CSS or jump straight into flexbox? Do I need to care and learn about BEM, Sass, etc? Do I start with an empty page and build it? Do I need to…

I'd start with learning the layout model and the selector rules to get the mental model right. A lot of things clicked into place once I had a good mental model.

The main idea for layouts is that the CSS layout properties like width or margin are interpreted based on which layout mode you're in. Some html tags (, , ) default to the "inline" mode, where they are put side by side horizontally and wrap to the next line. Some html tags (

, , ) default to the "block" mode, where they are put one after the other vertically and "wrapping" doesn't mean anything. There's "inline block" which is inline on the outside but block on the inside. There's also "flex" and "grid" and "table" layouts, and their inline-on-the-outside variants. Each layout mode is useful for different things.

So when I'm frustrated about not honoring width, or margin-auto not working for , it's because the inline layout has word wrap. When there are 2.5 lines of wrapped content, things like width and margin work differently than in block layout mode. Instead of tweaking width/margin, I found it more useful to go back to understanding why it was not doing what I want, and then switch the layout mode to the one that matches my needs. Recommended: https://www.joshwcomeau.com/css/understanding-layout-algorit...

Selector rules are a pattern matching system to assign CSS properties to HTML elements. They also have priorities, so some selectors will have a higher or lower priority than others. These are sometimes useful, sometimes frustrating. I don't have a good reference at the moment, although I see that MDN has a page https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

I think of BEM, tailwind, sass, etc. as ways of using CSS once you know what CSS you want, rather than replacing having to know CSS. It's like how React is a way to constructing HTML, but you still have to know what HTML you want to construct. So I wouldn't start with them.

BTW it is a lot of fun to right click on a page, inspect the css, and start tweaking it!

Re: "CSS is dramatically more difficult than learning assembly language" [audio]

#102

Post by moritzwarhier »

antisthenes wrote: post #67
moritzwarhier wrote: post #53

Earlier quoted context omitted.

Box model + flex box + the display modes + "positioning" (stacking contexts) are typically the most confusing parts of CSS, I feel. Add maybe margin and padding, and how they interact (margin collapse, no margin collapse in flex or grid context, box model again, auto values). But then, that's basically all the hard conceptual parts. But they are mostly intuitive and well-designed! I know I'm alone with this opinion.…

> Box model + flex box + the display modes + "positioning" (stacking contexts) are typically the most confusing parts of CSS, I feel. That's like 90% of UI. Saying they are the most confusing parts of CSS is basically admitting that CSS is awful to learn and use.

Yeah but I'm not sure if that's primarily a fault of CSS.

I just wanted to enumarate the "hard parts".

But even if I were to agree, what layout and "styling" language or API is the easiest, most logical and well-designed one in your opinion, that still covers the same variety of use cases? From print-like simple layouts to all complicated, nested application UIs for all imaginable screen sizes?

Just curious, I'm not writing that much CSS anymore and I have cursed at it as well.

But I feel it is also powerful and sometimes, yes, even beautiful to use.

Often things that bother people are a feature at the same time, e.g. visible overflow by default.

Re: "CSS is dramatically more difficult than learning assembly language" [audio]

#103

Post by PH95VuimJjqBqy »

moritzwarhier wrote: post #102
antisthenes wrote: post #67

Earlier quoted context omitted.

> Box model + flex box + the display modes + "positioning" (stacking contexts) are typically the most confusing parts of CSS, I feel. That's like 90% of UI. Saying they are the most confusing parts of CSS is basically admitting that CSS is awful to learn and use.

Yeah but I'm not sure if that's primarily a fault of CSS. I just wanted to enumarate the "hard parts". But even if I were to agree, what layout and "styling" language or API is the easiest, most logical and well-designed one in your opinion, that still covers the same variety of use cases? From print-like simple layouts to all complicated, nested application UIs for all imaginable screen sizes? Just curious, I'm not…

whose fault is it then?

We had desktop UI's in far simpler forms years before. Yeah, sure, there are new requirements, but those requirements didn't actually need the complexity of modern CSS.

modern CSS came about because people like to be fancy. You value the wrong thing, you get the wrong thing.

Re: "CSS is dramatically more difficult than learning assembly language" [audio]

#104

Post by PointThink »

marssaxman wrote: post #26
Vanderson wrote: post #5

Advanced results require advanced skills. CSS is one of my favorite languages. And the only way I can consider CSS to be difficult is if you have no experience with HTML. If you try to do HTML by hand, then doing CSS by hand on top of HTML by hand is really easy and wonderful. And this is truly where you gain the fundamental framework for "getting CSS".

My experience was completely the opposite. Learning HTML was effortless, and I had a great deal of fun writing pages by hand, easily creating whatever I could imagine through a straightforward hierarchy of nested tags. When CSS came along, it added a slippery, inconsistent layer of confusion where spooky action at a distance was the order of the day; nothing ever worked completely right, no matter how much time I spe…

Yeah CSS is a complete nightmare. Nothing works and you never know why. The only thing you can do is to randomly change attruibutes randomly until something happens. I remember working on a simple website and i had to do a gradient banner. The gradient was relatively simple but the true challenge was making it stretch edge to edge. No matter what i did there was always a little bit of padding or the layout was completely off. I don't even remember how i solved it.

Re: "CSS is dramatically more difficult than learning assembly language" [audio]

#105

Post by nineteen999 »

VeejayRampay wrote: post #55
stevemk14ebr wrote: post #3

Assembly is not trivial lol. The instruction set is easy to learn yes, but the kind of bit manipulations that occur at ASM are not easy or simple. Look at optimized division sometime. Try reverse engineering, it's an art that takes decades to learn. I do agree with "Anyone who can learn CSS can learn assembly" though, anyone can learn pretty much anything with enough time and effort.

sensationalist title, ASM is much more complicated than CSS

Right. At least there's only one CSS specification isn't there? There's a whole heap of different assembler languages for different ISA's out there.

It's like comparing one apple with a bunch of oranges.

Re: "CSS is dramatically more difficult than learning assembly language" [audio]

#106

Post by paulddraper »

JimDabell wrote: post #47
paulddraper wrote: post #16

Earlier quoted context omitted.

It's because of the inconsistency. For example, `margin: auto` expands left/right margins but not top/bottom margins. ....and 50 other such cases.

That’s not inconsistent, that’s just reflecting how our writing system works. CSS was designed around the idea that there is a document consisting of text, which implies the X and Y axes work differently – because they work differently for our writing system. Text goes from left to right, then wraps back around to the left moving vertically down (obviously this is for RTL languages; adjust for different writing syste…

> that's not inconsistent it's just inconsistent

> later other systems were introduced that weren't inconsistent

Re: "CSS is dramatically more difficult than learning assembly language" [audio]

#107

Post by mediumsmart »

The whole of css is difficult but it’s a non issue because you leave all the obsolete stuff out when using and learning css.

Grid is for placement, box-model is border-box, flex you don’t use and !important means your css is too complicated so go back and fix that.

Of course your html does not have a single div, you don’t put nav into ul etc. and all is good.

Re: "CSS is dramatically more difficult than learning assembly language" [audio]

#108

Post by Terretta »

ww520 wrote: post #70
Terretta wrote: post #64

Earlier quoted context omitted.

> inconsistency of mixing ... width can be set on but has no effect on One of these is a division of layout, one of these spans the thing it wraps. The should span the span of the content. The affordance of an anchor hypertext reference was supposed to be consistent for usability, and the is on the link aspect, not on the text. The text that's inside the here is part of the text on either side of the anchor, and shou…

Yes. All these are "supposed" to work the way they are and they are given good reasons, but it still doesn't negate the facts that the same CSS style has different effects on different tags. The tag is a good example. As a user of CSS, when I apply a width to a span, I want its width set. I don't care it spans items. If I want span to have no width, I would just leave it alone. The fact that setting the width spells…

Semantics and context matter.

Width is a lovely word for things that have width, and meaningless if applied to things that don't.

Consider “Set your emphasis width to 12 points.”

None of that is applicable even though there are 3 CSS keywords in there and you can make sense of the sentence.

> Don't you want consistent appearance of the link both in colors and font-size, in the name of affordance?

Speaking for me, no. All words in the sentence, both inside and outside the anchor, should be consistent font, but the anchor has both state and behavior that can include color, underline, etc., to set what's inside the anchor to be inconsistent from the surrounding text, for attention and information.

Generally, font size is not one of those things that would vary (Mac dock icon mouseover as a counter-example).

There's a decent chance much of this makes more sense if you were making sites before these capabilities were developed and were along for the progression.

It likely does seem like a chaotic mess when picking it up for the first time in present state, so I think it's a fair reaction.

Re: "CSS is dramatically more difficult than learning assembly language" [audio]

#109

Post by fatnoah »

dieselgate wrote: post #8
fatnoah wrote: post #7

Yeah, I've authored assembly and CSS professionally (not at the same time) and would choose CSS all day long.

I've never written assembly but would assume CSS has better tooling available? browser dev tools for example

In many, many ways, assembly is more straightforward, but I went with CSS just because of the ability to see the results and to poke & prod with browser tooling.
Post reply on HN