A podcast about building websites starring Dave Rupert and Chris Coyier. Development, design, performance, accessibility, tooling, a little bit of everything!

Subscribe on iTunes or RSS

Twitter:

368 Sacha Greif and the State of CSS

01:11:31 Download

Guests

Sacha Grief

Sacha Greif

Web // Twitter

Designer, developer, and entrepreneur.

Show Description

Sacha Greif joins us to talk about the recently published State of CSS survey for 2019. What were the results? What surprised us? What are our thoughts for the future of CSS? Plus a preview of the Syntax vs Shoptalk War of 2020.

Show Sponsors

Interested in sponsoring?

Time Jumps

Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about front-end Web design and development. I'm Dave Rupert and with me is Chris Coyier.

Chris Coyier: Hey, Dave! Statistically, I'd say we're at episode number… You know what? I'm not even going to say what it is because I think this might actually shuffle around a little bit, but we're getting up there in the 300s, so we should be very proud of ourselves.

Dave: We're cruising and heading to 400, 400 and something. Oh, my gosh.

Chris: Have we ever done a ShopTalk Show user survey? I don't know that we ever have. If we have, it was a long time ago and it was probably for advertising reasons. Sorry.

Dave: Very scientific too.

Chris: Yeah. Yeah. Anyway, if I had to guess, I'd say that a lot of you people out there like front-end Web design and development. Maybe 100%-ish, you know, if you're listening to this show. It would be weird to hate listening to ShopTalk Show because you just prefer back-end development. [Laughter]

Anyway, that's a weird intro, but we are going to be talking about surveys during this show because there was just recently done a very large survey about a chunk of the Web platform, my favorite chunk, I'd say, which is CSS. It was The State of CSS Survey 2019, because it was done at least one year prior, if not two. The person that kind of championed and put it all together--at least half of the team, right?--is Sacha Greif. Did I get that right? Sorry, I should have asked the pronunciation. Hey, Sacha.

Sacha Greif: Hey. Yeah, you got that right. No worries.

Chris: [Laughter] Good. It's great to have you on the show. Thanks so much for being on. Let's talk about this survey. We can talk about all kinds of stuff because you've been working on Web platform stuff forever, but this is the big thing that's out right now that's worth talking about, the state of CSS. Why did you even do it at all? Is it just fascinating to you to know?

Sacha: Oh, I did it for the money. That's all.

Chris: [Laughter] I'm sure.

Dave: Okay….

Chris: I'm sure people just poured money at you.

Sacha: Not really, no. I just mention that because I'm working on a case study right now where I'm kind of like open source our revenue, but it's not much - spoiler alert. I didn't do it for the money.

Chris: Well, you might sell a T-shirt or two. The T-shirts are really nice for it. But, yeah, I doubt that there is a--

Sacha: Yeah, I'm wearing the T-shirt right now to kind of give me a boost, mentally speaking.

Chris: [Laughter] It's a beautiful T-shirt.

Dave: The sign of the site is just beautiful.

Chris: Yeah.

Sacha: Oh, thank you.

Chris: The core of it is, it's over now. If you want to participate, just keep it in mind for next year. We'll hit you up on CSS-Tricks, for sure. I'm sure there are other ways to keep in touch with it.

Now, we're here to talk about the results of it because the results are in and there were over 11,000 responses. It's such a niche thing. If you look at the number 11,000 and you're like, "Ah, well, that's not that many," I'd say, "Hey, yeah, it is. That's a lot of people. That's very statistically significant for this big of a niche."

You might look at other surveys like, "Oh, well, the Stack Overflow has a billion, zillion people do it," or whatever, but there is nothing really about CSS in there. It'll just be like, "Do you like HTML and CSS? Yes or no." It's not telling us a heck of a lot about deep into the technology of CSS and this is. It really gets into specific features, specific libraries, and that type of stuff. This is, as far as I'm concerned, the only and best, really, dig into CSS technology specifically.

Anyway, tell us about it. Where did it come from? What's the idea?

Sacha: Yeah, so I need to correct you a little bit. It's actually the first year that we're doing The State of CSS.

Chris: First year.

Sacha: Before that, we did The State of JS, JavaScript.

Chris: Right. Same team. Same you, essentially.

Sacha: Yeah.

Chris: There's State of JavaScript, which a heck of a lot of people participated in, too, and that has been done for two years, right?

Sacha: Yeah, so State of JS started in 2016, so we've actually done the third edition in 2018 and then this year was the first State of CSS and it's going to be the fourth State of JS. Yeah.

Why do The State of CSS? Well, because The State of JS was getting so long, we had to remove the CSS section that we originally had. Then we figured out, well, it's still something we want to know about, so let's just make it its own survey because there's enough there to be its own survey and have its own results site.

I don't know if you guys have noticed, but CSS is growing up, I would say.

Chris: Certainly, yeah. I think people might even learn from the survey, kind of abstractly. We just had a show not long ago where we talked about how even pretty industry people, if you ask them, "How many HTML tags do you know?" that you'd be lucky to get over 20 even at a Web development conference, for example. It's just not that well known.

I'm putting CSS in the same bucket here. Sometimes people, even in the industry, don't realize how powerful and grown up a technology might be getting right under their feet. If you did this survey, you might be like, "What is all this stuff? What the heck is an exclusion? What is a variable font? What is that?" [Laughter] You might be learning about these things for the first time in the survey, so I guess it has a secondary purpose in that way. Anyway, I'll let you continue about the survey itself.

Sacha: Yeah. Just to talk about that, speaking for myself, I have been using CSS for over ten years. It's cool on the one hand because I have a lot of experience, but I think my knowledge tends to get a little bit stale. I think even if you do have a lot of experience, there are definitely going to be things where you just haven't had the time to catch up on them or it's not something that's on your radar.

I've heard of a lot of people who, even just filling out the survey, they learned something and started Googling new things and so on. Then looking at the data, the results, we've tried to put links. We've loaded descriptions and, basically, data from MDN, GitHub, and a few other places to really give people more context and kind of make it like a teaching tool as well and not just raw data.

Chris: Mm-hmm. Mm-hmm. Speaking of data, you've made every effort here to make it digestible, in a way, too, right? Of the 11,000 respondents, it's not like we have to pour over spreadsheets ourselves. In fact, you worked with somebody to kind of help you with that.

Sacha: Yeah, well, I was really lucky, also. I live in Japan, and my partner on The State of JS and State of CSS also lives in Japan. He's also a French developer, funny enough, named Raphael Benitte. He's a creator of a data vis library for React called Nivo.js.

I think I met him in 2017, so I had already done one edition by myself. I had really struggled for the charts. I think it was all just divs, so the charts were just rendered using CSS.

Chris: That's cool. He's the Nivo developer, huh? I remember seeing this for the first time and just being blown away by how cool it is. For the first time, it kind of clicked at how React can be this middleman technology, or really any JavaScript library. It makes sense when you see a chart element and have all the props for the chart element be the data and the control of how you want it to look and stuff. It's just like, gosh, this is great, you know, React. Is that what's in use here on this?

