I too have worked with many front-end developers that were book and spec averse who preferred to gather lore from various gurus in three paragraph blurbs.

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 dismissive of it. By the way I became a frontend developer after I spent many years as a backend dev. My background is in Php and Perl.

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.

> Have you looked at Definitive CSS? It's up to date ...

Not really, it doesn't talk about custom properties, inline svg, how to style them, etc. All very useful these days, if you want to allow color theming for your web app and not use hacks like custom fonts for icons...

And custom properties are around since 2014 at the very least.

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

This is what’s beautiful about the frontend. It’s “magic” and underneath in code speak it may be ugly but the work speaks for itself. Arguably that is only if you own it and maintain it.

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

The way I see it, learning about all the ingredients in a recipe will not teach you how to cook. In css techniques are unearthed by a small handful of css artisans and it’s not about learning css itself in 99% of the cases. It’s about digging and finding the best ideas on GitHub, stack and codepen. And hacker news.

Or, you know, using a well vetted, well organized resource that has already done all the digging and collating of techniques and organized into a well structured Definitive Guide.

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

Ha!

Front end development is a craft, just like other crafts. People need to treat it seriously if they expect to be taken seriously and be paid accordingly. (BTW, if you still haven't met a FE dev who's ever read a book on CSS, you have now. I own quite a few AND have read them.)

I also think a lot of the value from a front end developer comes from their ability to merge the technical requirements with a designer's vision, and produce a product that is at the same time usable, accessible and (bare minimum) meets the technical requirements.

Not going to touch the CSS Grid except for two quick comments:

- they absolutely should have been keeping up with CSS Grid, where it was at, and when it was usable and when it isn't

- it is still an open question, because although the overall numbers should 90+% available in browsers, you have to check your own stats. For example, the stuff I work on is often used in Enterprise environments, so IE11 is a requirement (yes, we know our numbers, it is, it could literally cost us 6 figure sales if we don't have support for it). We are using CSS Grid, but we have to be very careful what we use it for and to test those uses in IE to make sure the old Grid spec in IE supports the things we do it with. Otherwise it's back to Flex or other layout techniques. It's not a silver bullet, but I also recognize that is becoming a more unique example these days.

Those are the kinds of things a good FE dev should know though, IMO, and be able to articulate.

Plus, FE devs also need to know HTML and semantics, accessibility, and of course, Javascript. When you can put that all together along with the skills earlier re: usability and accessibility, then you can justify the higher salary brackets.

I think this is a culture problem in fornt end dev in general. Front end devs learn frameworks, not technologies. It's very much focused on getting started as quick as possible instead of taking the time to read and understand the tech they are working with. Even though, as your story shows, you can get things done quicker when you know what's going on.

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)

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.

I disagree, as both an engineer and a manager.

CSS grid is only recently becoming a reasonable tool to use in practice. I don't think any of the top 1% of front end engineers I know would be able to use CSS grid without looking at the documentation.

Based on experience, the kind of person who would be able to use it from memory either 1) is very skilled AND had a reason to use it recently, or 2) someone of medium skill who just recently read the spec but in almost all other ways is less skilled than the people I mentioned in the first paragraph.

> I don't think any of the top 1% of front end engineers I know would be able to use CSS grid without looking at the documentation.

You probably don't mean it that way, but not having to use the documentation surely isn't a requirement for competency. I resort to the docs all the time, even with topics I'm quite famialiar and experienced with.

That depends on your company I guess. If your entry salary is, or is close to 6 figures then yeah. But if you pay that only for skilled developers _specializing_ in front-end then it is not too much to ask that they are up-to-date with their field.

I agree. It's fairly common for experienced front end devs who have been bitten by browser incompatibilities in the past to wait several years to adopt the latest CSS techniques. The "old techniques" often work very well.

Most likely if you had asked me "why flexbox and not CSS grid" I would have said "because flexbox is able to perfectly well support this use case, and I'd rather not introduce a dependency on a less well supported CSS feature unless I need to".

I personally tend to prefer using the oldest (within reason) CSS feature that lets me accomplish a task. Or I'll pick the one that best conceptually maps to the task I'm trying to accomplish, if there's a significant difference.

I used to work like that but CSS Grid is actually amazing. Highly recommended.

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.

Yes, one of the issues with people who've recently learned the 2020 version of JS/CSS/frameworkX is that they assume what they've learned is the correct way to do things according to "the best, latest standard". It's a variation of Dunning-Kruger almost.

As you said, experienced engineers have been dealing with CSS browser support issues for years, so as a habit try to avoid using the latest shiny new features.

Also, experienced engineers do refresh their knowledge from time to time, but you might have caught them between refreshes. Remember that these engineers are also working 40-60 hours per week producing work output in addition to periodically refreshing their skillset. And depending on the environment they've worked in previously they may not have had the ability to use the latest features of whatever technology. Maybe they were working on a legacy app that didn't support ES6, for example. That would be less common now in the days of Babel, but there was a time a few years ago when it would have been reasonable for a working JS engineer not to be familiar with every detail of ES6, as an example.

This might be one of the most helpful book recommendations I’ve ever read.

Thanks. If you'd like some more book and video suggestions I sent this to a friend back when she was looking to get into front-end development a few months ago:

Here are some book and video links (with Amazon affiliate tags snuck in). I've read all of these books cover-to-cover save for the RxJS one. They approach front-end as a set of technologies that should be understood and mastered rather than the "CsS hAckS to GET YoU pAiD!" style of most web tutorials.

Not sure where to point you with React but if you decide to use Angular or Vue I have some suggestions.

CSS/Sass:

"CSS: The Definitive Guide": https://www.amazon.com/CSS-Definitive-Guide-Visual-Presentat...

"Pragmatic Guide to Sass 3: Tame the Modern Style Sheet": https://www.amazon.com/Pragmatic-Guide-Sass-Modern-Style/dp/...

This Sass book has the best structure of any introductory tech book I've ever read.

"TypeScript":

Mastering TypeScript 3: https://www.amazon.com/Mastering-TypeScript-enterprise-ready...

"Programming TypeScript": https://www.amazon.com/Programming-TypeScript-Making-JavaScr...

RxJS: Reactive programming the most significant development in UI technology in 20 years. Once you get the hang of it managing asynchronous events (user generated, network generated, time based, etc) become a breeze.

"Build Reactive Websites with RxJS: Master Observables and Wrangle Events": https://www.amazon.com/Build-Reactive-Websites-RxJS-Observab...

RxMarbles - Interactive RxJS visulizations: https://rxmarbles.com/

Angular:

"Angular Development with TypeScript": https://www.amazon.com/Angular-Development-Typescript-Yakov-...

"Architecting Angular Applications with Redux, RxJS, and NgRx: Learn to build Redux style high-performing applications with Angular 6": https://www.amazon.com/Architecting-Angular-Applications-Red...

Videos:

I watched most of the Layout Land videos when I was getting a grip on the state of CSS. Jen Simmons is a developer advocate at Mozilla and has the best overviews I've seen.

Basics of CSS Grid: The Big Picture: https://www.youtube.com/watch?v=FEnRpy9Xfes

Using Flexbox + CSS Grid Together: Easy Gallery Layout: https://www.youtube.com/watch?v=dQHtT47eH0M

Thanks for sharing this list. If you happen to have any recommendations for pure JavaScript, I'd love to hear it. Otherwise, I'll probably take a look at the TypeScript recommendations and work my way through the material.