Things I wish I’d known about CSS • Hacker News Board

Re: Things I wish I’d known about CSS

#201

Post by IggleSniggle » Fri, Jul 17, 2020, 3:45 PM UTC

egfx wrote: post #156

miiiiiike wrote: post #65

Earlier quoted context omitted.

I've never been happy with a front-end dev that I've paid six-figures to. I once paid a senior front-end engineer far too much to do a fairly involved layout. Three months, an uncountable number of bugs, and one unusable tangle of Sass later I pulled the plug and swore off ever hiring a "CSS Person" again. I took the Linus+Git approach and said "I'm not writing another line of Python until I understand CSS." After a…

You seem to be trivializing css as something static you just have to deal with. This maybe true for 99% of websites but css has had more innovation in the last few years than anything else. And much of it hasn’t reached textbooks. For example css3 functions and now being able to mix these new techniques in undiscovered ways. CSS requires a very nimble and creative mindset. That maybe why backend devs usually are very…

Have you looked at Definitive CSS? It's up to date and a massive 1000 page tomb of encyclopedic knowledge and guidance. Anyone who digests that entire thing is not being dismissive of CSS.

Digesting that is taking CSS more seriously than most people take learning new programming languages...which is appropriate! Because with CSS, you not only need to learn the language, you are effectively learning something like a language and a framework at the same time. Lots of folks learn the language minimally, piecemeal, on an "as needed basis," and end up wasting a lot of time because they aren't aware of the larger features and how they can be fit together.

Most folks do the equivalent of learning about goto statements, variable declarations, and arithmetic operators, and figuring you have everything you need to do good programming work.

Technically, you do have everything you need. And with a decade of work under your belt using those things, you can build some amazing and good robust systems. It's also easy to build total junk that nobody can understand but you. Perl, of course, is also infamous for having this quality.

Re: Things I wish I’d known about CSS

#202

Post by soperj » Fri, Jul 17, 2020, 3:45 PM UTC

theelous3 wrote: post #141

k__ wrote: post #126

It always helped me to do an absolute basic concepts course on a new technology I learn. Like, sure I can play around in Photoshop or Eclipse or CSS or JavaScript and find most things. But a good 101 course is worth so much saved time. Most of the stuff in that article was mentioned in a CSS box model course I did 10 years ago. People were always baffled how I learned all this. Well, I read the docs! They always assu…

Cobbler here, currently cobbling a frontend (am a backend dev by trade). The issue for me is the format these courses and resources take. CSS is the most jam packed with non-intuitive technology I've met. How many dozens of pages or segments of video would I have to go through in a course to learn what the author in OP summarised in two or three sentences? Any time I've considered the structured approach for somethin…

> Behold, 8 zillion words and symbols across 7 trillion seemingly randomly organised boxes full of both all of the information, and simultaneously none of the information, about css grids.

It's interesting, because that's my go to resource for CSS Grid. I find it super handy when I forget something. Although, I'm not learning grid, I'm using it.

Re: Things I wish I’d known about CSS

#203

Post by onion2k » Fri, Jul 17, 2020, 3:49 PM UTC

Someone1234 wrote: post #164

onion2k wrote: post #21

Earlier quoted context omitted.

Just use flexbox (and grid if you need to control both dimensions at once). You can ignore all of the old ways of doing layout. Flexbox is supported back to IE11.

> Flexbox is supported back to IE11. Nope. An incompatible and broken version of Flexbox is supported in IE11. Therefore, layouts look completely different (and broken) when rendered in it. Only people who recommend Flexbox in IE11 haven't tried using it in IE11. I might via a library that did the heavy lifting for me, but there's just too many bugs to recommend anyone write Flexbox and expect it to just work -- it w…

I write a fairly substantiate app (60,000 DOM elements...) that uses flexbox and SVG for all the rendering and it's fine in IE11. The layout problems are more often SVG related. That said, if you don't need to support IE11 it's much easier not to.

Re: Things I wish I’d known about CSS

#204

