Season 2 Episode 2 Aug 19, 2020

You Can Do That With CSS?

Pitch

CSS is a goldmine waiting to be tapped.

Description

In this episode we talk about little-known things you can do with CSS with UX Developers at Shopify, Hui Jing Chen and Ananya Neogi.

Hosts

Jess Lee

Jess Lee is co-founder of DEV.

Ben Halpern

Ben Halpern is co-founder and webmaster of DEV.

Guests

Hui Jing Chen

Hui Jing Chen is a UX Designer at Shopify. She is also a self-taught developer and designer and has an inordinate love for CSS. She used to play basketball full-time and launched her web career during downtime between training sessions.

Ananya Neogi

Ananya Neogi is an UX Developer at Shopify working at the intersection of code and design. Writing CSS sparks the most joy for her. She's an occasional writer, speaker, and an aspiring dog mom amongst other things.

Show Notes

Audio file size

59478266

Duration

00:41:18

Transcript

[00:00:00] HC: I think a lot of my discovering relatively lesser known CSS properties came from that. I could do it in JavaScript, but no, I want to make life difficult for myself and do it in CSS.

 

[00:00:24] BH: Welcome to Dev Discuss, the show where we cover the burning topics that impact all our lives as developers. I’m Ben Halpern, co-founder of Dev.

 

[00:00:32] JL: And I’m Jess Lee, also a co-founder of Dev. Today, we’re talking about little known things you can do with CSS with Hui Jing Chen and Ananya Neogi, UX Developers at Shopify. Thank you both so much for joining us.

 

[00:00:44] HC: It’s great to be here. Thanks for inviting us.

 

[00:00:46] AN: Thank you for having us. It’s so fun.

 

[00:00:48] BH: Ananya, tell us a bit about your background as a developer.

 

[00:00:53] AN: So right now I’m working as a UX developer, but before this I was working more into web and like the whole full spectrum for the past like three going four years now, I think working as a frontend developer in like various companies. Like my first job was in a small design agency and from there I moved to different places, but I’ve mostly worked at the frontend because I love it so much and I never want to change that ever again. So yeah, I love doing it.

 

[00:01:23] JL: Awesome. I don’t think you ever hear those words come out of my mouth loving frontend so much. What kind of projects have you been working on at Shopify?

 

[00:01:31] AN: I specifically work on the admin side of things. So if anybody knows like if they’re using Shopify, the dashboard that they see and they manage their orders and stuff. So that’s the thing that I’m generally working on. Most of the day to day work just goes into like just working on features and just like doing a lot of accessibility stuff, writing like CSS and contributing to the design system, but we have Polaris. I hope a lot of people will know about it. Yeah. That’s it.

 

[00:02:03] BH: Admin work at Shopify is pretty mission-critical. That sounds pretty cool. It’s not exactly like some email template that goes out. You’re working on the real goods.

 

[00:02:15] AN: Definitely. Definitely. Yeah. So like one of the main pages that most of our merchants like view, which is like the orders page where they basically control everything about like their store, mostly like the backend side of things, like managing orders and fulfillment and all that. Yes. I work on like bad area. I mean, even that area is divided into like smaller sub-teams, but it’s like the real deal.

 

[00:02:42] JL: Yeah, the Dev shop is powered by Shopify. So we’re familiar with what you’re describing.

 

[00:02:49] AN: That’s great.

 

[00:02:50] BH: And Hui Jing, can you tell us a bit about your background?

 

[00:02:54] HC: I also started out at a small web agency. It was more specific. It was like a Drupal agency. That was back in, I think, 2013. I see that as a milestone for official implement because people started to actually pay me. Even though it was a Drupal agency, I think I gravitated toward doing the frontend, like building a lot of custom themes about a year in, and I kind of just sat in that frontend space ever since, also moved around a bit. I’m too a UX developer at Shopify. I am set in Singapore. So I’m actually part of the international R&D. I think that’s the official title. And different from an Ananya, I’m working more on the brochure sites. So for me specifically, because I’m on the China team, I’m working on the brochure site for our Chinese audience, and it hasn’t really been a very interesting experience. I think A lot of times most folks who are not familiar with China or at least have been to China or even develop anything in China is that there’s a very unique set of constraints that developers face, especially if you’re working on the web and that has been super interesting for me.

 