Sacha: Yeah, exactly. That's what we are using. His background, he's actually also a graphic designer first, but he really went deep into the data processing, data visualization side of things, so it was a really good match for me because I'm still fairly new at that, but I'm definitely learning a lot working with him and running the surveys.

Yeah, the first time we did it together was 2017 and then, last year, 2018, what was really cool is we had historical data for the first time, so we were able to show some trends on the last three surveys. You can see how React has evolved, Angular.

Chris: Right, right, that will be exciting next year for this to see how things changed.

Sacha: Yeah.

Chris: Yeah.

Sacha: For sure.

Chris: That's going to be great. You were even saying before this, it's like if anybody was trying to criticize you, they would be like, "Well, neither of you are trained data scientists," although you'd think, after four years of doing this, I don't know when you get your data scientist badge, but I think it's coming pretty soon, probably.

Sacha: Well, I think we have maybe a bit of a different philosophy compared to proper data scientists, basically. At least speaking for myself, since I'm not an expert in that field, I really tried to be as transparent as possible, so all our code is open source. We published the data for free. We haven't done it for State of CSS yet because we still need to process it, but the data for State of JS is available.

You know I try to answer questions and I'm really not trying to hide anything. I'm really trying to make the survey open so anybody can take it and we're not trying to select who we address it to. It's really kind of a community effort, I would say. Hopefully that, at least in part, addresses some of the criticism, like, if you don't like the way we're doing things, just let us know and we'll do our best to fix it.

Dave: I heard it was all funded by Facebook React … dark money, Web. I heard that.

Sacha: I wish.

[Laughter]

Sacha: Yeah, Facebook dark money people, get in touch.

Dave: Yeah, they can give you some libra, I guess.

Sacha: Oh, yeah.

Dave: They've got the new bitcoins.

Chris: The site itself kind of guides you through it. If you want to just read it, you can just read it top to bottom and then click next, next, next.

Right up front, it guides you through the demographics of it. That's probably smart so that you know, contextually, what the data is you're looking at, like, "Who answered this question?"

Sacha: Yeah.

Chris: You try to be up front, too, there and say that all these surveys that you do are connected to each other so that if you've taken State of JS, well, maybe you have their email address already and, thus, can get in touch and say, "Hey, why don't you take this State of CSS one too?" But if you're taking a survey of JavaScript already--I don't know--that might influence things a little bit, you were saying here. You're a JavaScript person already.

Sacha: Yeah. Yeah, I mean that's why we have the disclaimer. For example, I think it shows in the CSS and JS section; we have a fairly high usage for these technologies. Whereas, I think, in the overall community, they're still not that widespread.

The thing that stays true, I think, is when you ask people about their satisfaction. I don't think that would be biased as much. If you see--I don't know--let's say 50% of people are using Styled Components, that may be higher than average, but you can still see whether they like it or not and kind of make your technology choices based on that.

Chris: Mm-hmm.

Sacha: Then once the raw data is available, people can take that and kind of factor out the State of JS respondents, people who came through the other survey, and maybe that would be interesting as well. It's just something we didn't have time to do ourselves yet.

Chris: If we're painting a picture of who filled this out, you're very upfront. A lot of people came from previous surveys, word of mouth, and such. It's also predominantly male. You were pretty upfront about that too, like really staggeringly so, almost, but I guess that's just where we are in the industry sometimes.

Sacha: Yeah, well, I mean it's tricky because I think it was even more biased towards male for The State of JS survey. I think, in a way, it's weird because the community is making such an effort to give more visibility to minorities and women that it kind of paints a picture of things being better than they actually are. It's kind of, in a weird way, the more effort you make to fix the problem, the more the problem is hidden and then the worse it appears when you actually see data.

Chris: Hmm.

Sacha: There are kind of these two trends fighting each other. Also, I think, if you look at the community internationally, it's probably worse than if you limit it to the U.S. I don't have hard data on that. I don't think we made a country-by-country breakdown yet, but I suspect that the more--

Chris: That would be an interesting one to do. You probably should.

Sacha: Yeah.

Chris: Check it out.

Sacha: Yeah, we should do that. In a way, the more inclusive you are on the geographical level, the less inclusive you might be on some other variables. It's really hard to manage all that.

Dave: I think that's, I guess, a less understood thing. The scope of this is extremely global, and so the results might be a smidge different than our local scene or even our ideal scene, you know.

Sacha: Yeah.

Dave: In terms of diversity.

Chris: Salary wise, there's a big chunk in the 500 to 100,000 there, and then decent chunks on either side of that. It just way drops off at the 200,000 mark. Ain't nobody making 200,000 in this industry, apparently.

Sacha: That's the San Francisco salary.

Chris: Yeah, there are a couple of people in San Francisco, and that's it. [Laughter]

Dave: [Laughter]

Chris: The biggest chunk of people work five to ten years in the industry, but big chunks on either side of that as well. I guess if you made it 2 to 20, that'd be the bulk of this turn, but I guess that's to be expected. That's a huge range. Then the size of companies people work at is all over the map from one to a thousand. It's just all over the place.

It's really fascinating. In some ways, it's like if the diversity concern was, "Are these people representative of lots of different types of businesses and sizes of businesses?" that's all over the place. It's very diverse.

Sacha: Yeah, because that's a criticism we also had before like, "Oh, well, you say 90% of developers use React but, actually, in my company, we all use Angular, so I bet your developers are all freelancers," and so on.

Chris: Ah, sure.

Sacha: That's pretty valid, and so we wanted to make sure that we actually do have a representative audience.

Dave: I always have trouble answering this question. My company is three people, but sometimes we bring people in. Then the teams, the client I work with, they're actually a very big company. I always struggle. The NPM one too had this size question. I just was like, "Oh, I don't know. What project? Wait. Which team?" That always trips me up, but I should probably just answer, like, one. [Laughter] I think that's the answer people are hoping for.

Sacha: Yeah. No, I guess it's hard to answer.

Dave: Or even the size. It's like, is that my development team size? Anyway, one day it'll get figured out for me.

Sacha: We'll add an option just for you.

Dave: Yeah.

Sacha: You can just check "Dave."

Dave: It's complicated. [Laughter]

Sacha: Yeah. We'll just add that to every question: "It's complicated."

Chris: Oh, no.

Dave: It's complicated.

Sacha: Everybody will pick that.

[Banjo music]

Chris: This episode of ShopTalk Show is brought to you in part by An Event Apart. That's AnEventApart.com. It's a conference; a series, really, so it's not just like they run one of them. It's once a year. You go back year after year. That's cool, but that's not Event Apart. They run multiple shows in cities all across the United States every year, so it's kind of a take the show on the road. A Web design and development circus, really.

There are four more shows left in 2019 that you could hit up and I highly recommend doing so because they have some of the best speakers and the best content curation and conference planning and experience in the business, for sure. The end of July, this month, they're in Washington, D.C. In August, they're in Chicago. The end of October, they're in Denver. Then December 9th through 11th, they're in San Francisco.

