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

281–290 of 340 posts

Re: Things I wish I’d known about CSS

#281

Post by jraph »

runarberg wrote: post #280
jraph wrote: post #264

An element that has: display: inline-block is inline outside, block inside. That is, the element is inline for the containing block, but its children feel like they are in a block. An inline-block element can be vertically aligned with respect to the baseline: it acts a bit like a character in a paragraph. That's why you can vertically center things using vertical-align:center on an inline-block element. At least, th…

To be even more pedantic: It is inline outside and flow-root inside. From MDN: > The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies. https://developer.mozilla.org/en-US/docs/Web/CSS/display-ins...

Ah but then it does not work as a mnemonic anymore!

I'm kidding. Thanks, TIL I learned that with now have display-inside and display-outside (and flow[-root]). This makes perfect sense. Finally, even, I'd say. Having a property that defines both the behaviors of an element outside and inside without being able to define these behaviors separately was both strange and limiting. I'm happy I even used the terms that have been chosen to speak about these notions in CSS by chance.

How do you track all these useful additions to CSS conveniently though? I can't rely on random comments on HN to learn about them by chance (no offense intended to your valuable comment btw, being random is perfectly fine). I also can't possibly systematically learn about each and every addition neither. Are there resources addressing this?

Re: Things I wish I’d known about CSS

#282

Post by runarberg »

techbubble wrote: post #81
_the_inflator wrote: post #33

Earlier quoted context omitted.

CSS and HTML are constantly evolving, and so its demands. However for me CSS is way more straight-forward than in the 90th and 00th. The standards addressed a lot of the pains and struggles we had with floats/clearfix etc. This was challenging but nothing im comparison to supporting IE 6-9, FF, Safari, Opra etc. at the time. Also hacking in JavaScript added to the complexity. Nowadays I can do with 10 lines of grid a…

"div soup" – I like that. The present-day CSS frameworks use "class soup." For example, tailwind (which I like):

This sort of class soup brakes the principal of DRY. Much better to use CSS to style.

    button {
      --background: teal;
      --focus-ring:
        2px 2px 5px skyblue,
        -2px -2px 5px skyblue;

      background: var(--background);
      box-shadow: none;
    }

    button:hover {
      --background: wheat;
    }

    button:focus-visible,
    button:focus:not(:focus-visible) {
      outline: none;
    }

    button:focus-visible {
      box-shadow: var(--focus-ring);
    }
Now you will never forget to add that `hover:bg-teal-600` class to your buttons.

Re: Things I wish I’d known about CSS

#283

Post by commandlinefan »

nwallin wrote: post #210
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 wit…

> there's a "The fundamental abstraction is this"

In most cases, I'd settle for "what problem this is trying to solve" (although this is obvious for CSS, it isn't nearly as obvious for things like React and Vue).

Re: Things I wish I’d known about CSS

#284

Post by irrational »

andrewmcwatters wrote: post #270
cookiengineer wrote: post #267