[00:04:10] JL: I’d love to learn about how you found yourself becoming a CSS expert, just how it became a part of your own development as a developer.

 

[00:04:19] HC: When I started web development, I didn’t come from a computer science background. So I think in a way there were pluses and minuses. I think the plus being it was a blank slate. This is a personal opinion, right? So don’t at me on this, but I feel that the strongest computer programmers that I know, they are, I won’t say tied in, but they’re really comfortable with a certain mindset. I would say a style of writing code, I think the easiest example is that you don’t declare global variables. It’s a bad form. For CSS though, it is a cascading language. You do have to make use of the cascade. You start at a global level and then you cascade down in terms of specificity. It’s like a different programming paradigm. And I feel that because I came in with a blank slate, that actually made more sense to me than when I had to do, and again, people are going to be opinionated. They’re like, “JavaScript is not a programming language.” Sorry, it is. But when I was looking at doing JavaScript, I was like, “It’s all right,” I guess, because CSS makes sense to me intuitively like from day one, but JavaScript took me a while to get on. So I think the first year I did a lot of unconventional things and in hindsight it wasn’t the best solution at the time. But like if I had to do something interactive and you could have just done it with like, I don’t know, three lines of JavaScript, I was like, “No, we’re going to do this with CSS.” But it did make me better in CSS, enough to know that now it’s like, “No, it works.” But you wouldn’t ship that to production, but it was a good experience. I think a lot of my discovering relatively lesser known CSS properties came from that. I could do it in JavaScript, but no, I want to make life difficult for myself and do it in CSS.

 

[00:06:19] BH: So with where CSS is today versus sort of the timeframe you were talking about when you were first up and coming in frontend development, is the choice to go with CSS for some of these things is a little bit more practical with some of the newer things that are shipping in CSS versus that period of time and what you’re describing?

 

[00:06:38] HC: To a certain extent, yes. There is a lot more that CSS can do out of the box. When I was starting out like 2009 to 2013, it was kind of an in between period. CSS had been out for a bit, but that was the time where flexbox was very messy. Everybody’s still used to floats. Sass was so big. That was when, if you wanted to do a column layout, you have to use, Susy, gosh, that was the framework you use to calculate the percentages. You need it to get everything to line up right. But I think a lot of times I would do things like tabs and accordions. And I think the techniques are fairly similar now, I would say. You use the like target pseudo selector. But I think in terms of a layout’s perspective, that’s where CSS really had the biggest change since I started. What I’ve learned with experience is that if you do certain interactive things with CSS, you do lose some accessibility things that you would have had to add in. I mean, it’s not because of JavaScript or because of CSS. It’s just that you would have to add those in in JavaScript anyway. If you do it in CSS without any JavaScript, you don’t actually do that extra layer for say like attributes or things like that. So it’s not JavaScript or CSS alone per se. It’s just that if you want it to add that additional layer, when you’re hacking onto specific designs or components, that’s something that you have to take care of separately.

 

[00:08:23] JL: So Ananya, you wrote a piece on Dev titled “CSS Can Do That”, which was really popular with the community. I’d love to hear how you ended up taking a deeper look at CSS.

 

[00:08:37] AN: I mean, I come from a computer science background, but whatever I’m doing today is definitely self-taught. By self-taught I mean like I learned it myself, like digging through courses and everything. And back in my university days, I was not into frontend at all. Like I used to do a lot of backend stuff. But when I stumbled upon like this frontend as a career thing, from there I basically just started to teach myself HTML, CSS and JavaScript. And like funny enough when I started learning, I like breeze over CSS because at that point it just felt like, “Oh, it’s just a thing that you make things pretty with and that’s just it.” But after a while, I think I stumbled upon like this really cool code bin, which was, I’m pretty sure it was by Sarah Drasner because like all her demos are so amazing, but I don’t remember whom it was. But I stumbled upon this code bin where they did like a really cool animation. And I was like, “Whoa! How do you do that?” And then I saw the code and it was like all within it like CSS. And I think that was like one of the turning points in my career when I thought, “Well, wait, you can do all this with CSS.” And I had no idea. So I think from there on, I started learning a bit more and paying attention to it. And the more I dug into it, like the more amazed I became, like so many things you can do, but not a lot of people are aware of it. And I think from there, that article kind of stems out somewhere. I just want to like quickly list down like few things that I learned over the time that not many people would know because they haven’t explored a lot of CSS. Because like if you look into any of the introductory “teach yourself to web dev” kind of article, the first few lines will be, “HTML is for structure, CSS is for design, like it makes things pretty, and interactivity should be done with JavaScript. So I guess people just believe that CSS is just this one thing that like make things pretty and that’s it and they don’t really understand the capabilities of it. So to be able to do that kind of visual stuff back with code is like amazing.

 