These are three-day shows, single track, just an amazing experience. You won't regret it. Get your brain churning about best practices and just all the best ways to build websites there are. Big thinking happens at An Event Apart.

Again, that's AEACP to save $100 off of whatever you purchase through An Event Apart. I just highly recommend checking out the website, thinking about it, convincing your boss, deciding it's a good idea, investing in yourself. Just do it, AnEventApart.com.

[Banjo music]

Chris: If we start digging into the meat of the technology portion, there's interesting stuff in here. I think somebody that watches CSS pretty closely or tries to, I heard some feedback that a lot of it isn't terribly surprising. If you ask people, "Have you literally used scroll snapping or whatever?" that that's going to be a small number compared to people who have heard of it, want to, or whatever.

When you see a small thing for that, you're like, "Yeah, that's cool." It's interesting to find the surprising stuff, but it's just as interesting to talk about the stuff that isn't surprising, in a way.

I like looking at animations and transforms. Both big numbers in have used it to know about it ratio. In fact, maybe before we dig in into that, was it decided between you two that that would be the coolest way to visualize this are those concentric circles of use and knowing?

Sacha: Yeah, I think we came up with the questions first and then figured out the best way to visualize the data. Well, Nivo, it's a library with lots of different charts. Usually, we're like, okay, which charts are we going to use? We try a bunch. We're like, "Oh, we haven't used that one yet for anything." [Laughter] Sometimes we kind of go from the chart first and then try to find the best way to lay out the data, which again is probably not what a proper data scientist would do, but we also like just having fun with it and try and do things that are also interesting visually.

Chris: Yeah.

Sacha: In this case, yeah, I wanted to visualize the area. I like to call it an explored territory where it's like you know about it, but you haven't actually learned it or tried it. I think it's interesting because, for really dynamic technologies like JavaScript, we all know that there are so many things that we want to try but haven't had time to yet.

I think CSS is like that as well even though, at least for me, the image I have of CSS is kind of, "Oh, well, there are floats and there are table layouts. That's about it." It turns out, no, there really is a lot coming through in this year and in the next couple of years: grid, sub-grid, all that.

Yeah, it's a lot to learn, but it's also really fun, I think. I'm having more fun with CSS now than I've ever had before. Before, the frustration was like, oh, there's no way of doing what I want to do. Now it's the … being like, "Oh, wait. There is this new way of doing what I want to do and I can learn it."

Dave: Yeah. Yeah, it's changed completely. I think we've said it here on the show before. If you're starting with grid in your toolkit, day one you're learning about what sites and you have grid and cross-browser flexbox, the whole world is different for you.

Chris: Are you more excited about it or are you like, "Well, this language is obviously really powerful and can do everything I want it to do, so I'm just going to move forward with that assumption. Maybe I won't care to become a CSS expert, but I'll just kind of assume that it's all-powerful"?

Sacha: I feel like the time I used to spend looking up floats and filing hacks and doing basically just workarounds and hacks. Yeah, now I can invest in actually learning real things that are meant to work the way they work. That's just a more pleasant experience.

Chris: I absolutely agree. It feels like we're fighting with CSS much less. It's just kind of--I don't know--do the job.

Sacha: Yeah.

Chris: It's more fun. It's easier to get more interesting things done; be more creative.

In this features category, the biggest circles that represent "Have used it," Flexbox might be the biggest circle on here, which is pretty cool, in a way. Like, wow; Flexbox really took hold, in a way. Then that animation stuff I mentioned; @font-face is super huge. Calc is surprisingly huge in the "Have used it" features, so apparently that was a good idea. Good job, Calc.

Then the biggest discrepancy is between the "Have used it" and "Just only know about it." I guess, if you haven't even heard about it, you didn't vote at all, right? You're not even on this chart. "Haven't heard about it," isn't a choice.

Sacha: Yeah, so if you hover over the things, there's this pink circle. That's the total number of respondents, so the difference would be the people who haven't heard about that feature.

Chris: Oh, I see. Yes. Oh, thank you for explaining that to me. There are big gaps in some of those things. Like multicolumn layout is an interesting one that has a big gap between the "Know about it" category and stuff.

If you compare Flexbox and Grid, two huge features that just come up all the time when anybody talks about CSS, in my mind feel neck-and-neck almost. Now that they're both here, they both have pretty good browser support. Although, people like to yell about IE and Grid. But in fact, IE11 has an okay-ish implementation of Grid that you have to know a little about to use it, but it's not like it's not there. The "Have used it" for Grid is way smaller; way smaller than Flexbox.

Sacha: Yeah, well, it came later, right? So, I think people are still learning it. Also, it might be a little bit more complex. I feel there is a little bit more of upfront investment. It's certainly worth it, so I'm really glad I took the time to learn it and check the CSS-Tricks Grid, cheat sheet, like 57 times before I remembered the syntax.

[Laughter]

Chris: Yeah, that's a tough one. Both Grid and Flexbox, as long and well as you know them, there are just little things. You're like--I don't know--is it a line item start or is it flex start or is it top?

Sacha: Yeah.

Dave: Line self. Line justify self.

Chris: All the alignment ones always get me.

Dave: Self-justification.

Chris: Especially with Grid because it's like bidirectional, you know. I don't know. I find it even hard to talk about sometimes how the children align and then how the content inside the children align. Then if you're just targeting an individual element or you're doing it grid-wide or not, it's all very complicated.

Sacha: I think that's one of the specificity of CSS. Something I kind of realized in the process of doing the survey is that CSS has to really account for a lot of things, a lot of different devices, platforms, formats, so it really has to anticipate every possible scenario. Maybe if it was just align start, then there might be ambiguities with some scenarios where that's not clear, so it has to be flex start. I think that's why it seems messy or a bit random in the naming in some aspects of it is just because we don't see the whole context for the decisions that led there.

In a way, that's not really true or as true for JavaScript because, of course, JavaScript is also complex. But, a lot of the time, it's almost mathematical because it's a traditional programming language. The mental model or thought process that leads to the creation of the language is, I think, probably pretty different. I don't know if that made any sense at all.

Chris: Yeah. I know where you're coming from. [Laughter] It's funny to think of it. In a sense, is CSS more complicated? It's responsible for more, in a weird way. It's weird to think that as in competition with JavaScript. You're like, hmm, maybe.

Sacha: Well, it's kind of flat, like horizontal. The complexity is horizontal whereas, in JavaScript, it's more vertical, I feel.

Chris: There are some other big gap things here if you look at exclusions, which is something I don't hardly know anything about. I sort of get it. It's like a way to -- [Laughter] Actually, maybe I don't totally get it.

You know, like how float stuff pushes around it. It's kind of like an evolution of floats in a way, right? I've never even really tried to use an exclusion. I don't really know what the browser support it, so I'd probably be in the "Know about it, but haven't used it" category here, so I can relate to that in a way. Hopefully, a lot of people look at this and see themselves in it.

