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