[00:11:02] BH: Before you got so into CSS, did you think of the visual side of what you do and the computer science side of what you do as somewhat distinct or did you always know there’d be a bit of interplay there?

 

[00:11:15] AN: I always thought that there is like this disconnect and I always had this like notion in my mind that the visual stuff is done by designers. I don’t know, like I just had that notion in mind and like developers are people who are just going to like code things and like shouldn’t really bother about the visual things. But I don’t know where that thought came from. I have no idea, but it was there in my mind. But when I started to actually look into like frontend and like web dev and CSS and everything, so from there it was like the light bulb moment when I thought, “Well, hey, this is for me because I love coding.” So I don’t want to become a designer, even though I love visual stuff, but I love coding so much more. So that’s where it like hit me, “Okay, I can do both things,” and that’s where like CSS comes in.

 

[MUSIC BREAK]

 

[00:12:23] JL: So I think you both mentioned just some hidden tricks with CSS. I love to hear about which tricks you find the most interesting. Hui Jing, would you like to kick that off?

 

[00:12:33] HC: I actually have a ranking of like my favorite CSS properties. This is such a nerd thing to have, but I do. I’m going to talk about the top two. I think Ananya covered that in her article. I loved that article by the way.

 

[00:12:45] AN: Oh, thank you.

 

[00:12:46] HC: So I’m Chinese, if you can tell from my name. So I grew up in Malaysia and our street signs are in Malay, which uses the alphabets, the A, B, C alphabets, and then also Jawi, which is a form of like Arabic writing. So you have like already alternate directions. And then like the books that we had were some of the older ones. So there was a mix, right? So Chinese can be written both horizontally or vertically. I think the novels would be like vertical. So there were all these like really interesting layouts that you see in real life. So I was in a crowded train and there was this dude and he was reading a novel. I mean, it’s crowded, like I didn’t want to look over his shoulder. His shoulder was just right there. So he was reading this Chinese novel and you can imagine like a phone is portrait, right? And the text was vertical, but on a phone, it’s actually so narrow, I was like, “If you type it vertically, it would feel nice. It would look nice. I wonder if we could do that on the web.” It turns out that we could, and then I’m going to sank into a rabbit hole with that, the second one, and because Ananya also mentioned this in her article, shapes, CSS Shapes. So good. My elevator pitch for CSS Shapes is you can now let your text flow around Beyoncé’s elbow, like you could in a print magazine. I guess I’m going to hand this off to Ananya to elaborate a bit more about the beauty of CSS Shapes.

 

[00:14:18] AN: I totally like the second that. So you don’t now have to actually set your text and your image in boxes. They can just have this like free flowing personality on your website, which is just so cool. You can like let your creativity flow and you don’t have to be confined to boxes, which is like amazing. You can do these amazing things and just have these like really random shapes and those shapes can actually be like images or SVGs or anything. It doesn’t just have to be like some image and you can add lots of like interaction to it and you can just create this like beautiful experience on the web.

 

[00:15:03] BH: Hit us with another great, hidden trick.

 

[00:15:06] AN: Another thing would be like gradients. I love gradients. It’s not just like the linear gradients that we can see, but now we can do like so much more with gradients. I think I covered this in my article, but there is this called conic gradient where you can actually create pie charts with CSS and that just like blew my mind when I found out about it. I mean, you can’t really do like super complex stuff in it, but if maybe you’re like writing an article or you have like a really static page and you know like these values for the pie chart, you can just like immediately add them directly in your CSS. And you have like a really beautiful pie chart. Also, like you can add gradients to text, which I think creates a really beautiful effect. The text gradient does not really have that much of support, but you can still like do it and have fallback to just like normal colors.

 