Post by IggleSniggle » Fri, Jul 17, 2020, 3:50 PM UTC

jb3689 wrote: post #181

CSS is such a weird abstraction. Who thinks in blocks and inline blocks? Who thinks in paddings and margins? Floats, etc? I know these are more flexible, but I've always found grid-based frameworks to be far more intuitive

Dear lord it's 2020 CSS has its own grid system, it's CSS Grid, and it's both easier to understand and more flexible than adopting the old frameworks. It also has variables, pseudo-selectors (which, like with html elements, you can invent new ones to suit your purposes), and more.

Re: Things I wish I’d known about CSS

#205

Post by runarberg » Fri, Jul 17, 2020, 3:51 PM UTC

Sharlin wrote: post #198

jb3689 wrote: post #181

CSS is such a weird abstraction. Who thinks in blocks and inline blocks? Who thinks in paddings and margins? Floats, etc? I know these are more flexible, but I've always found grid-based frameworks to be far more intuitive

CSS is a very reasonable abstraction for the job it was originally designed for: layouting of mostly textual documents. As such it borrows its concepts from the desktop publishing world. Margin and padding make absolute sense when you think in terms of headings and paragraphs. Float is an established term for having text flow by an image or other rectangular insertion. And so on. You have to remember the context in w…

CSS has very much caught up for layouting and styling web applications. If you don’t believe me, take a look at CSS grids.

Re: Things I wish I’d known about CSS

#206

Post by gklefnbkon » Fri, Jul 17, 2020, 3:51 PM UTC

People really didn't know this? To be clear, I'm not criticizing anyone for not knowing this stuff, as nobody can be expected to know everything (and everyone was a beginner at one time). I'm just surprised that within this community, where a lot of us are employed to build websites, that the basics of CSS are still a mystery to so many of us. And I don't think that's the fault of any individual. But clearly our industry has a problem.

Granted, if you spend most of your time on the backend, and only dabble in CSS a little bit, or you're new to web development, it's completely understandable to be fuzzy on the specifics of CSS. But that doesn't explain all the comments from designers and front end people. So what's going on?

One possibility is that CSS is too difficult. Maybe? It certainly has it's flaws. And it was harder to use in the past. But I don't think there's a huge learning curve to understanding the difference between padding and margin, or between block and inline elements, is there? Don't we do that sort of thing in Word documents regularly?

Another possibility, then, is that the mental model of a document doesn't match the designer's expectations. But I don't think this alone explains why so many of us struggle with CSS. It's true that many of us are trying to make applications on a platform meant for documents. It's also true that magazine-style page layouts aren't a natural fit for a Word-like model of document editing. But the features described in this article don't seem related to that discrepancy - I can't see how ignorance about nth child or rem units relates to the mental model of documents.

Here's what I think is happening: We spend too much time building new tools and not enough time learning the tools we have. I've seen this with javascript as well. There were some recent posts here about vanilla javascript, and comments from React developers were surprised by some of the things JS could do on it's own. Now React has it's place of course, just like how CSS frameworks have their place. But I see a lot of people using these things as a boilerplate, instead of using them where appropriate. And thus, we don't take the time to learn how to do stuff with just HTML, CSS, and JS.

And granted, I don't think everyone needs to know that, just like how not everyone needs to know assembly. But if not enough people understand what's going underneath the hood, then the default response to any limitation is "abstract more" and everything grows more and more bloated.

I'm not sure how we solve this. I suspect the time pressures of our industries incentivize building things quickly, which leads to this problem. Another possibility is that the browsers take too long to adopt new standards, which leads people to seek out workarounds.

Has anyone here thought about this? Any ideas on what we should do? I think the linked article is a good start. The explanations of CSS properties is very clear, and I like the examples.

Re: Things I wish I’d known about CSS

#207

Post by Sharlin » Fri, Jul 17, 2020, 3:53 PM UTC

runarberg wrote: post #205

Sharlin wrote: post #198

Earlier quoted context omitted.

