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

Things I wish I’d known about CSS

cssfordesigners.com

Post reply on HN
Print view View original

121–130 of 340 posts

Re: Things I wish I’d known about CSS

#121

Post by jitendrac »

mellow2020 wrote: post #100
dgb23 wrote: post #98

Earlier quoted context omitted.

Have you ever taken some deliberate time to really „play“ with those? My recommendation: take a calculator or spreadsheet and start with some simple cases and build up your knowledge in a exploratory manner. A few hours, a session for each feature (flex, grid). Its not only fun but also really helpful!

> Have you ever taken some deliberate time to really „play“ with those? I know just the thing! https://flexboxfroggy.com/ https://codepip.com/games/grid-garden/

Thanks, froggy was on front page of HN so I knew it for sure, grid garden is new one for me.

Re: Things I wish I’d known about CSS

#122

Post by Izkata »

continuational wrote: post #13

> 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?

There's no date on the article, and this was the entry that made me wonder if it's 5+ years old, back when text zoom was more prevalent. When full zoom became the default, em/rem became less necessary, and at least to me appear to be falling out of favor as extra unnecessary complexity.

(Quick edit: Mentioned but not really given much focus is that em/rem can be used on, say, image width and margin, as well - making it adjustable in a text-zoom world. That's mainly what I have in mind here.)

(Even aside from affecting non-text, in the newly popular component-oriented design, you typically don't want relative font sizing to leak between components.)

Re: Things I wish I’d known about CSS

#123

Post by erichurkman »

gorgoiler wrote: post #63

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.

A true CSS+HTML-powered print renderer is PrinceXML. https://www.princexml.com/samples/

Having used it for over a decade, it's a wonderful tool.

Re: Things I wish I’d known about CSS

#124

Post by earthboundkid »

pansa2 wrote: 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 use of element selectors should be (mostly) limited to resets.

Re: Things I wish I’d known about CSS

#125

Post by Kiro »

Kiro wrote: post #50

> But that won’t provide a great user experience, particularly for users who resize content at the browser level or zoom into content. What browsers zoom dynamically nowadays? When is this actually an issue?

What I mean is that browsers used to zoom in a way where all the texts were automatically resized but nowadays the zoom works pixel-by-pixel, removing this issue.

Re: Things I wish I’d known about CSS

#126

Post by k__ »

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 assume every one learned like them, by trying stuff out all of the time, until they got something working. Then they iterate from project to project, until they sorted out the bad ideas and kept the good ones. With that approach, learning CSS would probably have taken me 10 times as long.

Sure this doesn't teach you everything or makes you a pro in a week, but 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.

What I didn't learn about CSS in a basic course and what cost me multiple weeks to fix, was `pointer-events: none`. Keep this in mind when your clicks stop working after you pulled some new CSS ;)

Re: Things I wish I’d known about CSS

#127

Post by tr1coder »

bigmanwalter wrote: post #93
miiiiiike wrote: post #75

Earlier quoted context omitted.

Last year. Around November and 91% unprefixed usage ( https://caniuse.com/#search=display%3Agrid )

CSS Grid has only been widely supported for a couple years now. Not so hard to believe a frontend dev was still using bootstrap grid.

The inexcusable fact here is that he said that he didn't know how it works. A font-end developer not knowing grid is not worth 6 figures.

Re: Things I wish I’d known about CSS

#128

Post by ibdf »

miiiiiike wrote: post #75
PetahNZ wrote: post #72

Earlier quoted context omitted.

But when was this? CSS grid has only really been viable for a few years in terms of significant browser support.

Last year. Around November and 91% unprefixed usage ( https://caniuse.com/#search=display%3Agrid )

Too bad you had a bad experience with your dev, but seriously, you just picked up css, people have been fighting it for years because of browser support. There's a reason why there are css reset stylesheets, and frameworks out there. If you are using it in one project great, but when you do it for living you will ended up building your own framework if you are not already using one. SASS also saves you so much time in development.

Re: Things I wish I’d known about CSS

#129

Post by Izkata »

nanna wrote: post #64
wruza wrote: post #55

Guys we need to talk. Are you capsbold serious? These are things that you learn in a first week of doing web development tutorials. I read this thread and it makes me think that I'm delusional because of a heat wave. Margins collapse? :focus exists? Me not getting a joke? I don't understand.

I think you may be underestimating the fact that many people have been writing CSS for well over a decade now, and that it has evolved considerably since they first read a web development tutorial. If you've not been paying close attention (or not been able to), there are many things that will have passed you by. It's a blessing to learn css fresh today, in as much as it's a curse to still have practices from ten yea…

> and that it has evolved considerably

GP is pointing out the parts that haven't changed at all, and are old (over two decades), simple, and common enough to be considered basic knowledge. I had the same reaction to those and one or two others.

Now if this was someone relatively new to CSS I'd understand, but the opening paragraph establishes how long this person was around. Padding-vs-margin in particular was necessary knowledge to do good layouts back in those earlier days (less so now only due to flex and grid, which aren't on here).

Re: Things I wish I’d known about CSS

#130

Post by benhurmarcel »

mroset wrote: post #41
ChrisRR wrote: post #36

Earlier quoted context omitted.

Six figures? In the US? Sometimes I wonder why companies even pay developers so much in the US. I'm a specialised medical embedded software developer in the UK and I'm not even halfway to six figures, and will likely never hit it. It astounds me that companies don't hire twice as many non-US developers for the same price and get more work for their money. Note, I'm not talking about outsourcing to the absolute cheape…

For context: I'm an American who's currently working as a software engineer in France (for a French company). I agree that engineering salaries are much higher in the US than in Europe and other non-US countries, however it's worth considering that there are additional expenses to hiring in other countries. My french salary is ~30-40% lower than I was making in the US. However, my cost to my employer is nearly as hig…

Here is an official simulator for France: https://mon-entreprise.fr/simulateurs/salaire-brut-net

It's not 100% accurate (the exact amounts depend on many variables) but gives a good idea. For example, a cost to the employer of USD 100k (87460€/year) gives a before-taxes salary of USD 70.5k, and a salary after all taxes of USD 47k.

Post reply on HN