[00:16:12] JL: So earlier Hui Jing, you mentioned choosing CSS over JavaScript at times. Can you tell us about the benefit of CSS as opposed to JavaScript?

 

[00:16:24] HC: So there’s no hard-and-fast rules in web development and especially so for CSS. But for me, the general guiding principle is if it’s a layout related thing, you want to do it in CSS. And this is like purely practical. I think it makes sense if you kind of understand how the browser works under the hood, right? You really don’t want to jam out the main thread, having your browser struggling to calculate with some heights of containers on your page when it could be doing more useful computations, like seriously. The CSS for layout test evolved so much. First of all, we have Flexbox, we have Grid, and these are layout techniques that really, I would say, embrace the nature of the web, which if you think about it, the web is this medium. We’d like to analogize it to print. You call it web pages, but it’s really not. It is a digital medium, but if you are a designer, you are unable to control the environment in which your content is being viewed. And I think even a lot of designers find if they weren’t used to working on the web, this is something very, very challenging to design for because traditionally, you have this concept, this idea, this design in mind, and you could be relatively assured that whatever you put out in the world as your final product, that’s the state that everyone’s going to view, your vision, your idea in that way. So when it comes to layouts, the CSS for layouts has developed in such a way where it’s asking authors of CSS to don’t be so fixated on wanting things in a specific place at a specific time. You kind of give guidelines. You’re like, “I would like this block of content to be on the right side for the most part, but I don’t know how much content is going to be there. So I don’t know how wide it’s going to be with the browser design.” So that’s where I would let CSS do most of the heavy lifting. If you’re doing a lot of interaction heavy, you would want to bring in, so you wouldn’t exclusively do it in JavaScript, but you want to bring in and sprinkle some of that JavaScript goodness on there. If you want to do more dynamic layouts, you would let CSS do most of the heavy lifting and maybe you put some JavaScript in there to sprinkle on maybe some classes, put in CSS classes to trigger other CSS. It’s not CSS is better, JavaScript is better. It’s how we, like web developers, especially on the frontend, right? How do we make these technologies work together better?

 

[00:19:00] JL: So I think a lot of people actually really dislike using CSS. I’m curious if you have any theories as to why people have an unflattering view of the language.

 

[00:19:09] HC: This is based on anecdotal personal experience. I get the feeling that a lot of us, again, “hardcore programmers”, they don’t think CSS is a thing. They’re like, “Yeah, it’s not even programming. What are you talking about?” And I say that these opinions to me, I find them, they’re just conflicting because you don’t like CSS because it’s too easy, but then you don’t like it because it’s too hard? That doesn’t make sense. Make up your minds. Again, I would say that it’s a very distinct paradigm from let’s say the more traditional programming languages where you write a lot of logic. I mean, there is logic in CSS, but it’s kind of different because if you think about like selectors, right? There’s logic in there. How would you I would say even structure your selectors? You’d have to think about the math behind it if you’re thinking of more specific, complicated selector logic. There’s some logic there, but I would say that CSS, when it first started, it wasn’t that. It was really literally for presentational purposes. Right? And because I’m more of a rabbit hole kind of person, I actually have read quite a lot of CSS specs over the years. What I discovered, fun fact, the first version of CSS that came out in ’96, there was a line that said that CSS wasn’t meant for doing layouts.

 

[00:20:32] JL: Wow!

 

[00:20:34] HC: And that just blew my mind because at the time it was more of like the web in and of itself coming out of an academic environment, like certain, right? It got pushed through because it wasn’t means for other researchers to be able to share the academic papers. So it was very text heavy, like the focus on the presentation or text. Right? So a lot of the CSS styles were catered for that. So they had a lots of things out of the box, like font size early on. You could change their texts and colors. They were basic like margins and paddings and stuff like that. But it wasn’t really meant for doing like the types of creative layouts that you see coming out of say maybe ad agencies, those really graphic designing stuff, that wasn’t a use case at the time. So a lot of the technology that you had was added on later. The complaint of each time is that, “Why can’t CSS do X?” And I would like to plug someone who’s a member of the CSS working group. I would call her the CSS advocate, Rachel Andrew. She mentions it best. She says that, “The statement today should be CSS can’t do that yet because the way things are developing.” There are more features coming in and browsers have helped this a lot because the release cycle has shortened considerably. So I think this is something that people need to start getting used to because I feel that a lot folks are still married to the mindset that like, “Oh, it’s not working, so I’m not going to use it.” And that was fine. That was fine for five years ago because if it wasn’t working, it was probably not going to work for the next six months. But it’s very different now. If it’s not working this month, it might work next month. I think a lot of it is really not the technology’s fault. It’s our mindset around the technology, right?

 