Sacha: Yeah. Exclusions. Yeah, I think browser support is pretty bad, so that's why people haven't really tried it yet or even know about it yet. I think we kind of also did it on purpose. We didn't want to just have display block in here because it would be 100%.

Chris: Right.

Sacha: We kind of hand-picked things that were not as known or up and coming because I think it's going to be interesting to track those over the next couple of years to see which ones kind of sink or swim.

Chris: Yeah, I didn't think about that. That's a good point. You don't want to track, "Have you used the color property in CSS?"

Sacha: [Laughter]

Chris: That's not interesting, one.

Sacha: Yeah.

Chris: Two, it might screw up your data a little bit. The fact is, people might get bored filling out the survey and not even fill it out. You're like, "I don't want to tell you about how I use color? This is not interesting at all."

Sacha: Yeah. It's like page one of 37….

Chris: Yeah.

[Laughter]

Chris: Nobody is going to get through that.

Dave: I'm already interested how Grid is, like to watch the change over the next year of Grid. Then Sub-Grid hopefully gets introduced.

Sacha: Yeah.

Dave: I think that's in Firefox Nightly. Is that right?

Chris: That does complicate things a bit, doesn't it?

Dave: Exclusions, I'm probably in the weird camp where I have used it. Then I backed out because it doesn't work anywhere. It only works in IE and Edge or old Edge, not even Chrome Edge, but you know.

Chris: It does make you wish you could see the browser support on these charts as well. You're like, maybe the dot is really small because the browser support is small.

Dave: Yeah, but then I'm like, if this feature gets put into Chrome, finally, like into Chromium, which Chrome, Opera, and everything uses, like wow; we might see a lot of it next year.

Chris: Maybe.

Dave: You never know.

Sacha: Yeah, it's a really cool feature. It lets you define zones in your text so the text can flow around and you can put in graphics, if I'm not mistaken.

Chris: Mm-hmm.

Dave: Yeah, it's like Microsoft Word in the browser.

Sacha: Yeah.

[Laughter]

Dave: It's like Word Art in the browser. No, just the Word part like where you can just flow content around whatever and it'll know intelligently, I guess, figure that out. It's sort of like clip path, but easier.

Sacha: Yeah, and if you could animate that, you could make text animation or stuff like that.

Chris: Ah, yeah.

Sacha: It could be pretty cool.

Dave: I think it would be really cool.

Chris: It looks like the least used thing in the next section here is the shapes, which is funny because that's a little bit like exclusions too, right? Sometimes I can see why people would get confused by how many different ways there are to flow content in different ways.

Sacha: Maybe some of it is like there's less use for it. Something like Grid, everybody needs to do a layout; but something like shapes or exclusions, not everybody needs some complex or directed page with things coming out of everywhere.

Chris: Nah. Yeah, I remember when shapes was coming out. It was like, "Oh, look! There's a circle, like an avatar. You can wrap some text around it, for example." You're like, well, that's a great example but it's also the only example. [Laughter]

Sacha: Yeah.

Chris: Yeah, you can make grapes and wrap the text around the grapes too, but it kind of ends there. That's it. That's what that feature does. It's not super rife with possibilities. It's like, nah, you wrap some text around a shape. That's it.

Sacha: Still, I'm glad that we also have this kind of feature.

Chris: Yeah. Oh, yeah.

Sacha: It's hard. I don't think it's easy to know in advance which features are going to be useful or not. I think it's kind of nice that the CSS working group and the browser developers also take the time for purely visual or purely aesthetic features, even if they don't get as much use.

Chris: Yeah, compared to something like Grid that's just useful for a billion--

Sacha: Yeah, right.

Chris: --millions of billions of things. Yeah, I've spoke to some code schools that were like, "We have Flexbox in our curriculum now, but we know about Grid, obviously. Should we even bother changing or should we do them side-by-side? We don't have time to cover both, perhaps."

I tried to convince one of them that you should do Grid instead of Flexbox. It wasn't a full-throated argument, necessarily. Their argument was that Flexbox is so much easier. I was like, "I don't know. In a lot of ways, I feel like Grid is easier."

You say, "Display grid, 1FR, 1FR, 1FR," and you have this really predictable thing. There are quirks of it all, but I feel like the mental model for Grid is, in a sense, a little easier.

Sacha: Yeah, I agree. I think whatever your familiar with always just seems easier. I'm sure there are people who are like, "Well, floats make a ton of sense, but what's this Flexbox thing?"

Chris: That's true. That's true. Yeah. To argue about the mental model of it is hard when you know one of them better than the other one.

Sacha: Yeah.

Chris: You'll just say that. Yeah, that's cool.

[Banjo music]

Chris: This episode of ShopTalk Show was brought to you in part by Jetpack. That's Jetpack.com. It is a plugin for your self-hosted WordPress site, but it just does all kinds of stuff. It's kind of like a dozen plugins in one, in a way.

I just used it the other day because I have active, paid Jetpack subscriptions on every WordPress site I run. One of those reasons is backups because Jetpack is an Automattic product and Automattic has this service called VaultPress also, which is VaultPress.com.

Through Jetpack, you get your site backed up. By backed up I mean all of it; not just your theme files or whatever is on your server sitting there as flat files, but all your images and resources uploaded, too.

Most importantly, to me, always, is the database itself. You can't lose that. You can't screw that up. That's really terrible.

If you've got a clean database, you can always slap together a new theme and not lose any content and all that. That database is so vital.

Anyway, I use that feature all the time and it's nice that VaultPress is kind of backing it up pretty real time, too. It's happening all the time. It's not just like, "Oh, I got one from three days ago," kind of thing, which is often unacceptable. It's like, no, I have from 42 minutes, which is pretty clutch.

Anyway, I was doing some DNS changes on a site, move from one host to another, which is fine. Usually, when that is happening, you stop updating one site, put it in content freeze, then do the DNS change on the other site that's already ready, and then turn everything back on. That way there's just nothing lost. You don't make a change to a database of one site that doesn't get moved over in time. You do the move ahead of time. It's just kind of a classic little thing. There are probably smoother ways to do it, but this just seems fine.

As things happen sometimes, a little bit of work was done on the old site after it had been moved. There's stuff in the database. Then the DNS change happens and that content is not gone forever; it's just lost. If you were to go back to the site in the admin, it'd be gone because it's connecting to a new database now where that work isn't anymore.

I was like, "Crap! I'm so sorry it happened," to somebody I work with, obviously. We went into VaultPress, downloaded the old copy. There are a probably a number of ways to do this. I was like--I don't know--VaultPress is easy. Grab the WP post table. I just opened it up, dumped it into a database locally, then just sorted the post down, and grabbed their old work. In fact, there were two posts in there that got lost in translation. Grabbed the copy out of it and just went to the new database and plopped them in there.

