Now is a really good time to learn. This is because CSS has been done spectacularly badly to date and very few people have taken time to learn how to effectively use much of what has arrived in the last couple of years. Therefore you don't have to learn the bad stuff, you can get stuck in with the better ways of doing it.
I have watched the talk that goes with this post and I think that this is useful to better understand where Laura is coming from. She has gone deep reading the code for implementing the 'cascade' and you have to give her credit for getting people talking.
However, in the article there is some idea of solving responsiveness. There is a better starting point and it is this - CSS variables.
In the olden days people would have one chunk of common CSS and then media queries that would have other chunks of CSS in them. The better way is to only have CSS variables in media queries and then to have all the style declarations use the CSS variables. In this way you can have maintainable CSS where it is clear to see what changes.
An example, if you have an image in a figure then you might want it to appear on the right hand side in a desktop layout and full width on mobile. So in the root element of the CSS you can define --my-figure-grid-column as 1 and then in the media query for desktop you can then set the variable to 2. Then in the style rule for the image you can have grid-column: var(--my-figure-grid-column). If you review the code a few months later and decide you want the image on the left you can see what is going on and what you need to change. With old CSS you would probably decide to just bolt yet more style rules to the bottom with !important to hack it good.
CSS Grid is a good place to start, this is the new layout engine and it works in 97% of used browsers. If you start from content with sensible HTML5 elements instead of 'div soup' and make it responsive with CSS Grid and CSS variables then you will have as much fun as a kid with LEGO.
There are a few other things on starting out, one being to forget about pixels and percentages. Go with ems and 'vh/vw/vmin/vmax' instead. Document structure matters too, if you are using CSS Grid then you don't need the div tags or the spans. You also don't need the clutter of many classes added to every div. So maybe strip your webpage back to bare content, burn the existing CSS and any 'reset.css' type of files that are there for Internet Explorer 6 related reasons. Get the page structured with the HTML tags of header, main, footer, article, section, aside, nav, figure and the ones you know already for doing lists. Then get it looking good on all browsers with CSS Grid with layout problems solved with CSS variables. You can then move on to the more decorative things.