[00:22:25] JL: For anyone listening that is open to changing their mindset or at least interested in digging deeper into CSS, could you share some ways they can get started? I know that you have given a talk before called “How I learned to CSS” at CSSconf in Asia.

 

[00:22:42] HC: So my suggestion is just look at the things around you. Maybe you walk by a cinema and then you see a poster or you see some, I don’t know, a conflict box or whatever and think of ways that you could recreate that in CSS. For me, I find this an extremely fun activity. As you try to build this slightly unorthodox design and then you’re not constrained by, “Oh, I have to write beautiful code.” No. Write the shittiest code you want. As long as it looks like what you want it to be, go ahead. And that’s where you expose yourself to all these different CSS properties. You’d be like, “How can I make this overlap with that?” And there are so many different techniques. You can use negative margins. You could use Grid. And you can just explore. Again, I’d say because there’s limited stress and you’re not constrained by, “Oh, I have to write the most beautiful.” No. Write the most terrible code you want and that I think is a safe space to explore CSS in that kind of context.

 

[00:23:45] JL: Yeah. I mean, it sounds like CSS art was also, like Ananya, you were inspired by that, right?

 

[00:23:52] AN: Yeah.

 

[00:23:52] JL: And that’s how you got into CSS.

 

[00:23:55] AN: Yes. Yes. Definitely. I completely agree with that. So with learning CSS, it stands true with everything, right? No matter what programming language and learning, you’re only going to get better, the more and more you practice. Without practice. You’ll know just like the bits of story here and there, but you won’t actually be better at it. So it like directly applies with CSS as well. For example, I would say that when I was learning Flexbox, I decided to like recreate this thing from my childhood. So if anyone who knows me knows me, they know that I’m like a very big Harry Potter fan and I’m like obsessed with it. So like the Harry Potter series that is this like newspaper called The Daily Prophet. So I tried to recreate this like whole newspaper with Flexbox. And at that time, I didn’t have the opportunity to use Flexbox at like the place of work. But I learned in my own time, I created this like really fun project where I was like creating this like newspaper thing. And that was a great learning experience. And it was so fun.

 

[00:25:07] BH: I really love throw-away code as a means of accomplishing thing, being given the opportunity to write code that you know doesn’t have to last forever. It’s a really freeing opportunity. CodePen is really cool because of that. You’re not building code that has to build on to other code, which is usually what our jobs are for and any opportunity to write stuff that doesn’t have the support future functionality is really liberating and the best way to write CSS and other kind of code, if you ask me.

 

[MUSIC BREAK]

 

[00:25:56] JL: Now we’re going to move into a segment where we look at responses that you, the audience, have sent us to a question we made in relation to this episode.

 

[00:26:03] BH: The question we asked you all was, “What are some of the coolest things you’ve made using just HTML and CSS?” Our first response from Suzanne, “As part of the 100 Days Project Scotland, I’ve been doing a hundred-day challenge to create some new art from only HTML and CSS each day. I’m over a third of the way through, and I’ve learned so much and made some fun things. The 100 Days Project is about celebrating art and creativity and I really want to show the developers create art too.” The whole collection is here and there’s a link we’ll put in the show notes. My favorite one so far is my washing machine.

 

[00:26:44] HC: That’s amazing.

 

[00:26:47] BH: Washing machines are perfect blend of different sorts of shapes and motions and personality and an inanimate object in a way. I think that’s a good idea. That’s a good one.

 

[00:27:00] JL: As a side bar, I like to see faces in almost all of my appliances. So I hear that. Our next response is from Kay and they wrote, “I set pointer-events to none and JavaScript devs went crazy because their event listeners wouldn’t work anymore”

 

[00:27:19] HC: That’s so fun. Oh my God.

 

[00:27:24] AN: It’s like playing a prank on Dev is amazing.

 

[00:27:28] HC: Five stars.

 