It was this little tiny thing that was just like, "Um, I probably could have salvaged the content any number of ways," but thanks to Jetpack and their backup service, it was just one tiny little thing I was able to do. Thanks, Jpack.

[Banjo music]

Chris: Well, we can talk about technology stuff. What do you got in your mind, Dave?

Dave: Okay, so technologies. You go to the technologies tab. You get the concentric circle diagram, which is awesome. The satisfaction versus usage and quadrant chart, like plot, I guess, is just this thing tells the story.

Chris: You were saying, to you, that's the most important of any type of survey like this. If you're going to look at one chart, it's this one, almost.

Dave: Yeah. I guess I'll describe it because this is an audio podcast. There is satisfaction on the Y-axis, like percent. This is people's reported satisfaction using a technology.

Chris: Yeah, hate it or love it.

Dave: Then you have user count like number of users who said they've used it across the X-axis. Then you divide that into a top and a bottom and a left and a right, and you have four quadrants. What's the best way to describe it?

Chris: Well, if hardly anybody used it and they hated it, that's the avoid category. If tons of people used it and lots of people loved it, that's in the adopt category because you should probably really care about that. Wow, lots of people are using this and they love it? That's a big deal.

Then there are sad categories like lots of people use this and they don't like it. I guess that's even more sad, in a way.

[Laughter]

Chris: Then there's this--

Dave: It's the analyst.

Chris: Yeah, and then there's this very interesting category of only a few people have used it but they really love it. That's the assess category. For whatever reason, on this chart, that category is loaded with people that really liked things, but they're not super well used across a ton of people.

Sacha: You guys just gave me a great idea for a podcast where I just describe complex charts that people can't see.

[Laughter]

Dave: AudioCharts.podcast.

Chris: I'm sorry about that, listeners. I hope that wasn't too complicated. What's interesting about this chart is that most everything on it is in the small number of users but highly satisfied category. There are only a few outliers in the other category.

Sass is a very great example here. Tons of people use it. Tons of people love it.

Sacha: Yeah. For example, Bootstrap, tons of people use it but it only has 50% satisfaction ratio, so it's kind of interesting. It's like, well, it's popular, but do I really want to invest my time in that if I'm not using it yet because it seems, in a way, that it's not doing so well in terms of satisfaction at least.

Dave: See, that was shocking to me, just about Bootstrap in particular or even foundation, too, is in the avoid column, like in the avoid quadrant, generally. That's not to say the developers who work on these things are hardworking, but it's just the users who are using it tend to be dissatisfied. That was kind of -- I don't know. That was shocking to me and kind of really makes me rethink, like, "Oh, yeah. I should recommend Bootstrap to this person, company, or something like that." That is a shockingly average, middle of the road satisfaction.

Chris: I don't know. Yeah, if you're looking at a new thing that you've never tried before, I'd want to see it higher than 50%. I'd want to see it at 80%.

Dave: That's like people used it and then they're like, "Ugh, yuck. Eck. Yuck."

There are two things I get from this, and I'd love Sasha's viewpoint. In the adopt column, there are only three things. There are only three for sure bets about CSS: BEM, Sass, and Bootstrap, technically, but it's on the line, the 50% or 52% satisfaction. Then you have the analyze quadrant, and there are 19 technologies in there, I think.

Sacha: I think that Sass -- I mean the names are a bit confusing, but yeah. The one with all the technologies is the one with high satisfaction but low usage.

Dave: Low usage, and a lot of that tends to be a lot of CSS and JS stuff.

Sacha: Yeah.

Dave: I think I counted 13 CSS and JS-ie kind of things, which maybe that's not right because I probably put Tachyons in that bucket and it's a little bit different. I guess, what do you infer when you look at this? What story is this chart telling you, specifically in those top two quadrants?

Dave: Yeah, so I think the story is a bit similar to the JavaScript ecosystem. There are lots of movement, basically, lots of new solutions, new patterns, I think things like Tailwind and Tachyons, which adopt functional CSS or Atomic CSS, whatever you want to call it. Those are getting more popular and it's really a new way. It's not only like a new way of writing CSS. It's like the wrong way, in a way, that's what people have told us not to do for years. Then there is CSS and JS, which is also kind of going against, like the separation of concerns and all that.

I think the story is really that there's almost like a revolution, like a new wave of new approaches. Because they're so new, some people are really passionate about them and some people really like them, but they're not what you would call popular yet. They're not widespread. They're maybe not used in big companies. For that reason, if you look at Tailwind, which is actually the most popular UI library in terms of usage, it's below 1,000 whereas Bootstrap is almost to 10,000.

Chris: Right.

Sacha: Yeah, lots of new things coming out. I don't know why now, specifically. I feel maybe it's like JavaScript had its big moment with React, Angular, Vue, and so on maybe three, four years ago. I think it's kind of trickling down to CSS now where a lot of developers found this better way of doing things with JavaScript. Then they looked at CSS and were like, "Well, isn't there a better way there as well?" It might or might not be better. I don't know. We'll see, I guess. Right now, it's certainly interesting to find out.

Chris: Oh, yeah. Don't you so want to know what this chart looks like next year? We'll see a little animation of the dots moving to their new spot.

Sacha: Oh, wow. That would be cool. Yeah.

Chris: I just have no idea. I can't even guess. I couldn't even guess on any one of these dots.

Dave: With all these, I guess, CSS and JS tech things, now CSS is going to trend the JS ecosystem. I think a lot of these are popular Styled Components or Emotion because they fit into your React project pretty good. But if React takes a dip in popularity and Vue is all of a sudden really popular, well, you don't use this in Vue. Those kind of just go away.

Chris: You're right. That's a really good point. Do Styled Components work? I guess it's technically kind of agnostic, but everybody uses React that uses it, right?

Dave: Let's call a spade a spade. [Laughter] I mean the portability of it goes down; I would say.

Chris: Yeah. Right. If you get super, super popular and somehow win the JavaScript framework race, all these go away because you don't use any of them in Vue.

Sacha: Maybe React could come out with React CSS or something, like an official solution.

Chris: Right.

Sacha: Then all these might go away, but you know. Even if they did go away, certainly the idea is that the pioneers are going to stay. Actually, I think what's even more interesting is when you have things from, let's say, Sass that made their way into actual CSS or standard CSS like variables, maybe. People are talking about nesting now.

Chris: Mm-hmm.

Sacha: That's really cool because now people can get rid of Sass and stop using it, but not because they don't like it anymore; because it's been absorbed by CSS itself.

Chris: Their kind of interesting story here is that a lot of these can go together, in a way. I think most people looking at this chart kind of get that, probably. If you're a total newbie looking at this, you're like, "Do I just pick one of these or do I pick one from each color? How does that work in projects?" the story is a little bit more complicated.

I can use CSS modules, but I can use Sass as well. There's no reason I couldn't have a Bulma there too as a framework kind of thing and then run the whole thing through PostCSS at the end. You can kind of mix and match these as well. I guess that's worth pointing out.

