00:49 Hey, good to see you.
00:50 Thanks for coming.
00:51 This is another episode of wireframe.
00:52 And today I’m going to be talking about CSS.
00:57 Now to start, I just want to talk about the history I have with CSS, and it’s a
01:00 little bit of a weird history, I think.
01:03 I’ve been doing web development for like 25 years now.
01:07 It’s been a long time.
01:08 It’s ha over half my life now I’m thinking about it.
01:11 And I started doing that kind of stuff in high school late in high school.
01:16 And this is actually probably a little bit before even CSS was a real thing.
01:19 We’re talking like bgcolor stuff or slicing things in Photoshop.
01:24 But I really got into CSS because I was trying to start a business.
01:29 Now, the business didn’t have anything necessarily to do with web development.
01:32 Actually the business was called love per second and it was a speed dating business.
01:37 And the reason why I wanted to do a speed dating business was because I
01:42 was really into hosting events and I thought it would be really fun to do
01:47 the speed dating business because it.
01:49 Didn’t need to be a big space.
01:51 I could just have, you know, a couple dozen people in the room,
01:54 and get them to know each other, and just overall host an event.
01:59 I thought that would be really fun to do.
02:00 Now with a idea, you also at this point in time needed a website,
02:05 right, to get more traction.
02:08 So I ended up having a site that was hosted on something called TypePad.
02:16 TypePad, I think is actually still around.
02:18 It’s a old blogging platform.
02:20 So what TypePad provides is areas for like content.
02:24 So you can have like a main area and then a sidebar or maybe even two sidebars.
02:30 And you don’t have a lot of control about those areas.
02:35 It’s really kind of restricted.
02:36 You have like widgets, of course you could add, and you can rearrange the
02:39 widgets in those areas, but you don’t have like All of the customizability
02:45 that you might have when you were building the website yourself.
02:48 I was just using it as like a hosting platform because there
02:51 really wasn’t a lot of hosting.
02:52 I didn’t want to have an entire server dedicated to this.
02:55 So, I thought that TypePad was a fine platform for this.
02:59 But, I still wanted to have some sort of personality to this website.
03:05 And I had, you know, some, website building experience prior to this.
03:09 But you know, that’s still again, very free form, right?
03:12 You’re just going to go ahead and make some slices in Adobe
03:15 Photoshop, put it together in FrontPage or something like that.
03:18 And this was very restrictive and that was the key for me learning.
03:22 In fact, it was so restrictive that you didn’t have access to any particular
03:26 class names or IDs or anything like that.
03:29 All of that stuff was prebuilt into TypePad, so you couldn’t access
03:32 that stuff to potentially change it.
03:34 And the real important piece of this is that TypePad provided
03:40 you a area specifically for CSS.
03:42 It was just one single text box in their interface that
03:46 you could put custom CSS in.
03:49 So you would have to.
03:52 Look at your source code that was available, you know, just by looking
03:56 at the source for your HTML page and see what HTML classes were available in
04:03 there, and you would have to hook into those with, you know, the selectors that
04:06 were there and then add that custom CSS.
04:09 And again, because you didn’t have access to the structure to that HTML,
04:12 you had to get very, very creative about the techniques that you might need
04:17 to use in order to make it look like.
04:21 Like what you want.
04:24 And that’s the way that I really learned CSS is through that restriction, that
04:28 unavailability of getting to the HTML and being able to manipulate it in,
04:33 you know, maybe as something, a way that would work different for me.
04:36 And this was kind of like my CSS Zen Garden.
04:39 I actually wasn’t around for CSS Zen Garden or.
04:42 Not that I wasn’t around, but I never really knew about it until much later,
04:46 but that was really the way that I learned about it was that restrictive
04:49 kind of nature between not having the ability to touch the HTML and only
04:54 have the ability to manipulate the CSS.
04:57 And that was super.
04:59 Powerful from a learning standpoint, right?
05:02 Because then you’re able to learn all of the tricks that you need
05:06 to write the CSS and get the presentation that you’re expecting.
05:11 And of course, speaking of CSS tricks, I mean, that came along a little bit
05:14 later from that, but certainly there are tricks that have happened over the
05:19 number of years that CSS has been around.
05:21 And we have been using those tricks for a long time, but now in the year 2024,
05:26 there’s a lot less tricks and a lot more features, which is really cool.
05:32 So that’s the.
05:33 Way that I learned how to write CSS.
05:35 And, you know, I’m really appreciated all of the new technologies that
05:39 we’ve gotten in CSS over the years.
05:41 I mean, Flexbox has been huge in terms of what we needed to do to create more
05:47 complicated layouts these days, right?
05:49 This is after the years of us doing floats.
05:52 In fact, I saw a tweet recently that was saying when’s the
05:56 last time you wrote this?
05:57 Which was float left and clear left, etc, etc.
06:01 And in fact, it’s actually not been so long because there’s a certain
06:03 trick that helps with close buttons that I’ve developed that’s on my blog.
06:10 Which is called Close Thy Enemy1 and that blog post actually goes around
06:14 to a lot of different implementations of that close button and shows
06:18 how it might break depending on the content that’s put in there.
06:20 And the approach that I suggest actually does solve all of those cases.
06:25 So check it out if you’re interested.
06:26 I’ll put it in the shownotes But we’ve come a long way to go to things like
06:31 Flexbox and Grid, and now there’s even, you know, the popover specification 2
06:37 that’s coming out that seems incredible.
06:40 And I’ve actually been taking a good close look at That specification for a long
06:45 time now, because I actually didn’t really enjoy the first kind of iterations of it.
06:49 It was very messy, but now there’s a lot of keywords that just help you out
06:53 as opposed to writing custom position properties, which is really nice.
06:57 So.
06:58 I’ll probably try to link to the spec in the show notes or something that kind
07:01 of directs you to that specification.
07:04 All that aside, I actually wanted to talk a little bit more about what I
07:08 think is the best way to write CSS.
07:13 Now, this isn’t just going to be about CSS here because it’s actually going
07:17 to be a little bit about HTML as well.
07:20 And I think many of us who have been writing HTML and CSS for a long time will
07:26 resonate with what I’m about to explain.
07:28 Because You end up going back and forth between the HTML and the CSS.
07:34 You’ll write a little bit of HTML structure, and then you’ll write a
07:37 little bit of CSS to go along with that structure, and then you’ll return back to
07:40 the HTML and then you write some of that, go to the CSS, write some of that, right?
07:44 You’ll have to figure out a class name hook it to the
07:46 class name and the selector.
07:48 So there’s a lot of going back and forth and I am empathetic to
07:55 that kind of context switching that has to happen, right?
08:00 And I think if there was a way for you to just stay in the same context but
08:07 provide the things that you need to make the web page look as expected,
08:13 it would be a lot better, right?
08:16 And I think that’s the key in terms of people trying to improve the
08:20 developer experience of writing CSS.
08:24 Fundamentally.
08:25 Right?
08:25 With all of the banter that goes on on the internet, I think fundamentally
08:29 it really comes down to the authorship experience of going between the
08:35 content that is going to eventually get styles and then the styles themselves.
08:41 And I think that’s really where the idea of the CSS-in-JS direction has
08:47 come from is this idea of, you know, Styled Components being one of the main
08:52 products that supports this where you are writing a CSS declaration
08:59 and then that CSS declaration then is rendered as a component.
09:05 Now, admittedly, when I first saw that, I felt a little bit Weird about that,
09:09 especially since it’s in a JSX environment and I wasn’t writing JSX at the time,
09:14 so I didn’t really get it because again, coming from the years of experience
09:18 of just writing the CSS and going back and forth with HTML I wasn’t in the
09:22 environment of JSX to like appreciate what that was potentially doing.
09:28 So I ended up on that a little bit late.
09:30 Additionally, there’s a lot of kind of weird stuff that I think People are
09:35 doing in the ecosystem, which is this whole kind of like conditional add this
09:40 property if this occurs, but then add this property if, if it doesn’t occur,
09:44 which ends up, you know, being weird and runtime and just like very messy when
09:48 you do that conditional stuff in, in the CSS property space, in my opinion,
09:54 I think it’s actually a lot cleaner to handle it by class name, , or, by some
09:58 kind of attribute in general, that’s less related to the point I’m trying to make.
10:04 And the point I’m actually trying to make dovetails into Tailwind.
10:11 Now, of course I can’t have a CSS discussion without talking about
10:14 Tailwind and its impact in the ecosystem.
10:17 Granted, I am not a fan of Tailwind.
10:20 As a process or as a framework to consider to use.
10:25 And again, that comes a lot from my.
10:28 Background of writing just CSS and knowing all the properties
10:32 and what that syntax is and being really, really comfortable with it.
10:35 But I get the interest.
10:40 And again, it goes all the way back to that developer experience, right?
10:44 That context switching, because what’s happening with Tailwind is
10:48 that you’re not context switching.
10:51 You don’t have to go into that CSS file at all.
10:55 And.
10:55 Instead, you’re writing the structure and including the styles in that structure.
11:01 Right, so you’re doing that at a single point in time.
11:05 And admittedly, it’s very powerful, okay?
11:08 Like, I totally understand the, desire to be writing styles in this way.
11:15 Where you’re just writing the structure, you’re adding the styles
11:18 while you write the structure and it all happens at the same time.
11:22 And especially in a world where it’s JSX driven, you’re not even writing in
11:27 an HTML file any longer, you’re writing a single file component, more or less.
11:32 And I think the single file component direction is very powerful.
11:39 And I think it’s really the way That we should be building as
11:42 opposed to having separate files for these things and having a build
11:45 process that puts them all together.
11:46 You know, having that single file is really nice.
11:49 So I see the interest in Tailwind because of it, okay?
11:53 But my big hot take here is that I think it was backwards.
11:58 I want to get a little bit more into that, and I will, but I also want to talk a
12:01 little bit about, what I remember hearing about the reason why Tailwind exists.
12:07 I saw the video from Tailwind Connect, I believe it was called,
12:13 it was a conference for Tailwind.
12:17 And I remember Adam being on stage and talking about how he, Came up with
12:22 Tailwind, the reason why it exists.
12:25 And I was really interested in learning about where his head was
12:29 when he was trying to build sites and his explanation of it was really
12:36 interesting because he was on the same path that I was considering.
12:44 Overall, right?
12:45 You have this like card component and you want to have some styles called card that
12:51 represent everything about that card.
12:53 But then of course there’s opportunities for different sort of changes that
12:59 might happen to that card, different variations that happened to that card.
13:02 So it was really annoying to, you know, manage all these particular variations.
13:09 Now I think there’s.
13:11 A little bit of a commentary, of course, to that, where maybe there shouldn’t
13:14 be so many variations in the card and that’s part of the design process, but.
13:19 Eventually, the thing that really was the lightbulb moment for him was actually
13:23 shadows in what he was describing, if this is accurate from his experience.
13:29 Because he mentioned that there was a shadow that was on the card,
13:33 but then there was also a shadow that was on some other element that
13:36 was meant to show some elevation.
13:39 And it was More apparent to him to have a class that represented that
13:43 shadow that could be reused over and over and over again, as opposed to
13:47 putting the same shadow on the card, as well as this other element over
13:50 here and it’s over other element here.
13:52 And of course, this is before design tokens and CSS custom properties
13:57 really, I think took off potentially.
13:59 Or maybe he wasn’t familiar with them.
14:01 Hard to say.
14:02 Because of course a custom property would have definitely solved that right off
14:05 the bat where you can have that single.
14:08 value be placed in a whole bunch of locations but that was really his
14:12 defining moment for Tailwind is that it made more sense for it to be a
14:18 class based Utility as opposed to these component driven systems now I of course
14:25 disagree with that finding from that experience personally And I think also
14:31 some of it is very interesting when it comes to Shadow being the defining
14:35 feature that made him think That, that shadow would be better as utility.
14:40 I will probably either talk about that in another wireframe or
14:43 potentially a blog post about shadows.
14:47 I do want to call that out because I thought a lot about shadows and
14:49 elevation in the last couple of months that dovetails a little bit
14:53 into, you know, Mise en Mode and other things like that, but I’m going
14:57 to leave it at the moment there.
14:58 But I want to get back to the concept of one file components.
15:04 And what Tailwind is trying to solve.
15:07 So, I mentioned that it was backwards.
15:09 And I think it’s backwards because of writing HTML and then adding styles to it.
15:17 In my mind, I think it actually makes more sense, in my opinion, from my experience,
15:23 to write the CSS that generates the HTML.
15:27 Okay, every time I write a Astro component, I find myself only having,
15:33 you know, a few lines of HTML, maybe a few lines of JavaScript,
15:38 but a lot of CSS, like a lot, right?
15:42 A couple of the measurements that I took across some files that I had, I had maybe,
15:48 you know, less than 10 lines of HTML, less than 10 lines of JavaScript, but then I
15:53 would have nearly a hundred lines of CSS.
15:55 And of course this varies depending on the kind of stuff that you’re
15:58 doing, And the JavaScript that I’m talking about is mostly client side.
16:03 . Much of what I’m writing seems to be CSS.
16:07 So, if that’s the case, then I think it might make sense in
16:12 this kind of environment for the component to be driven by the CSS.
16:17 Now, that’s exactly what I think the foundations are
16:21 for Styled Components, right?
16:22 Because the component exists because of the CSS, I think that’s very interesting.
16:26 So, With that concept plus the idea of nesting and in fact nesting I just
16:33 found this out recently happens to be available across all browsers now
16:37 natively It’s not the direct Sass nesting there’s a slight difference between
16:42 Sass nesting and the browser nesting I believe or that might actually be
16:48 Incorrect at this point because I know there’s been some changes over time
16:51 with the nesting structure and what
16:53 has happened there.
16:54 So do your reading on that, but nesting is available natively in the browser
16:59 right now in many, in many cases, so to use the power of nesting, which that’s
17:05 really what you’re doing with HTML, right?
17:07 The HTML is a nested structure of elements that you’re, that
17:12 you’re Placing on the page.
17:14 So what if you were writing CSS for it to be rendered as HTML?
17:21 What if, because at that point you can do a couple of different things, right?
17:28 Because you don’t need to write the HTML any longer.
17:31 You can nest all that CSS and that gets generated.
17:35 So at that point, then.
17:36 There won’t be any CSS that’s unused because that CSS, by
17:42 definition, is creating an element.
17:44 If you no longer need that element, you need to delete that CSS as well.
17:47 You know, what Tailwind of course is doing is it’s giving you all the CSS potentially
17:50 and then deleting it if it doesn’t exist on the page, which is another
17:55 you know, direction in the whole thing.
17:57 But I think there’s something better about the idea of providing exactly
18:02 the CSS that you need as opposed to giving you all the potential CSS
18:07 and then removing it afterwards.
18:09 I’m imagining there must be some, CSS that might be, , Missed in all of that.
18:15 I mean, imagining, you know, if there’s additional classes that
18:19 are added after render, you know, that aren’t statically analyzed.
18:23 I don’t know.
18:23 I’m not exactly sure how Tailwind works in that way.
18:26 I just think that it might be a little bit cleaner just to, of course,
18:29 add the exact CSS that you need, as opposed to having everything in.
18:32 And potentially deleting it later.
18:35 So anyway, the reason I’m talking about this is because I’ve
18:38 actually presented this concept.
18:40 I wrote a package called HTML-by-CSS 3.
18:43 I’ll have a link in the show notes about it.
18:45 And it is exactly what I’m describing where you would write CSS and it
18:50 generates the HTML from that CSS.
18:53 And it’s very much a.
18:56 You know, side project that I thought would be really interesting to try out.
18:59 I’m not actually using any of my sites, to be completely honest.
19:03 But it’s just something to go ahead and play with.
19:05 And I presented this at an event called CSS Club 4 in New York a couple months ago.
19:12 And the response was very interesting.
19:16 So much so that I actually had no idea.
19:19 But Rich Harris was sitting in the front row.
19:23 And if you don’t know who Rich Harris is, is the person who developed Svelte.
19:27 And he tweeted it out, actually, after my presentation that I was doing
19:32 absolute mad scientist work up there.
19:35 But he really enjoyed the idea.
19:38 So, HTML-by-CSS in Svelte when?
19:41 It’s probably not happening, but it’s, it’s okay.
19:44 But I, you know, that was really interesting to get that feedback in there.
19:48 I’ve since not really been speaking about that particular project, but I still think
19:52 that there’s something there for people who are interested in an alternative way
19:58 of developing component libraries, I think there’s still a lot more to be done
20:04 with that project, but I think there’s some meat there that, if someone wanted
20:09 to take it and run, could be interesting.
20:12 But that is to say that, you know, some people just don’t feel like CSS
20:16 as an authorship experience is the way that they want to be doing things.
20:20 And that’s totally fine.
20:21 Fine, right?
20:22 I mean, people are much more comfortable writing, you know, HTML
20:26 or JSX at this point to wants to have a Tailwind experience instead.
20:31 So again, that context, which doesn’t exist in there, right?
20:34 But from a perspective that really.
20:39 Focuses on the HTML and the CSS, right?
20:43 I focus a lot less on the JavaScript than that ecosystem.
20:46 I think there’s something really interesting about, again, just writing
20:49 the CSS and it generating HTML.
20:51 I think there’s something really cool about that.
20:54 So is that the best way of writing CSS?
20:56 Who the hell knows?
20:57 Right?.
20:57 How far can that go?
20:59 I have really no idea.
21:01 I think there’s a lot more work to be considered in there.
21:05 And plus, you know, there’s so many frameworks out there that I don’t
21:08 understand their build processes to even potentially have some additional plugin
21:13 that just kind of works in this scenario.
21:16 What does the DX feel like when it comes to that stuff?
21:19 I really don’t know.
21:21 But I think it’s something that could be cool for someone to pick up and run with
21:25 someone who’s more popular than me when it comes to the developer experience.
21:29 I do believe that it’s something better than just context
21:34 switching back and forth.
21:35 I think the context switching part of it is the part that needs to go.
21:38 And I think that’s the one thing that Styled Components certainly gets right.
21:44 I think that Tailwind gets right, admittedly.
21:47 But from a person who’s been writing CSS for a really, really long time and is
21:52 passionate about being an expert in the way that CSS works, you know the author
21:57 experience of Tailwind is just not for me.
22:00 However, I do have one surprise that I’ve been planning.
22:05 And the surprise that I’ve been planning is that I plan to do a live stream.
22:10 I’m gonna call it LiveWire, of course.
22:13 That I’m going to attempt to learn Tailwind live.
22:17 I don’t know when I’m gonna do it.
22:19 But I definitely want to do it as a live experience that people can chime
22:24 in, help provide opinions, whatever.
22:28 But I’m going to try to learn Tailwind live.
22:30 And the reason is because of course, you know, I have opinions
22:33 about Tailwind, but I’m having those opinions outside of Tailwind.
22:37 Okay.
22:38 And I’ve been vocal about not liking Tailwind overall,
22:40 you know as a, an approach.
22:43 But that’s, again, my own opinion there, but that’s an opinion that
22:47 I have without actually trying it.
22:49 And it’s, I think, going to be important for me to actually try it, for me to
22:53 have an opinion, a true opinion about it, to write accurately about it.
22:58 You know, there’s been a lot of writings about Tailwind, positive,
23:01 negative, whatever that are muddying the water, and I want to have an
23:06 honest attempt to learn it on stream
23:08 . And then finally, write an honest review about Tailwind in that way.
23:15 All right.
23:15 I’ll keep you folks posted about when that actually happens again.
23:19 It probably won’t be for a little while, but I just want to kind of.
23:22 You know, give that folks something to look forward to.
23:25 If you’ve gotten to the end of this episode and let me know what you think how
23:29 do you think CSS should be written, right?
23:31 It should just be in a CSS file.
23:33 Do you write PostCSS or Sass or Less or Compass you know, all those older
23:38 frameworks, do you write in JavaScript?
23:41 Do you write it in something else?
23:42 You know, use Tailwind, you know, some other PandaCSS.
23:45 I know it’s a new one that’s out.
23:46 That’s been interesting for folks.
23:47 So, you know, let me know what you’re writing, what you think about it.
23:50 And I’ll catch you next time.
23:52 Later.