[00:27:29] BH: In terms of cool things you can do as CSS along these lines, if anyone leaves their computer open, I think a good prank is to install a script or browser extension that subtly modifies their whole web experience in a way they might not notice at first, but it was kind of like impossible to ignore and hilarious that they won’t notice it right away and they’ll eventually ask why all the images in their web browser look like in such a way or there’s no more color anywhere or anything like that.

 

[00:28:02] JL: Ben, it sort of sounds like you’ve maybe done this to someone.

 

[00:28:05] AN: I was just going to say that. You sound so confident.

 

[00:28:09] BH: I’ve done this to great results each time. I’ve never done anything overly malicious of course. It’s a good way to teach people lessons about leaving their computers unattended, which is just good security practices, but it’s all in good fun.

 

[00:28:24] JL: Janet wrote in, “Last year, I took part in Codevember and use their prompts to try to make CSS art every day. I sadly didn’t finish the challenge, but my favorite creation was this coy fish. I was actually able to talk about it in a few interviews, so that really helped during my job hunting.” That’s a topic we didn’t really talk about, and it’s really cool that Janet was able to leverage her CSS art for interviewing.

 

[00:28:48] AN: It’s like when you talk about like practicing CSS, so if you create these like really cool things, it just establishes you as like sort of an expert in that area and you can leverage that in your interviews and getting jobs. That’s like an added bonus.

 

[00:29:05] BH: Yeah. I was going to say that as well. Ananya, I’m sure your incredibly popular Dev posts have to be a big boon to your interview opportunities to be able to show off just what you’ve done and how much you’ve taught other people along the way.

 

[00:29:21] AN: Yeah, for sure. Like that article, I have no idea like why it blew up. I did not expect it. I mean, I think it’s almost been a year now. Like I wrote it last year, and even today I like get Twitter DMs or emails saying that they learned something from it. And every time they say, “Oh, I’m so amazed. I had no idea that we could do that.” And it just makes me like so immensely happy that people are discovering this. Maybe it’s like a tiny nudge in their direction. Now they can like go ahead and explore these things and then they can create like more great things and like share with other people.

 

[00:30:05] JL: That is awesome. And it’s cool to hear that you’re getting fan mail.

 

[00:30:09] AN: Yes. True.

 

[00:30:12] BH: So these responses are inherently quite visual. So everyone will have to check out the show notes to get a little bit more about what’s going on, but Sharky writes in, “This super cool pixel dragon took ages, but I had so much fun doing it.” And they embedded a code pen.

 

[00:30:29] AN: I love pixel art. It’s like one of my favorites.

 

[00:30:32] HC: Same. My avatar that I use everywhere is like this pixelated version of myself. And people are like, “Oh, how did you generate it?” I’m like, “No, I clicked for four hours and that’s why I use it everywhere. I need to advertise the four hours of my youth I spent clicking.” But yeah, I do like pixel art.

 

[00:30:54] JL: I first learned about pixel art through actual like painted pixel art. So I think it was painted at least, but Jenn Schiffer will take like pixel art, but then like actually draw it.

 

[00:31:07] HC: Oh, Jenn Schiffer is amazing.

 

[00:31:10] JL: You know, she’s so fun.

 

[00:31:12] HC: I was lucky enough to be in attendance at a Frontiers Conference in Amsterdam last year, and Stephen Cook, so he’s a friend and engineer and his presentation around CSS Mario Kart, but he had created like pixel art with box shadows, which is nuts because for box shadows, it’s one of those things that, because it’s a pixel, right? Box shadows, you can recreate unlimited the same shape. So if you’re just doing squares, pixel art, it’s nuts, I think he used the generator for it, but still, that’s kind of like the most, I would say, performant way you could do pixel art with CSS is that you don’t have to use like 1,000 dithers. Just use box shadow. So shout out Stephen Cook for showing the world that this technique exists.

 

[00:32:04] JL: So Shay wrote in, “My whole homepage, stibelman.com is pure HTML and CSS. I have some JavaScript for cleanup and automation of a couple of things, but the rest is CSS. It’s kind of a hobby of mine to try to solve JavaScript solutions in CSS.”

 

[00:32:20] HC: Oh my God! High five!

 

[00:32:21] AN: Brilliant.

 

[00:32:22] HC: Good friend, best friend!

 