Meanwhile, this is, oh so damn outdated. (I'm not kidding) Most people don't know that the flow model totally changed meanwhile, and something like "display: inline-block" actually means "display: inline flow-root", everything that came after flexbox kind of had an influence to the meanwhile borderline insane display model as a result. Everything related to inset, margin and padding has gotten an overhaul that is rea…

I'm a layout implementor for Planimeter's Grid Engine. Implementing a naive subset of the algorithm for calculating the box sizes in the visual formatting model and calculating layout for normal flow, relative positioning, and absolute positioning is far easier to implement than flexbox.[1] There's nothing insane about this. And you'll learn even more when trying to draw to the screen. Normal flow also doesn't requir…

What are your thoughts on CSS Grid? Does it require multiple passes?

Re: Things I wish I’d known about CSS

#285

Post by commandlinefan »

kccqzy wrote: post #273
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 totally agree. A good book that introduces CSS in a methodical perspective is a must. I personally cut my teeth on CSS with the book Web Design in a Nutshell , a 2006 book. I remember having written CSS in a haphazard try-and-see fashion before that, which utterly confused me, and then reading an actual book made everything clear. This is an investment worth making. Many years later I'm still almost always "the guy…

> A good book

One under-appreciated value that actual books have over online documentation is that you know immediately what order you're supposed to read them in.

Re: Things I wish I’d known about CSS

#286

Post by runawaybottle »

ChrisRR wrote: post #88
runawaybottle wrote: post #57

Earlier quoted context omitted.

There is probably more to the story here. If you’re only at about 50k, you’re making $24 an hour. There’s even cheaper labor than you. It’s going to be a disgusting race to the bottom if we start paying everyone 20, 18, 15 ... dollars an hour. At this point in my life you would have to pay me around six figures for me to do CSS seriously on a daily basis (and it’s likely I’ll still burn out and leave). The cross brow…

If you think CSS is tedious, then you've never dealt with medical device regulations. cross browser testing will seem like an absolute breeze. If a UK employer were paying £90k for CSS, absolutely everybody and their dog would be applying for a job that pays double a typical dev salary. I think we've already experienced the race to the bottom and come out the other side, with $24 being fairly average for the world an…

Should we go lower than 24 dollars? Sincere question.

If not, never ever show bitterness for your fellowship that brought honor to the profession, wherever they are.

I hope never to see developers disrespected that way, anywhere in the world.

Re: Things I wish I’d known about CSS

#287

Post by commandlinefan »

miiiiiike wrote: post #65
jb1991 wrote: post #31

Yikes. I've been earning 6 figures as of about two years ago doing mostly HTML and CSS UI design for a bank. And I still did not know about many of these! I guess they are things I wish I'd known about CSS! Better late than never I guess.

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…

> I've never met a CSS Person who has read a book on CSS

I'm not a CSS person, but I've read three (including CSSTDG) and I still can't do anything useful with CSS.

Re: Things I wish I’d known about CSS

#288

Post by runarberg »

jraph wrote: post #281
runarberg wrote: post #280

Earlier quoted context omitted.

To be even more pedantic: It is inline outside and flow-root inside. From MDN: > The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies. https://developer.mozilla.org/en-US/docs/Web/CSS/display-ins...

Ah but then it does not work as a mnemonic anymore! I'm kidding. Thanks, TIL I learned that with now have display-inside and display-outside (and flow[-root]). This makes perfect sense. Finally, even, I'd say. Having a property that defines both the behaviors of an element outside and inside without being able to define these behaviors separately was both strange and limiting. I'm happy I even used the terms that hav…

I recommend taking the State of CSS[1] survey, it is a nice way of keeping up with the latest features. Other then that I use PostCSS with the postcss-preset-env[2] plugin. There you can enable various future features of the language and have it compile down to a more supported version. If your really want to dive into the future of CSS you can read the issue board for the CSSWG[3] (beware, it can suck hours out of your days). Smashing Magazine[4] and A List Apart[5] also sometimes have articles about a new(ish) or upcoming features.

But the CSS community could really benefit from the spec maintainers having more active bloggers among them (e.g. like Rachel Andrew[6]) and provide a regular update of the language like 2ality does for JavaScript[7].

1: https://stateofcss.com/

2: https://preset-env.cssdb.org/

3: https://github.com/w3c/csswg-drafts

4: https://www.smashingmagazine.com/

5: https://alistapart.com/

6: https://rachelandrew.co.uk/

7: https://2ality.com/2019/12/ecmascript-2020.html

Re: Things I wish I’d known about CSS

#289

Post by c-smile »

irrational wrote: post #284
andrewmcwatters wrote: post #270

Earlier quoted context omitted.

I'm a layout implementor for Planimeter's Grid Engine. Implementing a naive subset of the algorithm for calculating the box sizes in the visual formatting model and calculating layout for normal flow, relative positioning, and absolute positioning is far easier to implement than flexbox.[1] There's nothing insane about this. And you'll learn even more when trying to draw to the screen. Normal flow also doesn't requir…

What are your thoughts on CSS Grid? Does it require multiple passes?

If the question is about layout computation then CSS Grid layout (and ideally layout) is a typical LP task [1].

And there are known way of solving these things, e.g. simplex methods or Cassowary constraint solver (CCS)[2] will work.

In fact flexbox layout is a particular case of LP task and also can be solved by CCS efficiently.

[1] https://en.wikipedia.org/wiki/Linear_programming [2] https://en.wikipedia.org/wiki/Cassowary_(software)

Re: Things I wish I’d known about CSS

#290

Post by [deleted] »

larrik wrote: post #177

> Notice how it’s the odd-numbered rows with a background? Given our selector (p:nth-child(even)), we might expect the even-numbered rows to be highlighted instead. OR it counts rows from zero instead of 1, rather than all this about siblings...

[deleted]
Post reply on HN