CSS is a very reasonable abstraction for the job it was originally designed for: layouting of mostly textual documents. As such it borrows its concepts from the desktop publishing world. Margin and padding make absolute sense when you think in terms of headings and paragraphs. Float is an established term for having text flow by an image or other rectangular insertion. And so on. You have to remember the context in w…

CSS has very much caught up for layouting and styling web applications. If you don’t believe me, take a look at CSS grids.

Yes, I know. But the OP was talking about the classic stuff.

Re: Things I wish I’d known about CSS

#208

Post by pantaloony » Fri, Jul 17, 2020, 3:53 PM UTC

dahfizz wrote: post #199

pantaloony wrote: post #152

Earlier quoted context omitted.

Notably, I doubt you could get family healthcare coverage in the US that reduced your financial risk as much as France’s does for under $25,000/yr. Even at that rate I bet your exposure’s still worse.

> I doubt you could get family healthcare coverage in the US that reduced your financial risk as much as France’s does for under $25,000/yr. I'm not so sure. It looks like the average liability for a family (12 monthly premiums plus deductable) comes in at just under $23k[1]. That's the max the average family would pay. Obviously for just a single person total liability is a lot lower. So for a person like me who mak…

Wow, that’s... much cheaper than I’ve seen. In my non-coastal middling-wealth state, you’re looking at $1500/m for an HSA family plan that still leaves you with tens of thousands in risk per year, and reducing that risk gets expensive fast (often it’s even worse, and you end up guaranteed to pay more per year than you might pay if something goes wrong under one of the cheaper plans)

Re: Things I wish I’d known about CSS

#209

Post by pantaloony » Fri, Jul 17, 2020, 4:02 PM UTC

amINeolib wrote: post #113

speedgoose wrote: post #40

Earlier quoted context omitted.

The US salaries in IT are huge, but you need to take into account that they have to pay a lot to have a quality of life comparable to what a minimum wage worker is getting in west Europe. If you have a few kids, I would bet you are not that bad in UK with one fewer digit.

In the United States, you can spend 6k on health insurance and 12k out of pocket for unlimited family health care. So as long as a US job pays 18k more, it's pretty similar. People talk about vacation, but my job pays so much I'll take months off between contracts. (Engineering) Also it's hard to compare lifestyles in the US vs Europe. Homes in the US are gigantic, often newish, and have Air Conditioning. Cars in the…

> In the United States, you can spend 6k on health insurance and 12k out of pocket for unlimited family health care.

Where? How? I... this total is about what I’m seeing for shit-tier covers-nothing insurance. Like, there are plans out there that are HCA non-conforming and not that far under $18k/year just for the premiums. Who do I talk to to get total max healthcare spending of $18,000 without an employer-provided plan, in the US? Who’s offering $12,000 annual max-out-of-pocket family plans for $500/m?

Re: Things I wish I’d known about CSS

#210

Post by nwallin » Fri, Jul 17, 2020, 4:03 PM UTC

k__ wrote: post #126

It always helped me to do an absolute basic concepts course on a new technology I learn. Like, sure I can play around in Photoshop or Eclipse or CSS or JavaScript and find most things. But a good 101 course is worth so much saved time. Most of the stuff in that article was mentioned in a CSS box model course I did 10 years ago. People were always baffled how I learned all this. Well, I read the docs! They always assu…

> I always have the feeling people just cobble around for too long and should instead take at least a few days for a more structured learning approach.

There are two kinds of documentation: there's a list of all the individual things you can do, and there's a "The fundamental abstraction is this". The second is rare, and rarely done correctly, and much more important.

A lot of people assume that X is like Y, but with Z, and they know Y, so they just need to learn about Z. A lot of time that isn't true, the fundamentals are different. The natural way do perform W in Y might be profoundly wrong in X. Examples:

* git is like subversion, but distributed.

* C++ is like C, but with classes.

* C++ is like Java, but you have to remember to delete stuff.

I love git. I love C++. I think these things are the bee's knees. They're so simple and elegant. But I totally understand how people think they're arcane eldritch horrors when you're holding the sword by the pointy end.