[00:32:26] BH: Before we wrap up, can we ask one controversial question? How do you two feel about the topic of CSS in JavaScript?

 

[00:32:37] HC: I knew this was coming. Well, for me, I personally wouldn’t do it on like a general scale. I feel that CSS, if you put your CSS in JavaScript, you kind of lose a lot of the power of CSS, but I won’t say CSS in JavaScript is something that should never be done. I don’t think so because I feel that every solution has a very specific use case and whether or not you pick a solution, I think the onus is on you to weigh the pros and cons. If CSS and JavaScript fits your unique use case or like your application, the way your application ran, the way your team is structured, all those different things, if that works for you, I think go ahead. But I don’t think it’s something like you should say like, “Oh, everything should be CSS in JavaScript.” That’s the opinion that I don’t agree with. Personally, I’m not a big fan, but I can see where it can be useful. And I would say if your use case fits that, go ahead.

 

[00:33:43] AN: I personally do not like it. I don’t think I’ve actually used a CSS in JS in like large scale applications. But yeah, I mean, if it fits your use case, then sure, go ahead. But if I have to choose, I think I would stick with CSS separately because, I don’t know, that’s my opinion. Yes.

 

[00:34:07] BH: I think some problems arise when folks think in a sort of misguided way that CSS is kind of fading and CSS in JS is kind of like the future. And there’s sometimes this feeling of pressure that if there’s some new idea that the old one is going to fade away and I think to some of the points you made waging earlier about the journey that CSS has been on from the beginning in terms of how it’s evolved and everything, it would be a real shame to think that we can’t leverage all the great stuff that’s come out, all the ideas that have been built around in terms of both what you can do with CSS and then how it’s meant to be cached in the browser and all that stuff. So if you really know why CSS in JS is the right choice, that’s probably a really good one, but I think there’s a lot of developers out there playing follow-the-leader and doing whatever their favorite Twitter developer is saying.

 

[00:35:07] HC: Yeah. I recently came across the term hype-driven development. I said, “Oh, that’s so true. Oh my God.”

 

[00:35:13] AN: Yes. I see a lot of people tweet about like that if you’re not doing CSS in JS, like you’re doing it wrong. And I do not like when people say that.

 

[00:35:25] HC: I’m offended by that.

 

[00:35:28] AN: Yeah. I mean, it fits their use case, that’s great, but deriving their opinion and sharing with people in a way that says that if you’re not writing CSS in JS, you’re doing it wrong. And so these like up-coming developers who don’t necessarily have that much guidance. They are definitely misguided. It’s doing more harm than it’s doing good.

 

[00:35:54] HC: For sure. I hundred percent agree. I think for me, personally, I really don’t like people telling me what to do. So if someone told me, “Your table is really messy, you should clean it up,” even if I was going to clean it, I’m like, “No.” I will walk away. I don’t like the shit part. If you phrase it in that, I’m sharing with you, this is what worked for me. I love that. I think that’s great because you’re sharing one more idea, but to force your opinion on others, that’s the part that I disagree with again. Again, for me, it boils down to, it’s not even about CSS in JS as a technique anymore. It’s more of that people seem to be adamant and trying to insist that this is the right way, but I think the nature of CSS in and of itself already is there is no one right way because CSS is very contextual. I feel that with the types of properties that we have now, it’s even more like content aware than before. Without understanding the context, you are in no position to say what is better or not.

 

[00:36:56] JL: Ananya, Hui Jing, thank you both so much for joining us.

 

[00:36:59] HC: Thank you so much for having us. This has been great. It’s worth talking about CSS.

 

[00:37:03] AN: it was so much fun. Yes.

 

[00:37:14] JL: I want to thank everyone who sent in responses. For all of you listening, please be on the lookout for our next question. We’d especially love it if you would dial into our Google Voice. The number is +1 (929) 500-1513 or you can email us a voice memo so we can hear your responses in your own beautiful voices. This show is produced and mixed by Levi Sharpe. Editorial oversight by Peter Frank and Saron Yitbarek. Our theme song is by Slow Biz. If you have any questions or comments, please email [email protected] and make sure to join our Dev Discuss Twitter chats on Tuesdays at 9:00 PM Eastern, or if you want to start your own discussion, write a post on Dev using the #discuss. Please rate and subscribe to this show on Apple Podcasts.