Dave: This year, CSS is getting a typed OM. Are we going to have a, whatever, TypeScript CSS kind of thing show up? I don't know. Who knows? Life could be different. Who knows?

Chris: It's funny how dissatisfied people are with Less. I didn't realize that. That's kind of an outlier on this chart as well. It has high adoption; not as much as Sass, but a lot. Then kind of falls under the 50% category a bit. Oh, super high….

Sacha: Well, the question we asked is, "Would you use it again or would you not use it again?" Maybe people are dissatisfied in a sense that they can see it's less popular than Sass and they're like, "Well, I'm not going to bet on the wrong horse." Even if they might prefer Less, theoretically, they could still answer that they're not going to use it again….

Chris: That's a very good distinction, right? It doesn't mean necessarily that they just hate the language or find some problem with its technology, but there just happens to be an adjacent technology that's a little better, so they're going to use that one.

Sacha: Yeah.

Dave: Hmm. Well, so, if you go into the CSS framework section, I think this is interesting, too. I wonder. I'm curious about the relationship with framework authors, if you've talked to them because this looks bad for Bootstrap. The interest rate in Bootstrap is like 17%.

Chris: Yeah, what do you hear? Do you hear from Bulma people or Bootstrap people or whatever? Do you get fallout from the actual devs behind these projects?

Sacha: No. Actually, the only person I've heard from is Adam Wathan--I'm not sure how to say his name--with Tailwind and, also, from the Tailwind community that was very excited about the high interest and satisfaction for Tailwind. On Twitter, it really seemed like there was buzz around that framework, but I haven't heard that much from anybody else. I don't know. To me, that's also a sign, in a way.

It might be a self-fulfilling prophecy because we put it number one and then people who use it are excited, but I think it's always good when people are passionate, whether it's to praise us or yell at us. Like Ember, we always--

Dave: You upset Ember.

Sacha: The Ember people are always criticizing our results because Ember tends to not do great. On one hand, it sucks for Ember because they do badly, but the fact that they are passionate enough to criticize us is actually a good sign. It means that they really do care and that gives me hope for Ember.

Dave: Yeah. If I was the author of Tailwind, Adam--or maintainer, I guess I should say--in, let's say, 10,000--because the math is easier--people show up to take a survey and 35% of them, 3,500 of them have used Tailwind--

Sacha: Or are aware of Tailwind. Sorry.

Dave: Yeah, or are aware of Tailwind and then, of that 3,500, 1,750 are interested. Then, of the people who have used it or whatever, 81% are like, "Yeah, I would use it again," that's pretty killer. That's really hard to get that data as a framework author or even soft polling your Twitter community or whatever. That's good data. That's interesting data for them, I think.

Sacha: Yeah, it means you're doing something right. You might only have -- I don't know in actual usage numbers, but let's say only 5% of users use Tailwind. What matters is seeing the satisfaction among that 5%, right? That's really what tells you if you're on the right path or not.

If people like using it, they're going to keep using it. They're going to tell others to use it. These other people are also going to like it, also keep using it. That's how you grow a framework and a community. It's kind of like conversion rates, like anything else. If you have what marketing people would call a leaky funnel and that developers try your thing but they don't like it, then you might spend hundreds of hours writing tutorials, documentation, and that kind of open source effort for no result because there is no stickiness at the end.

Chris: That's good that all these have a decent amount of awareness, like a minimum of 19% if we're talking about the frameworks. I could invent ChrisCSS and be the only user of it and report 100% satisfaction and blow away this chart. I'd be an outlier at the very top of it.

[Laughter]

Sacha: Then we wouldn't feature you in the survey at all, I think. I don't want people to try to hack our server.

[Laughter]

Chris: Add your own results. It's a pro feature.

Sacha: Yeah, we also let people enter their own, like, "Can we have an 'other' field for people to enter their own submission?" Usually, it's not good data. It's not usable data, so it kind of confirms that we nailed all the main frameworks because there wasn't really much.

Usually, what people do in that field is repeat a framework that was already mentioned because they missed it, so it's not super useful.

Chris: Oh, I see. Yeah. You'd think, once in a while, it might unearth something interesting.

Sacha: Yeah, it did for the JavaScript survey. We had Svelt that was mentioned a lot even though we didn't feeder it in the questions. But for the CSS survey, nothing like that really stood out.

Chris: I notice "Just do whatever you want" wasn't represented as a CSS methodology, which is my firm -- that's the one I adhere to the best.

Dave: [Laughter]

Chris: "Just make some stuff up" methodology.

Dave: Yeah, Faux BEM didn't make it either--

Chris: [Laughter]

Dave: --in my expertise. I was going to say, CSS and JS, I think you mention it in the thing. Boy do people have opinions. Just looking at the data, it's kind of an explosion of libraries that are trying to tackle this problem. Do you see it normalizing over the next year? Where do you think that is kind of headed?

Chris: Oh, God, I can't wait to know what it is.

Sacha: Yeah, I think so because a lot of these, like Aphrodite, Radium, they have pretty poor satisfaction, so that's one trend. Another trend, I think, is a lot of the libraries are converging. I know, like Emotion and Styled Components, they have a lot of the same similar features. When one comes up with something new, they other one adopts it pretty fast. Yeah, I think I would predict either Styled Components or Emotion will be the dominant player in CSS and JS. Then maybe some of the other approaches like CSS Modules, which, I haven't used it, but it feels like lower level or less prescriptive, maybe. Maybe we'll have one really highly prescriptive approach and then one where you're more free to do what you want and write something that's closer to regular CSS.

Chris: That's an interesting thought. I bet you're right. Have one that's -- or maybe the technology thing factors in again. One of these is just absolutely tied at the hip to React and it becomes the blessed solution, so that's the one. Maybe a more generic one like CSS modules hangs on because it's so generic.

Sacha: Yeah. For the survey itself, we actually just used Sass. It's a Gatsby site, so made with React, but we don't use CSS and JS. Although, I think it would actually be a good fit because we have so many components and we have a lot of the styling that's kind of baked into the charts, but it's still a bit messy. Actually, it would be interesting to refactor all that with maybe Styled Components or Emotion some time down the line.

Chris: Maybe, or CSS Modules. If you never tried it, try it. I'm a big supporter of the CSS Modules approach. It's just very easy to use. If the problem is that it's messy, that's a good solution to it because it has one job. It's scope your classes, so you scope them to a component. Done. It's great.

Dave: This is just really cool to me. Yeah, I'm definitely interested to see where that kind of goes. This is very cool.

I had a couple other things. Are you ready for this? Some zingers here.

Sacha: Yeah.

Dave: CSS is a programming language; 30% of people said strongly disagree. Did we solve the problem, it's not, or what's your thinking there?

Sacha: Yeah, I was just curious to see what people would say. I think it is because I've seen games made with CSS, like adventure games or tic-tac-toe the other day. If you just browse Code-Pen, there are so many things. I guess it really depends on your definition of programming language, right? I think, by the commonsense definition that somebody on the street would understand, then CSS is a programming language. Yeah.

