Live data from Hacker News

Things I wish I’d known about CSS

cssfordesigners.com

161–170 of 340 posts

Re: Things I wish I’d known about CSS

#161

Earlier quoted context omitted.

Isn't $70.5k USD around €61k EUR?

You're right, I mixed up. I edit it. Still, €61k isn't an average salary. An engineer reaches that after about 10-15 years (from personal experience and some statistics I have access to). It's double the national median.

Wow, that's just crazy to me. It makes sense with the much stronger safety net, it's just a shock.

How does rent and food costs compare to America, do you know?

Re: Things I wish I’d known about CSS

#162
post #114

> If your CSS reset doesn’t include this already, I’d suggest adding the following rule: ... If I'm trying to build a site design from scratch (rather than using Bootstrap or similar), is a CSS Reset a good place to start? Is there one in particular that's recommended?

Yes. There are different philosophies for how to write CSS, but assuming you're aiming at something like BEM (Block, Element, Modifier) style, it's typical to start with a reset of the raw elements into a standard form, and then follow that with the CSS for you class components, and finally some !important override utilities. Basically all the CSS philosophies agree that you should never use #id selectors at all and…

Ignore all above is you are not keen to go the path of cargo-culting. Most of those philosophies were brought to you by people who were too lazy to learn CSS.

Re: Things I wish I’d known about CSS

#163

> Using pixels (px) is tempting because they’re simple to understand: declare font-size: 24px and the text will be 24px. But that won’t provide a great user experience, particularly for users who resize content at the browser level or zoom into content. Pixels (px) in CSS are relative as well, and scale with zoom. What is the benefit of em/rem?

"Relative" and "Absolute" have their own definitions and by that definition "px" is indeed an absolute unit.

Re: Things I wish I’d known about CSS

#164
post #21
post #17

Useful article. Getting started with CSS must be harder these days than it was 15-20 years ago. Not only for mobile-friendliness, but also because of the coexistence of flexbox/grid/traditional layouts. I'm wondering if the standard will ever been simplified, instead of being added more and more features.

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 won't/doesn't.

PS - I'd link all the IE11 Flexbox bugs but Microsoft took them offline with Microsoft Connect's retirement.

Re: Things I wish I’d known about CSS

#165
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…

100% agree. I found this to be a good guide: https://developer.mozilla.org/en-US/docs/Web/CSS

After spending a few hours reading up on topics I thought would be relevant, I find that I am significantly more productive with CSS. Instead of trying to find answers on google, I find that I’m better equipped to build things and diagnose issues on my own.

Re: Things I wish I’d known about CSS

#166

Earlier quoted context omitted.

You're right, I mixed up. I edit it. Still, €61k isn't an average salary. An engineer reaches that after about 10-15 years (from personal experience and some statistics I have access to). It's double the national median.

Wow, that's just crazy to me. It makes sense with the much stronger safety net, it's just a shock. How does rent and food costs compare to America, do you know?

Even with the stronger safety net, it doesn't make up for the difference compared to the US for well-paid employees (such as engineers, or tech in general). US employees are much more well-off, there's no denying that. US levels for engineers compare more to Swiss level of living.

However the safety net is much more beneficial for less-paid people, at a relatively low cost for them.

I only visited the US so others might be able to provide a more detailed comparison. It seems to me that rent is generally significantly higher in US cities (might be different in lower CoL areas), and groceries and other smaller budgets were slightly higher in France (restaurants, tech purchases, cars…).

Re: Things I wish I’d known about CSS

#167
post #17

Useful article. Getting started with CSS must be harder these days than it was 15-20 years ago. Not only for mobile-friendliness, but also because of the coexistence of flexbox/grid/traditional layouts. I'm wondering if the standard will ever been simplified, instead of being added more and more features.

“Getting started with CSS must be harder these days than it was 15-20 years ago.”

Not like I’m teaching anyone these days, but I’m not sure about that. Yes, there’s just more now. Grid and flexbox and transforms and on and on.

But if you were totally starting from scratch, certain stuff is just way easier now, or at least, not a pile of hacks upon hacks. Basic beginner stuff that comes to mind…

• How can I center something vertically and horizontally without having to explicitly know the size of the container and object to be centered?

• What is all this float stuff, how do I just make a grid of icons?

• Wait, borders fundamentally change the size of my div? What?

• I have to do what now to have a drop shadow?

• How do I keep my branding colors consistent without having to make really sure I plug in the right hex values in every little color declaration?

Re: Things I wish I’d known about CSS

#168

It feels like HTML and CSS could be useful for print layout, but I’ve rarely seen a high quality PDF renderer. I know Atom’s markdown preview uses headless chrome under the hood. These are hugely heavyweight tools but the output is very high quality. Are there any other recommended tools for going an HTML route, for typesetting? I’d much rather design pages that way than use InDesign, PDF scripting, or TeX.

I use wkhtmltopdf without much issue. Sure, it has some limitations and is built around an older html rendering engine, but it works well for a free tool.

I use it mainly via the wicked_pdf ruby gem and I'm sure there are wrappers available for other languages too.

Re: Things I wish I’d known about CSS

#169
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…

Couldn't agree more. I had less issues learning multiple programming languages,some challenging concepts around them and yet when it comes to CSS, most resources aren't very useful. You do something and it doesn't work. You check documentation and it show exactly the same thing that does work. 5 hours later it turns out it was some overriding property+ browser incompatibility+ weird undocumented exception. Very few books do deliver on their promise either. I don't know,maybe it's just me but the whole ecosystem is a bit weird.

Re: Things I wish I’d known about CSS

#170
post #114

> If your CSS reset doesn’t include this already, I’d suggest adding the following rule: ... If I'm trying to build a site design from scratch (rather than using Bootstrap or similar), is a CSS Reset a good place to start? Is there one in particular that's recommended?

It can be a very helpful start, but I'd review to make sure you're learning from it as well, rather than building onto something that could set you up for confusion later if you end up working without it. Here's one that's popular, lightweight, and helpful in my experience: https://necolas.github.io/normalize.css/

Definitely review multiple, because I find normalize.css to be pretty useless as it doesn't set `box-sizing: border-box;`, or `img { max-width: 100%; }`
Post reply on HN