The Best CSS

We discuss a personal history with CSS development and experiences with web design, including the challenges and innovations encountered over the years. We consider what the best way of writing CSS might be and announce an upcoming event.
  • css
  • tailwind
  • styled-components


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



  1. https://blog.damato.design/posts/close-thy-enemy

  2. https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute

  3. https://github.com/ddamato/html-by-css

  4. https://cssclub.nyc