Chris: Yeah. If you add strongly disagree and disagree, you're dang near 50%. There are people disagreeing with what. My take is that it's kind of a semantic thing. People just think about it for 20 seconds and they go, "Hmm, no, I guess it's not because there are no loops and if statements and stuff, so I'm just going to say no." I feel like there might be a lot of people who capture it in that way. To them, it's not this big, philosophical fight.

I think some people read this question, see that people said no, and their reaction is, "You're undervaluing CSS!!" You're like, "Maybe not necessarily." Maybe some people are or, if you're really a jerk about it and post big threads about how CSS isn't a programming language and you want to fight about it, well, then, sure. That's just a weird dick move. When you look at data of 11,000 responses, it's just a semantic distinction people are making. You shouldn't read too much into it.

Dave: I just find that very interesting. Then I think there's an error. I think I found an error, a genuine error.

Chris: Ooh!

Dave: In the podcast section, Sacha--I don't know--you have Syntax above ShopTalk Show, and I've got to think that's clearly an error. I don't know.

Chris: [Laughter] People like their tasty treats.

Dave: It's embarrassing for you, I'm sure, to get this information so late in the game but, clearly, something is messed up.

Sacha: What happened is that the Syntax guys had me on before and you hadn't interviewed me yet.

Dave: [Loud exhale] Okay, well, we'll fix that next year, Shop-o-maniacs. Stay tuned. We're going to have to work this poll here, so we're going to win. We're going to win. I'm going to win.

Chris: Oh, man.

Dave: In the words of Wario, "I'ma gonna win."

Chris: Oh, Wes. He's on here again because he's the number four on the "Which CSS related sites, courses, et cetera do you consult?" To be fourth place against an entire other category of big companies, big multimillion dollar companies and then just have one guy's name in there. It's pretty impressive, Wes. Good job!

Sacha: Well, I mean, okay. Disclaimer: He did help us also publicize the survey to his own audience, so that also plays a role, for sure. Yeah, it's still really impressive what he's doing, him and Scott with Syntax.

Chris: Yeah, it's pretty great.

Sacha: I wouldn't venture to guess which one of the two podcasts are really most popular, but I think it's fair to say--

Dave: It's ours.

Chris: [Laughter]

Sacha: Okay.

Dave: It's ours.

[Laughter]

Sacha: I just want to give the Syntax guys props because they've been doing it for not as long as you guys and they've had a pretty good run as well.

Chris: Heck, yeah. It's a great show.

Dave: Oh, yeah. They do two shows a week, too. They work very hard. Cool. No, that's all….

Chris: Is CSS easy to learn? It looks like a lot of people agree with that. That's heartwarming, in a way. I always thought that CSS is an inclusive language in that way and that it's fairly easy to look at a CSS file in action and make a change to it and be like, "Oh, I get it," you know. Most people agree with that.

Sacha: Yeah, and I read a really interesting argument that we were speaking of inclusivity and demographics. If you devalue things like CSS and HTML, which I wouldn't say they were easier but, certainly, they are easier to learn or maybe just easier to get into. If you devalue those, it kind of hurts outsiders because those are like entry points to programming, in general, or Web development, in general, for a lot of people who don't fit the norm. It's important to kind of remember that if you say, "Oh, CSS is not a programming language. CSS is not that important," it kind of hurts those people in a way.

Chris: Oh, like the beginning of the funnel.

Sacha: Yeah. Yeah, exactly.

Chris: If you shoo somebody away at that low of a level, you're hurting the whole rest of the -- I don't know if funnel is the right way to put it, but whatever that is.

Sacha: Yeah, and not to say that those people, whoever they are, are not capable of writing JavaScript because they are, but it's just that CSS and maybe HTML serves as the gateway drug to JavaScript, in a way.

Chris: Mm-hmm.

Sacha: That's important.

Chris: The evolving thing is fascinating too. Most people are just like, "I don't know." I think the biggest category of the question is, "Is CSS evolving too slowly?" Yeah, it's just all over the map with the most people kind of not caring about that. That is a tough question.

Sacha: Don't you think, if we had asked that five years ago, it would have been very different?

Chris: Yeah, you would say, "Strongly agree." [Laughter]

Sacha: Yeah. Right?

Chris: Yeah. Maybe it is.

Sacha: The fact that it's not significant is, in itself, significant, I think.

Chris: Yeah. Yeah, good point. Such big things having arrived, now you almost worry about its future. How are you going to top that, CSS? Heck of a couple of years there. What you got up your back sleeve now? [Laughter]

Sacha: I'm sure there's stuff, if you think about things like VR or AR. I had a chat with a friend, also in Japan, who works for the CSS working group…. He pointed out that CSS is even used on fridges, on smart fridges, or for smartwatches, so it's so diverse that there is always going to be a use case that you hadn't thought about. In fact, I don't know if you guys are aware of that, but Grid was developed by Bloomberg because they wanted to port their Bloomberg terminal layout to the Web and there was no way of doing that with floats or even Flexbox, I guess.

I'm really curious to see how CSS adapts to more and more use cases. You shouldn't just think about, okay, here is what we are doing today. How can CSS help us with that? You have to think of, "Okay, here is what other people in other industries are doing with things that have nothing to do with CSS currently and can CSS morph into those new use cases?"

Chris: Mm-hmm. It'd be nice if a survey like this or something similar that asked people, "What do I want out of CSS?" would be the very data that would drive what CSS does. I think it's just a little bit more complicated than that. Like you were saying; if Grid came from a company like Bloomberg saying, "We need this for something," well, then, that's just where it has to happen because the desire comes from there; money comes from there.

Sacha: Yeah.

Chris: Whereas if it's just a bunch of developers saying, "I want to be able to style form controls in a cross-browser friendly way," sure, we're listening. Everybody wants that. Great, but who is going to write it? I don't know.

I don't know. It's complicated, right? Where the source of change comes from isn't necessarily just because a bunch of people want it.

Sacha: Sure. We do have a question about what developers feel is currently missing from CSS that I thought was pretty interesting.

Chris: Mm-hmm. Container queries, surely, you know. It's funny how low the numbers are, in a way. Is that because what people wanted was so wide and they had a zillion answers?

Sacha: Yeah, I think that was a free-form question, so it wasn't selecting options. You had to actually type it in. Those are always harder to answer because you have to actually--

Chris: To have 3% of people type in "container queries" is significant then. Yeah.

Sacha: Yeah, number one is container queries and, number two, parent selectors. For me, that's the big one.

Chris: Yeah.

Sacha: I always need that. Nesting.

Chris: Contains.

Sacha: Yeah, contains. Nesting, yeah, maybe. That's interesting. I'm not sure. I actually don't know if nesting is good or not, like in Sass. I started out acting like everybody is nesting things like ten levels deep. I'm like, "Oh, that's so cool."

Chris: Yeah.

Sacha: I can nest as much as I want, and then you're like, "Well, maybe that's not such a great idea after all."

Chris: I think that one is done or is close. I don't know if it's shipping anything.

Sacha: Oh, okay.

Chris: It's like, "You're going to get nesting. There's no doubt about it."

Sacha: Okay, well, I mean it's good to have it, I think.

Dave: I think what's cool about it is, if it comes to browser, right? The way it works in Sass is it just repeats every selector. If you had foo.bar.baz, it would spit out foo.bar.baz or whatever in your selector. But now, theoretically, it would just work, right?

Sacha: Oh, yeah. That's true. Yeah.

Dave: You wouldn't get the triplicate selector. It would just be CSS.

Chris: Ah, that's kind of a good point.

Sacha: That's a really good point, actually. Yeah.

Chris: It is. It's similar to when you think about how mixins work now, or not mixins so much as extends. Extend in Sass almost has become an antipattern. People are like, "Don't use it. It's too weird. Weird stuff happens. It makes crazy selectors." If you extend more than once, you're in really crazy town. It just has become this bad thing. Then you have to think about it.

If it was the in the language, though, you wouldn't have any of that fallout. A native working version of extend feels very clean and natural when it's happening in the browser. It's when the browser tries to replicate it in native CSS when it's a mess.

I think that is a really good point, Dave. Things change when they're native, just like how when CSS variables shipped. I think it took the community a while to grok … it's just mushed. Instead of telling the community, I should just say, "For me." It took me a minute to wrap my head around it all of how different they really are. It's not just like, "Oh, we moved what's in Sass to the browser now." It's way more nuanced than that.

Dave: No. Well, and even the story; I'd be curious. Did you talk about CSS variables in here? That would be interesting to track, too, and know more about just because I am totally held back by IE11 for just free wheeling and dealing. I would just love it if it could -- I don't know.

These things, once you figure out a backup strategy or whatever, it'd be cool. I don't know. Maybe we're heading into a CSS where you have the old CSS like a parsed file for old CSS and then a new CSS or something.

Sacha: Well, yeah. I work with a framework called Meteor JS. It's not that popular. But one cool thing that it can do is serve a different bundle to different browsers depending on their compatibility and their feature support. You could imagine if you write your thing in CSS and then, if the server detects an older browser, it compiles that to old CSS. If not, it just serves the CSS that you route with the variables and whatever.

Dave: Yeah.

Sacha: I think, technically, that's already possible if you control the whole stack but it's not something that's very commonly done, maybe. Maybe Webpack can do that. I don't know.

Dave: Yeah, I wonder. I'm curious where it goes. Sacha, we should wrap up. I guess, what's your take? What is CSS in 2019, and where do you think people should point their attention -- yeah, their attention bucks at? What should they be looking at?

Sacha: I'm going to cheat and just repeat what I wrote on CSS-Tricks, actually, recently. I can identify three trends.

The first one was just the fact that there's so much unexplored territory in CSS. There are so many new features that some people know about, but not many have actually tried. We mentioned a lot of them: grid, of course, shapes, scroll snap. Some of them are small things that are just one line, but some of them are more involved. I think there is definitely a lot of stuff to learn for everybody, whether you're just starting out or an experienced CSS developer.

The second trend was functional CSS. That one is a bit more controversial. I personally haven't used any of the functional CSS frameworks or libraries yet like Tailwind but, just looking at the data and hearing back from the community, it really seems like there is something there. I don't think it's just a fad.

What I think is especially interesting is it's kind of breaking the dogma of, like, there's only one way to write CSS and don't do that; that's wrong. If only for that, I think it's cool that it's making us reconsider our preconceived notions a little bit.

Chris: Yeah, it's funny. If you're all in on some of these, you almost don't even write CSS. You need to still be aware of it, I think, but you kind of don't ever write it. Configure this thing and then it's just all classes from there on out. It's almost like an HTML library. It's not, but you know; it's just funny.

If you're like, "Oh, my God! CSS shapes are so cool. I want to use them," how does that jive with the Tailwind world? How do you write a custom CSS shape in a Tailwind property?

I know how. You just write regular CSS somewhere. You have to. There's no other way around it, but it's funny.

Sacha: Yeah. Basically, just saying that there is a lot of uncertainty. All these frameworks and libraries are going to kind of fight it out and try to make it out of that Sass quadrant with high satisfaction and low usage and making it into the high satisfaction and high usage quadrant of that chart. It's going to be interesting.

Of course, you don't have to jump on any bandwagon right away. You can wait a year or two to see how it shakes out. Personally, that's kind of what I'm doing. I'm still mostly using Sass. I've tried Styled Components a bit. I like it, but I'm just giving it some time to mature.

Yeah, I think it will be interesting to see what the survey says next year. Maybe also see what The State of JavaScript Survey says because, like you said, there will be lots of parallel evolutions.

Overall, my main takeaway is really that CSS is interesting. I have to confess. For a long time, I didn't think that for a long time. I was like, CSS is just this thing that stands in the way of me and my design. I just need to dominate it and bend it to my will by whatever way possible. Then once I'm done, I never touch it again.

Now, CSS is not like that anymore. Now it's actually something where I can be like, "Oh, I'm going to figure out the best way to write that grid so that it adapts to the viewport and I don't need breakpoints anymore. You can do a lot of cool things that feel actually fun to do and interesting to learn."

I think all the people working on CSS and writing about CSS and doing podcasts about CSS are really doing a good job in moving the community forward, basically.

Dave: Awesome. Thanks. Thanks so much for your insights. I think this is very cool. The State of JS, too, is great for the same reasons, getting kind of an insight into the JS ecosystem, which is changing every year, rapidly. Really appreciate that.

We do need to wrap up this show. For those who aren't following you and giving you money, Sacha, how can they do that?

Sacha: You can give me money by buying a State of CSS T-shirt, if you like it. It's on the site, 2019.StateofCSS.com. You'll see a link there. The T-shirt is probably one of the only T-shirts in the world that will actually teach you some CSS.

Chris: [Laughter]

Sacha: Or will at least teach other people CSS when they see you wearing it. Then if you want to follow my work, Twitter.com/SachaGrief. I'm easy enough to find, I think. Also, of course, check out Nivo.js, so nivo.rocks is the URL.

Chris: Fantastic.

Dave: And Sidebar, Sidebar.io, right? Are you still doing that?

Sacha: Oh, yeah. Yeah, I also run a newsletter of design links called Sidebar at Sidebar.io.

Chris: Every day.

Sacha: Every day. Yeah.

Dave: Quality links, every day. There you go.

Sacha: Five links every day.

Dave: Awesome. Well, thank you so much for coming on the show. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. You know the drill. Follow us on Twitter. If you hate your job, head over to ShopTalkShow.com/jobs and get a brand new one because people want to hire people like you. Chris, do you have anything else you'd like to say?

Chris: ShopTalkShow.com.

Comments

Job Mentions

Check out all jobs over on the Job Board. If you'd like to post a job, you can do that here, and have it mentioned on ShopTalk for a small additional charge.